Introduction▲
Dans tous les exemples donnés ici, nous utiliserons deux fichiers : 'index.html', qui va contenir le code HTML, et 'style.css', qui va contenir toutes les définitions de style.
Le fichier 'style.css' est inclu comme suit dans notre fichier HTML (entre les balises <head> et </head> :
<link rel="stylesheet" type="text/css" href="styles.css">I. Bloc, en-ligne : les types d'éléments.▲
En CSS, il existe deux grandes familles d'éléments : les éléments de type "bloc", et les éléments de style "en-ligne".
Grosso modo, les éléments de type "bloc" (DIV, UL, FORM, BLOCKQUOTE, PRE, ...), servent à la mise en page générale de la page en créant de grands rectangles 'conteneurs'. Ils peuvent contenir soit d'autres éléments de type "bloc", soit des éléments de type "en-ligne". Les éléments de type "en-ligne" (A, B, FONT, IMG, INPUT, U, SPAN, ...) sont juste des conteneurs plus petits que bloc, avec un comportement spécifique. IMG et INPUT sont des éléments vides d'après la DTD.
D'une manière générale, évitez d'utiliser les balises HTML pour la mise en forme du contenu, dans l'idée de séparer au maximum le fond le la forme (le tag U en HTML peut être avantageusement remplacé par text-decoration:underline; en CSS).
De plus, ces balises ont des marges externes (margin) et internes (padding) définies par défaut à 0 et non re-définissables.
Par défaut, les éléments de type "bloc" vont prendre toute la largeur de la page.
II. Le flux, kezako ?▲
Le flux, c'est l'ordre d'affichage des éléments.
Ainsi, le navigateur parcours votre page HTML, récupère les différents éléments, et les affiche dans un certain ordre.
Les éléments sont affichés selon leur ordre d'apparition dans le code source.
Les éléments de type "bloc" vont s'afficher les uns en dessous des autres, alors que des éléments de type "en-ligne" vont s'afficher les uns à la suite des autres.
Exemple :
#element1 {
background-color:#00CCFF; /* bleu ciel */
}
#element2 {
background-color:#FF6666; /* rouge */
}
#element3 {
background-color:#6699FF; /* mauve */
}<div id="element1">riri</div>
<div id="element2">fifi</div>
<div id="element3">loulou</div>
Télécharger les codes-source de l'exemple
<span id="element1">pim</span>
<span id="element2">pam</span>
<span id="element3">poum</span>
Télécharger les codes-source de l'exemple
Voilà pour le flux tel qu'il est normalement interprété. Mais il est possible à l'aide des propriétés CSS de le modifier.
Voyons donc comment...
III. Positionnement d'un élement▲
III-A. Propriété CSS "position"▲
La propriété CSS position permet de modifier le comportement d'affichage des blocs :)
Evacuons de suite position:static, qui se contente de dire que l'élément doit se comporter normalement. Il suivra donc le flux sans se poser plus de questions.
position:inherit (CSS2) déclare que l'élément en question hérite de la propriété position de son parent. Si la position du parent est de type absolue, l'élément concerné le sera aussi...
position:fixed pourrait être une propriété interessante. L'idée est de placer un élément sur la page, et qu'il y reste quel que soit le défilement. Je vous laisse imaginer l'utilité pour un menu par exemple...
Seul problème, certains navigateurs non conformes aux standards CSS2 ne prennent pas en compte cette propriété, il vous va donc falloir tricher (je vous renvoie donc à la FAQ CSS).
position:relative ne retire pas l'élément du flux, mais le déplace simplement par rapport à sa position dans le flux.
Petit exemple pour mieux comprendre :
.normal {
background-color:#0099FF; /* bleu ciel */
}
.posrelative {
position:relative;
background-color:#FF9933; /* orange */
bottom:5px;
left:10px;
}<div class="normal">Bonjour les <span class="posrelative">petits</span> enfants.</div>
<div class="normal">comment</div>
<div class="posrelative">ça</div>
<div class="normal">va ?</div>
Télécharger les codes-source de l'exemple
Vous vous rendez compte ici que le troisième div (le orange) est décalé de 10 pixels vers la droite et de 5 vers le haut par rapport à la position qu'il devrait occuper normalement. Idem pour le span orange, décalé de la même chose par rapport à sa position théorique.
position:absolute retire complètement l'élément concerné du flux, et le place aux coordonées définies par les propriétés bottom, left, right ou top.
Dans l'exemple, nous allons dimensionner notre DIV pour mieux se rendre compte de l'effet produit :
#element1 {
position:absolute;
background-color:#00CCFF; /* bleu ciel */
width:50px;
height:50px;
text-align:center;
top:55px;
right:42px;
}<div id="element1">ploum ploum</div>
Télécharger les codes-source de l'exemple
Attention cependant... La position n'est absolue que par rapport au conteneur... Dans l'exemple précédent, le conteneur était le BODY, donc la fenêtre du navigateur.
#element1 {
position:absolute;
background-color:#00CCFF; /* bleu ciel */
width:50px;
height:50px;
text-align:center;
top:55px;
left:42px;
}
#element2 {
position:absolute;
background-color:#CC66CC; /* violet */
width:100px;
height:100px;
text-align:center;
top:50px;
left:70px;
}<div id="element2">
<div id="element1">ploum ploum</div>
</div>
Télécharger les codes-source de l'exemple
Pour gérer la superposition des différents blocs, reportez-vous à la .
III-B. Propriété CSS "float"▲
Voyons maintenant la propriété float, celle qui vous servira le plus lors de vos mises en page.
Cette propriété positionne l'élément le plus à gauche (float:left;) ou le plus à droite (float:right;) de son conteneur.
Le reste des éléments du conteneur s'affichera en suivant les contours des éléments flottants.
#conteneur {
background-color:#CC9999; /* marron bizarre */
text-align:justify;
}
#element1 {
float:left;
background-color:#00CCFF; /* bleu ciel */
width:70px;
height:70px;
text-align:center;
}
#element2 {
float:right;
background-color:#66CC99; /* vert */
width:70px;
height:70px;
text-align:center;
}<div id="conteneur">
<div id="element1">titi</div>
<div id="element2">toto</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Integer et erat. Mauris iaculis vulputate nunc.
Praesent sodales pellentesque est.
Fusce nisl lectus, cursus ut, sollicitudin eget, congue eget, lorem.
Phasellus lobortis, purus vitae rutrum elementum, risus libero volutpat felis, nec dictum lorem augue ac risus.
Integer dapibus ullamcorper nunc. Maecenas nibh magna, vestibulum in, dapibus vitae, tristique et, ipsum.
</div>
IV. Propriété des éléments : display▲
La propriété CSS display va nous permettre de modifier le type de nos éléments.
Nous n'allons pas détailler ici toutes les valeurs possibles, mais nous intéresser à deux d'entre elles : display:block et display:inline.
Dans cet exemple, nous allons créer deux éléments de type "bloc", en leur affectant la propriété display:inline, et deux éléments de type "en-ligne", en leur affectant la propriété display:block.
#bloc1 {
background-color:#00CCFF; /* bleu ciel */
display:inline;
}
#bloc2 {
background-color:#FF6666; /* rouge */
display:inline;
}
#enligne1 {
background-color:#00CCFF; /* bleu ciel */
display:block;
}
#enligne2 {
background-color:#FF6666; /* rouge */
display:block;
}<div id="bloc1">Mickey</div>
<div id="bloc2">Minnie</div>
<span id="enligne1">Donald</span>
<span id="enligne2">Daisy</span>
Télécharger les codes-source de l'exemple
Etrange n'est-ce pas... Les éléments de type "bloc" se comportent maintenant comme des éléments de type "en-ligne", et vice-versa.
Imaginez les possibilités offertes par une telle propriété... Un menu sous forme de liste généré dynamiquement pourrait devenir, sur simple changement du style appliqué, un menu horizontal sans pour autant modifier la fonction de base...
V. Et l'héritage, qu'est-ce que c'est ?▲
Bon, puisque vous avez l'air chaud comme la braise, voici venue l'heure de parler d'héritage, de polymorphisme, et d'encapsulation...
Bon, partez pas en courant, revenez, on va se contenter de l'héritage, le reste n'existe pas en HTML / CSS, et c'est une notion toute simple en plus :)
L'idée, c'est qu'un élément X contenu dans un élément Y va hériter des propriétés de cet élément Y.
Petit exemple pour mieux comprendre :
.niveau1 {
color:#0033FF; /* bleu */
text-align:right;
font-weight:bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.niveau2 {
text-decoration:underline;
color:#CC3366; /* violet */
}<div class="niveau1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div class="niveau2">
In tempor quam nec enim sollicitudin vehicula.
</div>
Mauris lacus. Aenean odio ligula, mollis imperdiet, elementum non, gravida et, leo.
</div>
Télécharger les codes-source de l'exemple
Ici, le bloc "niveau2" hérite des propriétés de son père "niveau1". Ainsi, nous avons récupéré l'alignement du texte, le gras, la famille de police et même la couleur.
Nous avons juste choisi de redéfinir la couleur, et de souligner le contenu de l'élément 2, afin de rendre tout ca plus visible.
Bon, pas si compliqué que ça finalement ? Le seul moment où ça se corse, c'est que toutes les propriétés ne peuvent pas être héritées. Ainsi, deux éléments de type "bloc" Y et Z, contenus dans un élément X défini en float se positionneront tout de même l'un au dessus de l'autre
#conteneur {
background-color:#3399FF; /* bleu ciel */
width:50px;
height:100px;
}
#contenu1 {
background-color:#00FFCC; /* vert */
width:30px;
height:30px;
margin-left:auto;
margin-right:auto;
}
#contenu2 {
background-color:#FF99CC; /* rose */
width:30px;
height:30px;
margin-left:auto;
margin-right:auto;
}<div id="conteneur">
<div id="contenu1"></div>
<div id="contenu2"></div>
</div>
Télécharger les codes-source de l'exemple
A noter également, tous les éléments n'ont pas les mêmes propriétés. Ainsi, un élément en-ligne n'ayant pas de marges, il n'héritera donc jamais des marges de son conteneur de type bloc.
VI. Petit complément rapide : le z-index.▲
Dès qu'un des éléments de votre page sort du flux, il peut arriver un effet de superposition.
C'est bien gentil tout ca, mais comment gérer "qui écrase l'autre" ?
La propriété z-index est là pour ça. En effet, elle va permettre d'attribuer à chaque élément un 'niveau', celui ayant le plus grand se retrouvant au-dessus.
Petit exemple pour mieux comprendre :
Définissons deux blocs, tous deux positionnés en absolu, et se chevauchant.
Pour chacun d'eux, définissons une propriété z-index différente :
#element1 {
background-color:#0066FF; /* bleu */
position:absolute;
top:25px;
left:25px;
width:50px;
height:50px;
z-index:1;
}
#element2 {
background-color:#FF66CC; /* rose */
position:absolute;
top:50px;
left:50px;
width:50px;
height:50px;
z-index:2;
}<div id="element1"></div>
<div id="element2"></div>Dans ce cas-ci, l'élément2 (le rose) se trouve au dessus de l'élément1 (le bleu).
Intervertissons maintenant les propriétés z-index de nos éléments, sans rien toucher d'autre.
Ainsi, le z-index de 'element1' passe à 2, et celui de 'element2' passe à 1.
Et hop, il n'y a qu'à demander, comme par magie, l'élément1 (en bleu) est passé au dessus de l'élément2 (en rose), sans rien devoir modifier dans le HTML.
Télécharger les codes-source de l'exemple
Petite astuce en passant : le z-index peut parfaitement être négatif, ça ne posera de problèmes à personne ;)
Nous n'avons abordé ici qu'une toute petite partie du z-index, qui mériterai à lui seul un article complet. Pour plus de détails, n'hésitez pas à aller lire Understanding CSS z-index.
VII. Remerciements et liens annexes▲
Vous avez à présent en main quelques unes des clés pour vous lancer dans la mise en page de vos sites en CSS pur. Adieu TABLE, TD, TR et COLSPAN !!! Le monde est à vous :)
Pour plus d'informations, vous pouvez vous référer aux spécifications CSS2 du W3C, ou à la traduction en français.
Et enfin, last but not least, un énorme merci à l'équipe web de developpez.com, et plus particulièrement à franculo_caoulene pour ses relectures attentives, ses suggestions ainsi que ses critiques.