Team-Masters.com
Que du Gratuit pour Webmasters
Le positionnement des blocs en CSS : Le flux normal
Ici, on examine les règles qui vont régir le positionnement des blocs et donc assurer les mise en page d’un document à l’aide des CSS. Notamment on comprendra la notion de flux avant d’aborder les différents types de positionnement : abslou, relatif ou flottant.
Avant de parler de positionnement proprement dit, il nous est nécéssaire de faire un point sur la notion de hiérarchie définie par le code HTML d’une page. nous avons vu plus avant qu’une page HTML peut être considérée comme étant structurée de boîtes, qu’elles soient de type bloc ou en ligne, et que ces boîtes peuvent en contenir d’autres selon la famille à laquelle elles appartiennent.
Ancêtres, parents, enfants et frères
Ainsi, un conteneur div, comme l’exemple suivant, peut renfermer un titre de niveau1 h1, un sous-titre de niveau2 <h2>, plusieurs paragraphes <p>, qui contiennent à leur tour des boîtes en ligne telles que <img>, <em>, <strong>....
Toutes ces imbrications du code HTML forment alors une hiérarchie comme un arbre généalogique, cet arbre étant lui-même contenu dans la racine du document <body>.
Exemple de code HTML :
<div>
<h1> Ici le Titre 1</h1>
<p> Un paragraphe de texte avec <em> une partie en emphase</em>, et une autre <strong> en gras </strong> pour finir le paragraphe avec une image <img src="..." /> suivie de la fin du paragraphe.</p>
<h2> Un sous-titre de niveau 2 </h2>
<p> Un autre paragraphe blablabla...</p>
</div>Il découle de cette généalogie les notions suivantes :
Un élément qui en contient un autre est appelé "parent" de celui-ci, qui est alors son "enfant". Dans notre exemple, le bloc <div> est le parent des balises <h1> et <h2> et des paragrahes <p>.
Les éléments <strong>, <em> ou <img>, contenus dans le premier paragraphe sont donc les enfants de celui-ci. Le bloc <div> sera alors l’ancêtre des éléments en ligne, comme un grand-père. Un parent est un ancêtre de premier niveau.
De ce qui précède, il en découle que les éléments <h1>, <h2>, <p> sont appelés "frères", tout comme les éléments <em>, <stong> et <img> sont frères entre eux.
Comprendre le flux
Par défaut, les navigateurs affichent les boîtes issues du document HTML dans l’ordre du « flux normal », c’est à dire que le navigateur parcoure la page de code HTML du début à la fin et retranscrit son contenu au fur et à mesure des balises rencontrées. Comme s’il lisait un texte, il procède verticalement, commençant en « haut » de l’écran pour aller jusqu’en « bas », et horizontalement de la gauche vers la droite, sur la totalité de l’espace disponible et nécessaire en largeur comme en hauteur. Dans notre exemple précédent, le flux normal est que l’on affichera un contenur div, qui renferme un titre h1, au dessous duquel va s’afficher le premier paragraphe avec ses éléments en ligne em, strong et img. Sous ce paragraphe, on retrouve ensuite le sous-titre de niveau 2 en dessous duquel vient s’afficher le deuxième paragraphe.
En résumé, par défaut dans une page HTML les boîtes sont affichées dans le flux normal :
Les éléments de type bloc se succèdent verticalement, chaque nouveau bloc se plaçant sous le bloc frère précédent. Les blocs occupent toute la largeur disponible dans leur conteneur.
Les éléments en ligne se suivent sur la même ligne, et chaque nouvel élément vient se placer à la suite du précédent sur la même ligne, mais avec un retour à la ligne quand il n’y a plus de place sur la largeur du conteneur.
Nous verrons plus loin qu’avec la propriété display, nous pourrons modifier les propriétés d’affichage des éléments HTML : faire que des boîtes de type bloc s’affichent en-ligne et vice-versa.
Mais illustrons ce qu’est le flux par des exemples. Un bloc div qui contient un paragraphe et auxquels on a appliqué selon le code CSS suivant :
div {
width: 300px;
background: green;
}
p {
width: 100px;
background: yellow;
}Ce qui donne :
Un paragraphe de texte normal
On distingue les deux blocs : le bloc div et son enfant le paragraphe p. Si on continue en ajoutant des marges internes et externes aux deux blocs :
div {
width: 300px;
background: green;
padding-top: 3em;
}
p {
width: 100px;
background: yellow;
margin-left: 2em;
}Ces nouvelles instructions CSS suffisent ainsi à donner une nouvelle position au paragraphe dans son conteneur :
Un paragraphe de texte normal
Si maintenant on ajoute un deuxième paragraphe de texte dans le bloc div, les deux paragraphes sont alors des frères (et le bloc div en est le père), et sont affichés l’un au-dessous de l’autre :
<div>
<p id="first">Un paragraphe de texte normal</p>
<p id="second">Le deuxième paragraphe, <strong>frère du premier</strong> et aussi <em>enfant du bloc</em> conteneur div</p>
</div>avec pour code CSS :
div {
width: 300px;
background: green;
padding-top: 5px;
}
p#first {
width: 100px;
background: yellow;
margin-left: 2em;
padding: 2px;
}
p#second {
width: 165px;
background: orange;
margin-left: 1em;
padding: 0.5em;
}Cela donne :
Un paragraphe de texte normal
Le deuxième paragraphe, frère du premier et aussi enfant du bloc conteneur div
Le positionnement des éléments ci-dessus est conforme au flux normal. Libre à vous de jouer sur les marges internes et/ou externes, la hauteur et la largeur, la couleur de fond... Dans la plupart des cas, ce type de placement dans le flux sera suffisant, mais voyons maintenant qu’il est possible de dicter aux blocs un autre comportement en les sortant du flux. Cela ouvre d’autres possibilités, en particulier pour placer des blocs à des coordonnées bien précises. Allons-y donc gaiement.
16 février 2005
Mise en page : Le positionnement flottant avec les CSS
CSS : Une mise en page sur 2 colonnes avec la propriété float
Construire un menu avec les CSS
Le recouvrement de blocs
Positionner des blocs en absolu en CSS
Le positionnement relatif en CSS
Mise en page en CSS : les types de boîtes
CSS : Les bordures
Mise en page avec les CSS : Comprendre le modèle de boîte
Les pseudo-classes
