Accueil du site > Internet. > HTML > CSS

Positionner des blocs.

mardi 31 août 2010 par musteray

Types de position possibles

Élément dans le flux (position normale)

Soit aucune propriété de positionnement, soit position: static;
Ce type de positionnement est à utiliser aussi souvent que possible.
Les blocs sont affichés les uns sous les autres, les éléments en ligne sont placés côte à côte.

Positionner dans le flux courant.

Position relative

Propriété position: relative;
Pour décaler ou superposer un élément par rapport à ses « frères ».

Le positionnement relatif.

Position absolue

Propriété position: absolute;
Pour découper la page en zones, sans utiliser de tableaux.
Pour disposer à un endroit précis un menu, un encadré, une image...

Le positionnement absolu.

Position fixe

Propriété position: fixed;
Pour conserver en permanence un élément à l’écran (il ne bouge pas lors du défilement).
Pour éviter l’utilisation de cadres (balise <frame>).

Élément flottant

Propriété float: left; ou float: right;
Pour placer des éléments côte à côte, en fonction de la place disponible dans la fenêtre d’affichage ou le bloc conteneur.
Pour habiller une image par du texte, pour une galerie d’images ou une suite de menus...

Le positionnement flottant.

Type de positionnement d’un bloc

Propriété	`position`
Exemples	`p.note {position: relative; left: -5px;}` `#menu {position: absolute; top: 0; right: 10%;}`
Valeurs possibles	`static` : positionnement dans le flux normal (valeur par défaut). `relative` : décalage par rapport à la position dans le flux. `absolute` : positionnement par rapport au bloc conteneur. `fixed` : positionnement par rapport à l’écran.
Héritage	Non.

Décalages indiquant la position d’un bloc

Propriété	`top`, `bottom`, `left`, `right`
Exemples	`p.note { position: relative; top: 5px; left: 10px;}` `div.menu { position: absolute; top: 30%; right: 20%;}` `#remarque {position: relative; top: 2em;}`
Valeurs possibles	`none` : pas de décalage (valeur par défaut), valeur relative (conseillée) en `em`, `ex`, `%`, `px`, valeur fixe en `pt`, `pc`, `cm`, `mm`, `in`.
Héritage	Non.

Niveau d’empilement des blocs

Lorsque plusieurs blocs sont superposés, ils s’empilent suivant l’ordre de leur arrivée dans le code XHTML.

Propriété	`z-index`
Exemples	`ul.menu { position: relative; z-index: 10; }` `#logo {position: absolute; top: 0; z-index: -5;}`
Valeurs possibles	`auto` : même niveau d’empilement que la boîte parent (valeur par défaut) ou nombre entier positif, nul ou négatif.
Héritage	Non.

Transformation en bloc flottant

Propriété	`float`
Exemples	`img.vignettes { float: left; }` `div.infos { float: right; }`
Valeurs possibles	`none` : pas de flottement (valeur par défaut), `left` : élément flottant calé à gauche, `right` : élément flottant calé à droite.
Héritage	Non.

Pas d’éléments flottants sur le côté

Pour obliger le navigateur à afficher un élément à la ligne, sous le plus bas des blocs flottants, il faut le lui préciser en attribuant à cet élément la propriété clear.

Propriété	`clear`
Exemples	`h1 { clear: both; }` `.remarque { clear: left; }`
Valeurs possibles	`none` : boîtes flottantes autorisées à gauche et à droite (valeur possibles par défaut), `left` : pas d’élément flottant sur la gauche, `right` : pas d’élément flottant sur la droite. `both` : aucun élément flottant, ni à gauche, ni à droite.
Héritage	Non.

Affichage ou non d’un élément

Propriété	`visibility`
Exemple	`.retrait { visibility: hidden; }`
Valeurs possibles	`visible` : l’élément est visible (valeur par défaut), `hidden` : l’élément est masqué, mais il occupe toujours le même espace dans la page, `collapse = hidden`, sauf dans les tableaux, où l’espace est libéré lorsqu’il s’agit d’une ligne entière ou d’une colonne entière.
Héritage	Non.

Affichage des débordements

Propriété	`overflow`
Exemples	`p { overflow: scroll; }` `#cadre1 { overflow: hidden; }`
Valeurs possibles	`visible` : le débordement est visible (valeur par défaut), `hidden` : le débordement est masqué, `scroll` : affichage dans tous les cas d’une barre de défilement, qui permettra l’accès à un débordement éventuel, `auto` : une barre de défilement apparaît, mais seulement en cas de débordement.
Héritage	Non.

Zone visible d’une boîte

Propriété	`clip`
Exemples	`p { clip: rect(10px 20px 5px 15px); }` `p#cadre2 { clip: rect(0 2em 2em 5em); }`
Valeurs possibles	`auto` : la zone visible est la boîte entière (valeur par défaut) ou `rect(top, right, bottom, left)` : la zone visible est un rectangle défini par les quatre valeurs entre parenthèses. Ces valeurs indiquent des décalages par rapport aux côtés respectifs de la boîte (valeurs possibles pour chacun d’eux : `auto` qui équivaut à 0, valeur positive, valeur négative).
Héritage	Non.

Délimitation des blocs

Pour voir les blocs à l’écran : il suffit de les délimiter par une bordure, en leur appliquant temporairement la propriété suivante :

Changement de type d’élément

Pour appliquer à un élément en ligne (par exemple, un lien) une propriété liée aux blocs, il faut d’abord le transformer en bloc. C’est ce que permet la propriété display.

Propriété	`display`
Exemples	`p.secret { display: none; }` `.cellule { display: table-cell; }` `span.bloc { display: block; }`
Valeurs possibles	`inline` : élément en ligne (valeur par défaut) `block` : bloc `list-item` : élément de liste `inline-block` : élément en ligne remplacé `run-in` : bloc ou élément en ligne, suivant le contexte `table` : tableau, `inline-table` : tableau en ligne `table-cell` : cellule de tableau, `table-row` : ligne de tableau, `table-column` : colonne de tableau `table-caption` : titre de tableau `table-row-group` : groupe de lignes `table-column-group` : groupe de colonnes de tableau `table-header-group` : groupe d’en-têtes de tableau `table-footer-group` : groupe de pieds de tableau `none` : l’élément est invisible et ses dimensions sont nulles.
Héritage	Non.

musteray

Articles de cet auteur

Mots-clés

Site en travaux

Attention : un problème technique (serveur SQL) empêche l'accès à cette partie du site. Merci de votre compréhension.

Accueil du site | Contact | Plan du site | Se connecter | Statistiques du site | Visiteurs : 640 / 0

fr Internet. HTML CSS