Discussion :

[haddocks]

Bonjour,

Je suis en train de suvre le cours de Jean Baptiste Naigeon sur le CSS "Div et CSS : une mise en page rapide et facile" .

II. Ajout d'une barre de menu à gauche du contenu:
lorsque je supprime du CSS ci-dessous le float et le clear du "contenu" et du "pied de page", il ne se passe rien.

De plus lorsque je supprime également le float de "menu" les blocs se superposent. Là c'est normal, mais quand je remets le float, tout redevient d'un seul coup comme au début.

CONCLUSION: les choses ne se passent pas comme dit dans l'exercice. Du coup ça me donne l'impression que que le float et le clear du contenu et du pied de page ne servent à rien.

Quelqu'un aurait une explication à me donner ?
PS: j'utilise bracket comme editeur et chrome pour l'affichage et j'enregistre bien chaque modif avant de relancer.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
div {
	text-align:center;
	}
div#bandeau {
	width:600px;
	height:50px;
	background-color:#00CCFF;
	}
div#menu {
	float:left;
	width:100px;
	height:400px;
	background-color:#FF6699;
	}
div#contenu {
	float:left;
	width:500px;
	height:400px;
	background-color:#FFCC00;
	}
div#pied_page {
	clear:both;
	width:600px;
	height:50px;
	background-color:#33FF99;
	}

[Invité]

Bonjour,

1- ce tuto date de... 2006.
La méthode employée (utilisation de float, dimensions fixées en pixels,...) n'est plus vraiment d'actualité.
Voici un exemple plus "récent" (avec float, et dimensions en %) : https://codepen.io/jreaux62/pen/sbLIF

2- De nos jours, "responsive design" oblige, on utilisera plus volontier :

• les flexbox (display:flex,...) -> Les concepts de base pour flexbox - A Complete Guide to Flexbox
• le système de grid CSS -> Grilles CSS (CSS Grid)

Exemples de mise en page, avec flexbox :

• Flex : Exemple de layout complet - 1
• Mise en page - CSS flex

Menu :

• MENU multi-niveaux CSS jQuery

[haddocks]

Bonjour JREAUX62,

Merci pour tes infos.

Je voudrais néanmoins savoir si mes questions en rapport avec le code étaient légitimes ou pas? Histoire de savoir si j'avais bien compris ce qui aurait dû se passer. Histoire aussi de savoir si je suis pas une pipe et que je peux pousser un peu plus ma curiosité

Bon chemin.

[haddocks]

En fait avoir une explication plus précise du pourquoi ça ne fonctionnait pas.
Thanks.

[Invité]

1- Tu n'as donné qu'un bout de code CSS.
Il faut TOUT le CSS, + le code HTML associé.
Sinon, on ne peut pas savoir si et où il y a une erreur *.

* Par exemple, dans le tuto, c'est div#piedpage, pas div#pied_page.

2- A voir aussi :

• Comment faire pour qu'un conteneur englobe ses enfants flottants ?

3- D'autre part, je t'invite à t'intéresser aux balises HTML5 :

• HTML5 : le guide du débutant
• 101 balises HTML5 + exemples

[haddocks]

Bonjour Jreaux62,

Ouaip j'aurais dû envoyé le lien, désolé.
https://pbnaigeon.developpez.com/tut...e-en-page-CSS/

Sinon ton lien sur la nouvelle version de l'exo fonctionne parfaitement pour moi.
Du coup je vais suivre le tuto que tu m'a envoyé sur "css-tricks". Si tu as d'autres tutos a me proposer sur developpez.com je suis preneur

Bon vent a toi.
Joyeux noel.
A+