Glossaire des proprits CSS


prcdentsommairesuivant

VI. Proprits d'affichage et de positionnement

VI-A. Affichage

VI-A-1. Type d'lment | display

display: dfinit comment doit tre affich un lment HTML.

Syntaxe: inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 7+

Notes: la valeur inline-block n'est supporte par IE 6 que pour les lments initialement inline; les valeurs inline-table, table, table-caption, table-cell, table-column, table-column-group, table-row, table-row-group et inherit ne sont pas supportes par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte ces valeurs.

Version CSS: 1

On ne va reprendre ici que ceux tant les plus utiliss:

  • none: l'lment ne sera pas affich;
  • block: l'lment devient de type "bloc" (comme <div>). Un lment de type bloc ajoute un espace avant et aprs le bloc, ainsi qu'un saut de ligne;
  • inline: l'lment devient de type "inline" (en ligne, comme <span>). Valeur par dfaut. Il n'y a pas d'espace avant ni aprs et n'ajoute pas de saut de ligne;
  • inline-block: l'lment est affich comme un "inline" mais peut tre redimensionn comme un bloc;
  • list-item: l'lment devient de type "lment de liste puce" (comme <li>);
  • table: l'lment est affich comme une table;
  • table-caption: l'lment est affich comme le titre d'un tableau;
  • table-cell: l'lment est affich comme une cellule de tableau;
  • table-column: l'lment est affich comme une colonne de tableau;
  • table-column-group: l'lment est affich comme un groupe de colonnes (<colgroup>);
  • table-header-group: l'lment est affich comme l'en-tte d'un tableau;
  • table-footer-group: l'lment est affich comme le pied de page d'un tableau;
  • table-row: l'lment est affich comme une ligne de tableau;
  • table-row-group: l'lment est affich comme un groupe de lignes.
 
Sélectionnez
display: none;
display: block;
display: inline;
display: inline-block;
Lorem ipsum dolore sit amet, consectetur adipisicing elit
Lorem ipsum dolore sit amet, consectetur adipisicing elit
Lorem ipsum dolore sit amet, consectetur adipisicing elit
Lorem ipsum dolore sit amet, consectetur adipisicing elit
Voir la source
CacherSélectionnez

VI-A-2. Affichage | visibility

visibility: permet d'afficher ou de masquer un lment.

Syntaxe: visible | hidden | collapse | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: les valeurs inherit et collapse ne sont pas supportes par IE 8 et prcdents.

Version CSS: 2.1

Contrairement display: none;, l'lment masqu occupe toujours l'espace dans la page.

  • visible: l'lment est affich;
  • hidden: l'lment est masqu mais conserve son espace dans la page;
  • collapse: cache une ligne ou une colonne d'un tableau.
 
Sélectionnez
visibility: visible;
visibility: hidden;
visibility: collapse;
display: none;
lorem ipsum dolore sit amet, consectetur adipisicing elit.
lorem ipsum dolore sit amet, consectetur adipisicing elit.
lorem ipsum dolore sit amet, consectetur adipisicing elit.

Ici la phrase est affiche.

lorem ipsum dolore sit amet, consectetur adipisicing elit.
lorem ipsum dolore sit amet, consectetur adipisicing elit.
lorem ipsum dolore sit amet, consectetur adipisicing elit.

Ici la phrase sera masque mais l'espace est conserv.

lorem ipsum dolore sit amet, consectetur adipisicing elit.
lorem ipsum dolore sit amet, consectetur adipisicing elit.

Ici c'est une ligne d'un tableau que l'on masque

lorem ipsum dolore sit amet, consectetur adipisicing elit.
lorem ipsum dolore sit amet, consectetur adipisicing elit.
lorem ipsum dolore sit amet, consectetur adipisicing elit.

Ici la phrase est masque et l'espace supprim.

Voir la source
CacherSélectionnez

VI-A-3. Afficher seulement une partie | clip

clip: permet de spcifier une zone visible d'un lment.

Syntaxe: <shape> | auto | inherit

Compatibilit: IE 5.5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

Indiquer quatre valeurs la suite:

 
Sélectionnez
clip: rect(0px, 50px, 50px, 0px);
clip: rect(10px, 90px, 60px, 10px);

Cela permet de n'afficher qu'une partie d'un lment. rect() permet d'indiquer les coordonnes du rectangle qui sera affich.
Les valeurs 1 4 correspondent respectivement aux coins haut, droite, bas et gauche du rectangle.

Attention, clip ne s'applique qu'aux lments dont la position est absolue.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Voir la source
CacherSélectionnez

VI-A-4. Limiter les dimensions | overflow

overflow: permet de dterminer comment sera affich le contenu d'un lment quand il dpasse les limites de son conteneur. C'est utilis, entre autres, pour afficher des barres de dfilement.

