« Le langage CSS/Le positionnement des éléments » : différence entre les versions
Contenu supprimé Contenu ajouté
Paragraphe traduis de l'anglais |
|||
Ligne 1 :
{{Sommaire_CSS}}
== Initiation au positionnement en CSS
Pour éviter l'usage inconsidéré des tableaux de mise en page, l'utilisation correcte de chaque élément (balises div, p, h1, ul, li, etc.) ainsi que leur positionnement en CSS est dorénavant indispensable.
Ligne 17 :
* Il existe plusieurs schémas de positionnement en CSS : un schéma de positionnement dans le Flux (positionnement par défaut), et trois schémas de positionnement qui sortent l'élément du Flux (positionnement absolu, positionnement fixé et positionnement flottant). Un dernier "positionnement" (relatif) est en fait une variante du positionnement courant qui provoque un décalage. La notion de Flux est fondamentale.
* Chaque schéma de positionnement a ses règles et spécificités. Mieux vaut bien comprendre ces règles pour éviter des interactions ou des comportements non sollicités... et déclarer que les CSS ne fonctionnent pas ! :)
== Position relative et absolue ==▼
On distingue quatre sortes de positionnement, correspondant aux valeurs de la propriété <code>position</code> :▼
# <code>static</code> : statique, les éléments se placent dans l'ordre où ils apparaissent dans le code source. C'est le positionnement par défaut quand il n'est pas précisé.▼
# <code>relative</code> : relative, les éléments sont décalés par rapport au positionnement statique, puis du nombre de pixels définis avec <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code>. Attention : si <code>left</code> est défini, <code>right</code> est ignoré, et si <code>top</code> est défini, <code>bottom</code> est ignoré.▼
# <code>absolute</code> : absolue, les éléments sont décalés par rapport au bloc qui les contient.▼
# <code>fixed</code> : fixe, les éléments dont décalés par rapport à la fenêtre du navigateur. Ils ne bougent pas de l'écran quand on scrolle.▼
Exemple :▼
<source lang=html5>▼
<div style="border-style: solid;">▼
<p style="position: static; bottom: 5px; left: 50px;">Statique</p><br/>▼
<p style="position: relative; bottom: 5px; left: 50px;">Relative</p><br/>▼
<p style="position: absolute; bottom: 5px; left: 50px;">Absolue</p><br/>▼
<p style="position: fixed; bottom: 5px; left: 50px;">Fixe</p><br/>▼
</div>▼
</source>▼
donne :▼
<div style="border-style: solid;">▼
<p style="position: static; bottom: 5px; left: 50px;">Statique</p><br/>▼
<p style="position: relative; bottom: 5px; left: 50px;">Relative</p><br/>▼
<p style="position: absolute; bottom: 5px; left: 50px;">Absolue</p><br/>▼
<p style="position: fixed; bottom: 5px; left: 50px;">Fixe</p><br/>▼
</div>▼
(on voit la position statique non affectée par le décalage, puis la relative décalée en-dessous, le fixe est en bas à gauche de l'écran et l'absolue en bas de page).▼
== Les balises de bloc et les balises en-ligne ==
Ligne 64 ⟶ 39 :
* 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 apparaitront dans le document, c'est le
Par défaut, les balises "Bloc" et les balises "En-ligne" ont un comportement différent dans le flux normal (voir tutoriel sur la structure des balises).
NOTE : les blocs positionnés en "absolu" ou "fixé" sortent du flux naturel et échappent quelque peu à cette règle.
Ligne 84 ⟶ 60 :
* Utilisez les balises <tt><nowiki><h1></nowiki></tt>...<nowiki><h6></nowiki></tt> pour vos titres et non des balises <tt><nowiki><p></nowiki></tt> améliorées
* Utilisez les listes <tt><nowiki><ul></nowiki><tt> <tt><nowiki><li></nowiki></tt> pour vos menus, car leur utilisation est tout à fait appropriée pour ça (voir les articles de la catégorie "menus en CSS")
▲== Position relative et absolue ==
▲On distingue quatre sortes de positionnement, correspondant aux valeurs de la propriété <code>position</code> :
▲# <code>static</code> : statique, les éléments se placent dans l'ordre où ils apparaissent dans le code source. C'est le positionnement par défaut quand il n'est pas précisé.
▲# <code>relative</code> : relative, les éléments sont décalés par rapport au positionnement statique, puis du nombre de pixels définis avec <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code>. Attention : si <code>left</code> est défini, <code>right</code> est ignoré, et si <code>top</code> est défini, <code>bottom</code> est ignoré.
▲# <code>absolute</code> : absolue, les éléments sont décalés par rapport au bloc qui les contient.
▲# <code>fixed</code> : fixe, les éléments dont décalés par rapport à la fenêtre du navigateur. Ils ne bougent pas de l'écran quand on scrolle.
▲Exemple :
▲<source lang=html5>
▲<div style="border-style: solid;">
▲ <p style="position: static; bottom: 5px; left: 50px;">Statique</p><br/>
▲ <p style="position: relative; bottom: 5px; left: 50px;">Relative</p><br/>
▲ <p style="position: absolute; bottom: 5px; left: 50px;">Absolue</p><br/>
▲ <p style="position: fixed; bottom: 5px; left: 50px;">Fixe</p><br/>
▲</div>
▲</source>
▲donne :
▲<div style="border-style: solid;">
▲ <p style="position: static; bottom: 5px; left: 50px;">Statique</p><br/>
▲ <p style="position: relative; bottom: 5px; left: 50px;">Relative</p><br/>
▲ <p style="position: absolute; bottom: 5px; left: 50px;">Absolue</p><br/>
▲ <p style="position: fixed; bottom: 5px; left: 50px;">Fixe</p><br/>
▲</div>
▲(on voit la position statique non affectée par le décalage, puis la relative décalée en-dessous, le fixe est en bas à gauche de l'écran et l'absolue en bas de page).
== Éléments flottant ==
[[Image:cssposfloat.png|thumb|Exemple d'élément flottant (en rouge).]]
La propriété "float" permet aux éléments de flotter dans le flux normal. Les boites bougent alors à gauche ou à droite jusqu'à la limite de leur conteneur. Les éléments situés après un flottant sont alors remontés pour combler le trou laissé autour de ce dernier.
La propriété "float" ne peut donc prendre que les valeurs "left" ou 'right". Pour que cela fonctionne, il faut aussi définir la propriété <code>width</code> du flottant, sinon il occupe toute la largeur de son conteneur.
Exemple :
<source lang="CSS">
border: 1px solid #F00;
float: left;
width: 425px;
</source>
| |||