web
web > Xhtml / Css - Positionnement des éléments
Les tableaux utilisés pour la mise en forme, ont toujours été déconseillés (cfr : découpage ImageReady via PhotoShop ).
Par contre, l’utilisation correcte de chaque balise (balises div, p, h1, ul, li, etc.) ainsi que leur positionnement en CSS va petit à petit devenir indispensable. Les éditeurs HTML visuels n’utilisent qu’une infime partie des possibilités des balises (faussement nommées "calques" en général), ce qui les rend souvent peu compatibles et peu pratiques.
Voici comment positionner les éléments en CSS de façon optimale, bien que résumé schématiquement.
Ancêtre, Parents, Enfants, Frères
Comprendre l’imbrication des éléments (boîtes) les uns dans les autres est essentiel. Chaque document HTML est toujours composé de conteneurs. Ceux-ci peuvent être
ancêtre, parents, enfants ou frères. Ces différents éléments composent une hierarchie d’imbrications.
Un élément Ancêtre est un élément qui contient un élément ou une hierarchie d’éléments
Un bloc Parent est un élément contenant directement un autre bloc. Par exemple, un DIV contenant un paragraphe P. Attention : si ce paragraphe contient lui-même des éléments (ex : strong), DIV ne sera pas Parent de l’élément strong mais uniquement son Ancêtre. Le Parent est donc l’Ancêtre immédiat.
Un bloc contenu directement dans un autre bloc est dit Enfant de cet élément.
Les éléments ayant le même élément Parent sont appelés Frères.
Le Flux
La mise en place des différents éléments de la page se fait par défaut selon le Flux courant. Les éléments (balises) sont placés les uns après les autres dans le code HTML de la page. L’ordre dans lequel apparaissent les balises dans le code HTML sera l’ordre dans lequel ils seront affichés et apparaîtront dans le document, c’est le Flux. Cela signifie que, par défaut, chaque élément est dépendant des éléments frères qui l’entourent. Par défaut, les balises Bloc et les balises En-ligne ont un comportement différent dans le flux normal.
NOTE : les blocs positionnés en "absolu" ou "fixé" sortent du flux naturel et échappent quelque peu à cette règle. Ils ne sont alors plus dépendants des éléments frères.
Pour se placer, un tel bloc se réfère non pas à son Parent direct, mais au premier Ancêtre positionné qu’il rencontre.
Le positionnement des éléments
Le positionnement dans le Flux normal
C’est le placement par défaut, à l’aide des marges internes (padding) du conteneur, soit des marges externes (margin) des éléments. Le flux régit l’agencement des différents éléments Frères. 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. Ses frères se placeront en-dessous.
A partir de là, il est simple de positionner un bloc au sein de son parent 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 :
CODE XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Position CSS</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div class="conteneur">
<div class="bloc">
</div>
</div>
</body>
</html>CODE CSS
.conteneur {
padding-top: 200px;
padding-left: 15px;
}
.bloc {
width: 100px;
height: 100px;
background-color: yellow;
}Note : vous noterez l’emploi d’un padding-top et non d’un margin-top en raison du comportement appelé "fusion de marges" (selon cette règle, la marge haute de "bloc" s’applique en fait à son parent "conteneur").
Note : il n’est nullement obligatoire d’utiliser le pixel pour placer son bloc ; n’importe quelle unité est valable (%, em, auto,...)
Positionner en flottant
La propriété FLOAT permet de positionner un bloc à gauche ou à droite dans un parent (et non-plus l’un en-dessous de l’autre). Le reste du conteneur parent occupera alors l’espace laissé libre.
Comme le float sort du flux courant, il n’est pas compté dans le calcul de la hauteur du conteneur, si celle-ci n’est pas spécifiée. Il peut donc "dépasser" en hauteur. L’utilisation courante consiste à aligner une image à gauche ou à droite d’un texte de contenu :
CODE HTML :
<div class="conteneur">
<img class="gauche" alt="..." src="..." />
Texte mérou :)
....
</div>Et la CSS correspondante :
.gauche {
float: left;
}NOTE : lorsqu’il y’a des éléments dont certains sont flottants, il est souvent préférable de placer ces éléments dans un parent commun. Il est possible de cumuler les propriétés Float pour obtenir plusieurs blocs côte à côte.
Récapitulatif. Attention à bien comprendre le fonctionnement du positionnement flottant :
L’élément est d’abord placé normalement dans le flux. Donc si un autre élement bloc est placé avant lui, l’élément flottant se positionnera en dessous ; et si un élément bloc le suit, ce dernier sera placé dessous. Bref, le comportement classique du positionnement en flux
Ensuite l’élément qui a reçu la propriété float est "poussé" à gauche ou à droite de son conteneur.
Les éléments qui le suivent au sein du conteneur se placent alors autour de lui.
Utiliser les positions absolues, fixes et relatives
Cette propriété est largement utilisée par défaut sur les logiciels WYSIWYG comme Dreamweaver. C’est en partie à cause de cette utilisation abusive que les "calques" ont acquis une mauvaise réputation.
En effet, le positionnement absolu, fixe ou relatif a des désavantages du fait de sa rigidité : il ne permet pas (ou difficilement) l’adaptation du site aux différentes résolutions la plupart du temps.
Attention cependant : cette rigidité n’est que fictive et due aux valeurs fixes données en général par les logiciels comme Dreamweaver. On peut très bien positionner en absolu en pourcentage ou en em. On peut également très bien centrer un site avec des positions absolues. Il faut simplement comprendre comment il fonctionne et ne pas se contenter des positionnements "à la dreamweaver". Sachez également que c’est le seul moyen de superposer deux blocs (avec la propriété z-index). Lorsqu’il est en position absolue ou fixe, le bloc est dit "positionné". Il est retiré du "flux" du code html : son positionnement sera le même quelle que soit l’emplacement de la balise dans le code du conteneur parent, quel que soit sa fraternité.
Le bloc est placé par rapport à son parent s’il est lui-même positionné, ou alors par rapport au dernier Ancètre positionné (si aucun Ancètre n’est positionné, il se réfère à la page entière, balise html).
En absolue, le bloc est généralement placé à l’aide des propriétés "top" et "left" par rapport au coin supérieur gauche du parent.
Si les valeurs top et left sont inexistantes, le bloc apparait là où il est déclaré ce qui peut servir pour placer correctement dans la page des éléments superposés. A noter que le positionnement relatif est un peu le trublion du groupe : c’est une forme de positionnement qui laisse l’élément dans le flux normal (donc dépendant et influençant les éléments frères), tout en le décalant à l’aide des propriétés "top" et "left"... mais en ayant l’avantage des éléments dits "positionnés" à savoir qu’il peut servir de parent pour des éléments hors-flux (position absolue par exemple).
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 {
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;
padding-top: 40px;
}Note : vous noterez l’emploi d’un padding-top et non d’un margin-top en raison du comportement appelé "fusion de marges" (selon cette règle, la marge haute de "bloc" s’applique en fait à son parent "conteneur").
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;
}Sachez utiliser chaque balise à bon escient !
Il est souvent inutile de faire des imbrications multiples de <div>, ceux-ci ne servant qu’à délimiter des zones de page
Evitez d’utiliser les balises <table> pour la mise en page de votre site : ils ne sont pas fait pour ça mais pour des données tabulaires et statistiques
Utilisez les balises <h1>...<h6> pour vos titres et non des balises <p> améliorées
Utilisez les listes <ul> <li> pour vos menus, car leur utilisation est tout à fait
appropriée pour ça (voir "menus en CSS")
Source : Raphaël - alsacreations
PDF
210774
