positionne positionne positionner avec les CSS

Mise en page plus souple qu'avec les tableaux, car libérée des cellules adjacentes. Notion de
profondeur et non plus de juxtaposition.
I.
LES BALISES DE BLOC ET LES BALISES EN-LIGNE .....................................................................................................1
II.
COMPRENDRE LE MODELE DE BOITE.............................................................................................................................2
a.
Les dimensions......................................................................................................................................................................2
b.
Eléments ancêtres, parents, enfants et frères .......................................................................................................................2
III.
LE POSITIONNEMENT DES BLOCS...................................................................................................................................3
a.
La notion de flux de document ..............................................................................................................................................3
b.
Dans le flux courant ...............................................................................................................................................................3
c.
Le positionnement relatif........................................................................................................................................................4
d.
Les positionnements absolu et fixe .......................................................................................................................................4
e.
Le positionnement flottant......................................................................................................................................................6
f.
Quel positionnement choisir ? ...............................................................................................................................................6
I. Les balises de bloc et les balises en-ligne
Il existe deux grands groupes de balises HTML :
• les balises de type BLOC ("block") comme les balises <p>, <ul>, <li>, <div>, <form>, <input>,
<blockquote>, <h1>...<h6>,...
• les balises de type EN LIGNE ("inline") comme <a>, <strong>, <em>, <span>, <img>,...
De ces deux groupes découlent :
Des spécificités d'affichage
• les blocs se placent toujours l'un en dessous de l'autre (saut de ligne).
Par exemple: une suite de paragraphes ou une liste
• les inline se placent toujours l'un à côté de l'autre. Par exemple: la mise en gras d'une partie
de texte à l'aide de la balise <strong>
•
•
Des spécificités structurelles et d'imbrications :
une balise bloc peut contenir une (ou plusieurs) balise bloc et/ou inline, et peut avoir une
dimension (largeur, hauteur définies)
une balise inline ne peut contenir QUE une (ou plusieurs) balise inline, et n'a pas de
dimension à proprement parler (il n'occupe que la place minimum nécessaire à son contenu)
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.)
Exemple : si on met une dimension à <span> -> ne fonctionne pas
G.Charpentier - CSS
Page 1 sur 7
II. Comprendre le modèle de boîte
Rappelons tout d'abord qu'une boîte CSS (chaque élément CSS) est constituée :
•
•
•
•
d'un contenu (le texte d'un paragraphe par exemple) ;
d'un remplissage (padding) : l'espace entourant le paragraphe) ;
d'une bordure (border) : encadrement du paragraphe ;
d'une marge (margin) : espace entourant le tout.
Les propriétés CSS permettent de déterminer :
•
•
•
•
les dimensions de la zone de contenu, son
arrière-plan (image, couleur) et sa couleur
d'avant-plan ;
les dimensions, la couleur et le style des
bordures ;
les dimensions du remplissage ;
les dimensions de la marge.
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.
b. Eléments ancêtres, parents, enfants et frères
Tout document HTML est composé de conteneurs (boîtes en refermant d'autres), sur lesquels la
hiérarchie du document induit une généalogie Indispensable à comprendre pour bien utiliser les
positionnements. Le tout étant dans la boîte de l'élément racine <body>.
•
•
•
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
<p>ici un
<h2>titre
<p>second
</div>
niveau 1</h1>
texte</p>
de niveau 2</h2>
textes avec des <em>mots importants</em></p>
G.Charpentier - CSS
Page 2 sur 7
•
•
•
•
<div> est parent des blocs <h1>, <h2> et <p>;
<div> est l'ancêtre de <em>;
le second bloc <p> est parent de <em>;
les titres et les deux <p> sont frères.
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.
III. Le positionnement des blocs
a. La notion de flux de document
Les différents éléments d'une page prennent par défaut place dans le "flux courant", aussi appelé "flux
normal". Il correspond à l'ordre dans lequel les boîtes apparaissent dans le texte, qui est aussi celui de
leurs balises dans le code HTML.
Certaines propriétés permettent de "sortir" des éléments du flux courant pour les positionner de façon
personnalisée.
b.
c.
d.
e.
Dans le flux courant
Le positionnement relatif
Les positionnements absolu et fixe
Le positionnement flottant
b. Dans le flux courant
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.
Positionner à l'aide des marges
Sans définition explicite du positionnement, un bloc se place en haut à gauche de son conteneur
(ce dernier pouvant être un autre bloc, une cellule de tableau, le body,...) et prend automatiquement
toute la largeur de ce conteneur.
A partir de là, il est simple de positionner un bloc au sein de son conteneur grâce à l'utilisation des
propriétés de marges.
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;
}
G.Charpentier - CSS
Page 3 sur 7
Note : il n'est nullement obligatoire d'utiliser le pixel pour placer son bloc ; n'importe quelle unité est
valable (%, em, auto,...)
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.
L'intérêt ? Permet ainsi les superpositions sur des éléments frères.
d. Les positionnements absolu et fixe
Déclarations position:absolute ou position:fixed. L'élément sort alors du flux pour être
positionné, ils n'ont plus de liens avec des éléments de la même fratrie. Décalé à l'aide des propriétés
left, right, bottom et top. (attn: on ne peut préciser en même tps left et right ou top et
bottom)
Différence avec le relatif : la position de base est calculée par rapport à un bloc conteneur et non pas
en décalage de la position théorique dans le flux normal. La boîte conteneur de référence est celle du
premier ancêtre positionné (en relatif, fixe ou absolu).
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.
Positionnement fixe (non pris en charge par IE)
Cas particulier du positionnement absolu, où l'élément reste fixe dans la page, par rapport à la zone
de visualisation: il ne se déplace pas lors du défilement de cette dernière.
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 {
G.Charpentier - CSS
Page 4 sur 7
background-color: blue;
height: 50px;
}
.bloc2 {
background-color: green;
height: 50px;
margin-top: 20px;
}
Trois blocs côte à côte avec un espace de séparation :
Partie HTML :
<div class="bloc1">bla bla bla</div>
<div class="bloc2">bli bli bli</div>
<div class="bloc3">blu blu blu</div>
Et la CSS correspondante :
.bloc1 {
background-color: blue;
height: 50px;
width: 100px;
float: left;
}
.bloc2 {
background-color: green;
height: 50px;
width: 100px;
float: left;
margin-left: 20px;
}
.bloc3 {
background-color: red;
height: 50px;
width: 100px;
float: left;
margin-left: 20px;
}
Un bloc contenu dans un autre :
Partie HTML :
<div class="conteneur">
<div class="bloc">bli bli bli</div>
</div>
Et la CSS correspondante :
.conteneur {
background-color: blue;
height: 100px;
width: 100px;
}
.bloc {
background-color: yellow;
height: 50px;
width: 50px;
margin-left: 20px;
margin-top: 40px;
}
G.Charpentier - CSS
Page 5 sur 7
Une image alignée à droite d'un texte :
Partie HTML :
<div class="conteneur">
<img class="image" src="..." alt="" />
<p>bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla ...</p>
</div>
Et la CSS correspondante :
.conteneur {
width: 40%;
background-color: yellow;
}
.image {
float: right;
}
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.
f. Quel positionnement choisir ?
Tout dépend de l'utilisation du document et de l'objectif poursuivi.
G.Charpentier - CSS
Page 6 sur 7
Flux
Placement classique
A privilégier pour les placements internes de la page : textes, titres, images d'illustration…
Positionnement souple, fluide et s'affiche convenablement sur tous supports.
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.
G.Charpentier - CSS
Page 7 sur 7