Question bonne pratique et problème pour donner une propriété

Bonjour à tous,

Je suis en train de construire un site et j'essaie de respecter les bonnes pratiques mais je me retrouve confronté à une interrogation. J'essaie au maximum de séparer la mise en page du contenu. Et lorsque je regarde sur internet comment centrer ma mise en page, la méthode apparemment la plus employée est de créer un div "global" pour lui appliquer un margin auto. La question que je me pause est alors de savoir si c'est encore une "bonne" pratique car il faudra donc rajouter directement en HTML une balise qui ne servira qu'à la mise en page?
Je me suis donc dit que j'allais mettre ce margin: auto dans le body directement: ça marche, mais... est-ce qu'il est recommandé de faire comme ça?

Ensuite, en voulant commencer à travailler un peu la mise en page, je me suis retrouvé un peu limité sans ce div global pour par exemple appliquer une ombre portée au contenu principal ("main" et sidebar, un peu à la manière de ce site).
Donc là je me suis dit qu'il n'était peut etre pas possible de travailler sans div global, jee l'ai donc rajouté une et là est ma deuxième question, plus pratique, mais je n'y suis pas arrivé. Ca doit sans doute être quelque chose de con à régler mais je ne vois pas quoi. Voici un exemple du problème : http://vincentgires.com/test/ le div global devrait avoir un background green, or je n'ai rien de cette couleur. Quel est le problème dans ce que j'ai fait?

Merci d'avance! )
Modifié par untitledoc (16 Mar 2013 - 00:36)

Bonjour DocumentSansTitre ,

Alors concernant l’usage de DIVs englobant, il ne faut pas être jusqu’au boutiste : ça ne pose pas de problème, le DIV étant un élément neutre, il n’altère pas la sémantique. Il est courant de devoir envelopper un élément dans un autre, ou d’ajouter un conteneur intermédiaire comme enfant direct. Par exemple, par habitude, je place toujours le contenu des éléments des listes, dans un élément enfant directe de l’élément `LI`, parce que ça se montre souvent utile, ex. `<LI><SPAN>Blabla</SPAN></LI>` au lieu de directement `<LI>Blabla</LI>`, et cela, assez systématiquement.

Il y a la loi, et l’esprit de la loi, et l’esprit de la loi passe avant la loi. Pour bien savoir appliquer une règle, il faut savoir quand elle ne doit pas être appliquée. C’est ce qui fait la différence entre l’application aveugle ou sans conscience, et l’application en conscience.

Concernant le `margin: auto;` sur l’élément BODY, rien n’en fait une mauvaise pratique. Les anciennes versions d’Internet Explorer ne l’appliquait pas correctement, mais c’était sous IE5.5 et IE6, et c’est maintenant le passé.

Concernant ton petit problème avec le `DIV#global` : il contient un `DIV#main` et un `DIV#aside`, qui sont tous deux `float: …;`. Ces deux flottants, sortent du flux de leurs conteneur, qui ne grandi plus avec eux. Ton `DIV#global` a bien un fond vert, mais n’en montre rien, parce qu’il a une hauteur nul.

Essai par exemple de lui ajouter un `position: absolute;` ou un `height: 300px;` par exemple (les deux n’ont pas le même effet, mais ont en commun de tout deux faire prendre de la surface au `DIV` concerné), et tu verra se produire quelque chose, que je te laisse le soin de comprendre.

Bon courage pour la suite, tu es déjà très bien parti !
Modifié par hibou57 (16 Mar 2013 - 20:04)

Merci pour ta réponse!
Mais j'ai un peu de mal à comprendre l'utilité de la position absolue pour le div global dans ce cas. J'ai testé et effectivement, le background vert s'affiche bien mais sa largueur ne correspond pas à celle du body, et le footer du coup passe derriere et en haut de ma page (avec ou sans clear).
J'ai essayé avec un width du div global à 100% mais avec cette valeur, la largueur dépasse à droite de celle du body limité en pixel (sans doute à cause de la position absolue). Mais alors que faire pour que mon footer reprenne sa position dans le flux et que la largueur de ma div global soit toujours la même que celle du body?
Ces questions sans doute basique mais je m'en sors pas trop malgré les infos que je trouve.

Ok donc si je rajoute un float: left; width: 100%; dans le div global ça marche tout à fait comme je veux!

Voilà, merci pour ton aide.

untitledoc a écrit :
Merci pour ta réponse!
Mais j'ai un peu de mal à comprendre l'utilité de la position absolue pour le div global […] Ces questions sans doute basique mais je m'en sors pas trop malgré les infos que je trouve.

Justement, c’est pour ça que je terminais en disant «te laissais le soin de comprendre». Ce sont effectivement des questions basiques qu’il faut de que tu prenne le temps de comprendre, sinon tu va te faire du mal à chaque fois et rencontrer partout des choses qui vont te paraitre incompréhensibles.

Tu peux voir par exemple :
Initiation au positionnement CSS (partie 2).

Quand aucun style n’est appliqué, un conteneur grandit toujours avec son contenu, le contenu est dans la flux du conteneur, et le conteneur s’agrandit autant que nécessaire pour faire de la place au flux qu’il contient.

Mais un flottant sort du flux, et démarre son propre flux (c’est une conséquence du style `float: …;`), il devient partiellement autonome. Comme il sort du flux de son conteneur, son conteneur ne grandit plus avec. Et si le conteneur ne contient que des flottants, il a simplement une hauteur nulle, parce qu’il ne contient aucun flux qui le pousse à s’agrandir.

Mais ce n’est pas inévitable, et certains styles, créent ce que l’on appel un contexte de formatage (la page est par exemple un contexte de formatage, mais un élément aussi, peut le devenir).

Pour un contexte de formatage, le flottant n’est plus invisible, et il grandit donc avec le ou les flottant qu’il contient.

La propriété `position: absolute;` qui est donnée sans rien d’autre (même pas une position concrète comme `top`, `left`, `right` ou `bottom`), suffit à créer un contexte de formatage. Tu peux aussi en créer un en rendant le conteneur global lui-même flottant, mais tu verra le fond moins facilement, c’est pour ça que je n’ai pas pris cet exemple.

Par contre, donner une hauteur à l’élément global, ne crée pas un contexte de formatage, et si les flottants sont assez grands, ils en déborderont. Tu peux essayer de le voir en faisant varier la hauteur avec l’exemple ou je donnais une hauteur de 300 pixels à l’élément global.

J’espère que tu ne sera pas trop embrouillé par ces explications, mais en tous les cas, il faut que tu les comprenne, elle sont essentielles. Si ce que j’en dis n’est pas clair, tu peux trouver des explications ailleurs sur ce site ou sur le web.
Modifié par hibou57 (16 Mar 2013 - 20:26)

Merci pour tes explications.
Avec un peu de pratique, j'y vois plus clair et le site avance pas trop mal!