Académique Documents
Professionnel Documents
Culture Documents
Notion de
profondeur et non plus de juxtaposition.
a. Les dimensions......................................................................................................................................................................2
c. Le positionnement relatif........................................................................................................................................................4
e. Le positionnement flottant......................................................................................................................................................6
Une mise en page se fera donc à l'aide de balises blocs, la balise <div> étant la plus indiquée pour cet
usage. La balise <div> est une balise neutre servant de conteneur, de zone (elle signifie Diviseur).
Elle désigne une boite rectangulaire invisible que l'on peut configurer à souhait (position, couleurs,
tailles, etc.)
Rappelons tout d'abord qu'une boîte CSS (chaque élément CSS) est constituée :
Dans chaque cas, il est possible de spécifier des dimensions gauches, droites, hautes et basses
différentes les unes des autres.
Pour les éléments dits en-ligne, ces valeurs sont nulles par défaut.
Pour les éléments dits bloc, seul Div n'a pas de marges externes (margin) par défaut.
Pensez donc à tenir compte des marges et padding par défaut des "blocs".
a. Les dimensions
Dimension d'une boîte = Largeur du contenu + marges internes gauche et droite + épaisseurs des
bordures gauche et droite. (Ce qui implique que les marges externes -margin- ne sont pas incluses)
Largeur écran = Width + padding left + padding right + border left + border right.
Hauteur écran = Height + padding top + padding bottom + border top + border bottom.
• Un élément directement contenu dan un autre est considéré comme son enfant. Les <li> sont
enfants de <ul> ou <ol>.
• Les éléments partageant le même parent sont frères.
• Un parent est un ancêtre de premier niveau.
Exemple
<div>
<h1>titre niveau 1</h1>
<p>ici un texte</p>
<h2>titre de niveau 2</h2>
<p>second textes avec des <em>mots importants</em></p>
</div>
Il est bien d'écrire ces CSS de manière hiérarchique, ce qui a pour avantage de rendre le document
lisible même si on désactive les CSS.
Certaines propriétés permettent de "sortir" des éléments du flux courant pour les positionner de façon
personnalisée.
Les éléments blocs 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, chaque nouvel élément se plaçant directement à
la suite du précédent, avec retour à la ligne quand il n'y a plus de place dans le conteneur.
Cette méthode convient à la majorité des cas : il suffit simplement de définir les marges de chaque
éléments pour le placer dans son conteneur.
Par exemple, pour placer un bloc jaune de 100x100px à 15px à partir de la gauche et 200px à partie
du haut du conteneur :
.bloc {
width: 100px;
height: 100px;
background-color: yellow;
margin-left: 15px;
margin-top: 200px;
}
c. Le positionnement relatif
Par la déclaration position : relative; l'élément est dit "positionné". Il prend d'abord sa place
dans le flux courant, puis peut-être décalé à l'aide des propriétés left, right, bottom et top.
Positionnement absolu
Par rapport à son premier parent si ce dernier est lui-même positionné, sinon par rapport au premier
ancêtre positionné, en remontant jusqu'au body si nécessaire.
A noter : tout élément positionné en absolu est considéré de type bloc. Les éléments en ligne peuvent
ainsi recevoir des dimensions et des bordures.
La profondeur z-index
La superposition des blocs ouvre la 3ème dimension celle de la profondeur.
Par défaut, le dernier élément positionné déclaré dans le code HTML s'affichera par-dessus tous le s
autres éléments du même conteneur. Avec z-index on peut changer ces propriétés.
Quelques exemples :
Deux blocs l'un en dessous de l'autre avec un espace de séparation :
Partie HTML :
<div class="bloc1">bla bla bla</div>
<div class="bloc2">bli bli bli</div>
Et la CSS correspondante :
.bloc1 {
e. Le positionnement flottant
Déclaration float:left ou float:right.
L'élément est retiré du flux normal pour prendre place à gauche ou à droite du bloc qui le contient :
c'est devenu un "flottant". L'élément qui le suit s'écoulera alors dans l'espace laissé libre en épousant
sa forme.
A savoir : tout élément float est considéré comme bloc. Les éléments en ligne peuvent ainsi recevoir
des dimensions et des bordures.
Exemple d'utilisation du float : illustration dans texte, lettrine de paragraphe.
Pour résumer
1. L'élément est placé normalement dans le flux, sous l'éventuel bloc qui le précède et au
dessus de l'éventuel bloc qui le suit.
2. L'élément doté de la propriété float est ensuite "poussé" à gauche ou à droite de son
conteneur. Dans ce cas les éléments qui le suivent dans son conteneur prennent place autour
de lui.
Relatif
C'est du flux mais avec un décalage.
Utile pour :
• Superposer ou décaler deux éléments sans avoir recours à un positionnement hors flux.;
• Obtenir un bloc conteneur positionné pour y placer d'autres éléments.
Absolu
Fait sortir du flux ce qu peut aboutir à un affichage ne reflétant pas la structure HTML.
Le document ne sera plus compréhensible si CSS désactivé!
Correctement utilisé il permet la construction de pages fluides s'adaptant aux diverses résolutions et
aux changements de taille des polices. C'est donc une méthode intéressante pour la structure globale
du site telles que les conteneurs généraux, les grandes zones de la page et les éléments uniques (en
têtes, menus, pied de page, etc.)
Flottant
Utile pour positionner des éléments d'un côté ou de l'autre dans un contenu.
Cependant attention à quelques défauts d'affichage et imprécisions dans les navigateurs qui imposent
parfois des solutions de contournements.