Syntaxe: visible | hidden | scroll | auto | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 7+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 2.1

  • visible: tout l'lment sera affich (par dfaut);
  • hidden: l'lment sera masqu s'il dpasse les limites dfinies par height et width. On ne pourra pas voir la partie du texte masque;
  • scroll: tout comme pour hidden, l'lment sera coup s'il dpasse les limites. Cette fois le navigateur ajoutera des barres de dfilement pour qu'on puisse voir la suite du texte. Ces barres seront obligatoirement affiches, mme si celles-ci ne sont pas ncessaires;
  • auto: c'est le navigateur qui dcide d'ajouter des barres de dfilement ou pas en fonction des cas.

Cette proprit peut tre tendue par overflow-x et overflow-y.

 
Sélectionnez
overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultricies est in dui aliquet vel dictum tellus sagittis. Etiam fringilla laoreet tortor, ut dapibus ligula pharetra eget. Pellentesque faucibus eleifend faucibus. Nam sapien lacus, congue at mattis mattis, blandit ac leo.

Vestibulum at elit cursus urna lacinia dapibus vel quis magna. Nullam nibh elit, congue eget imperdiet id, bibendum in risus. Suspendisse potenti. Donec nec orci ut ante luctus pharetra. Proin tristique, nibh at porttitor tristique, enim ante aliquam justo, nec feugiat leo dolor quis dui.

Proin quis enim neque, ut ultricies sapien. Cras risus eros, placerat eget pharetra ut, molestie sit amet metus. Ut tortor purus, molestie eget dictum eget, vestibulum sed nisi. Quisque posuere feugiat arcu at mattis. Nunc vehicula dui tortor, ut convallis odio.

Voir la source
CacherSélectionnez

VI-B. Positionnement

VI-B-1. Flottant | float

float: permet de dfinir le flottement d'une bote gauche, droite ou pas du tout.

Syntaxe: none | left | right | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

  • left: l'lment flotte gauche;
  • right: l'lment flotte droite;
  • none: pas de flottement (par dfaut).
 
Sélectionnez
float: none;
float: left;
float: right;
NONE
LEFT
RIGHT
Voir la source
CacherSélectionnez

VI-B-2. Stopper un flottant | clear

clear: permet de dfinir si un lment doit tre adjacent un autre ou plac en dessous.

Syntaxe: none | left | right | both | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 1

  • left: l'lment est dplac vers le bas pour se librer des lments flottants de gauche;
  • right: l'lment est dplac vers le bas pour se librer des lments flottants de droite;
  • both: l'lment est dplac vers le bas pour se librer des lments flottants de gauche comme de droite;
  • none: l'lment ne se dplacera pas (par dfaut).
 
Sélectionnez
clear : left ;
Flottant gauche
Flottant gauche avec marge de 20 pixels
Flottant nettoy
 
CacherSélectionnez

VI-B-3. Type de positionnement | position

position: permet de dfinir le mode de positionnement d'un lment.

Syntaxe: absolute | fixed | relative | static | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 2.1

  • absolute: retire compltement l'lment du flux et le positionne par rapport son plus proche anctre lui-mme positionn (ou par dfaut la fentre du navigateur) en fonction des proprits top, right, bottom et left;
  • fixed: position fixe. L'lment reste sa position dans la fentre;
  • relative: dplace l'lment par rapport sa position dans le flux. Il n'est pas retir du flux;
  • static: positionnement normal (par dfaut).
Voir la source
CacherSélectionnez

VI-B-4. Position par rapport aux coins | top bottom left right

top - bottom - left - right: permettent de dfinir la position d'un lment. Valeurs en px, %, em... utiliser pour un positionnement absolu, fixe ou relatif. Si la proprit position est la valeur static, ces proprits n'ont pas d'effet.

Syntaxe: <length> | <percentage> | auto | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS: 2.1

 
Sélectionnez
top: 30px;
left: 50px;
 
bottom: 10px;
right: 30px;
Voir la source
CacherSélectionnez

VI-B-5. Ordre d'affichage | z-index

z-index: permet, pour les lments positionns, de dfinir quel lment sera plac au-dessus de l'autre. Plus le nombre sera grand, plus il sera au premier plan.

Syntaxe: auto | <integer> | inherit

Compatibilit: IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Note: la valeur inherit n'est pas supporte par IE 7 et prcdents. IE 8 requiert un doctype. IE 9 supporte inherit.

Complment d'information: Comprendre z-index.

Version CSS: 2.1

 
Sélectionnez
z-index: 1;
z-index: 2;
z-index: 5;
Voir la source
CacherSélectionnez

prcdentsommairesuivant

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2013 Torgar. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.