Glossaire des propriétés CSS


précédentsommairesuivant

VI. Propriétés d'affichage et de positionnement

VI-A. Affichage

VI-A-1. Type d'élément | display

display : définit comment doit être affiché un élément 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 supportée par IE 6 que pour les éléments 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 supportées par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte ces valeurs.

Version CSS : 1

On ne va reprendre ici que ceux étant les plus utilisés :

  • none : l'élément ne sera pas affiché ;
  • block : l'élément devient de type "bloc" (comme <div>). Un élément de type bloc ajoute un espace avant et après le bloc, ainsi qu'un saut de ligne ;
  • inline : l'élément devient de type "inline" (en ligne, comme <span>). Valeur par défaut. Il n'y a pas d'espace avant ni après et n'ajoute pas de saut de ligne ;
  • inline-block : l'élément est affiché comme un "inline" mais peut être redimensionné comme un bloc ;
  • list-item : l'élément devient de type "élément de liste à puce" (comme <li>) ;
  • table : l'élément est affiché comme une table ;
  • table-caption : l'élément est affiché comme le titre d'un tableau ;
  • table-cell : l'élément est affiché comme une cellule de tableau ;
  • table-column : l'élément est affiché comme une colonne de tableau ;
  • table-column-group : l'élément est affiché comme un groupe de colonnes (<colgroup>) ;
  • table-header-group : l'élément est affiché comme l'en-tête d'un tableau ;
  • table-footer-group : l'élément est affiché comme le pied de page d'un tableau ;
  • table-row : l'élément est affiché comme une ligne de tableau ;
  • table-row-group : l'élément 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 élément.

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 supportées par IE 8 et précédents.

Version CSS : 2.1

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

  • visible : l'élément est affiché ;
  • hidden : l'élément 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 affichée.

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 masquée 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 masquée et l'espace supprimé.

Voir la source
CacherSélectionnez

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

clip : permet de spécifier une zone visible d'un élément.

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 supportée par IE 7 et précédents. 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 élément. rect() permet d'indiquer les coordonnées 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 éléments 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 déterminer comment sera affiché le contenu d'un élément quand il dépasse les limites de son conteneur. C'est utilisé, entre autres, pour afficher des barres de défilement.

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 supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 2.1

  • visible : tout l'élément sera affiché (par défaut) ;
  • hidden : l'élément sera masqué s'il dépasse les limites définies par height et width. On ne pourra pas voir la partie du texte masquée ;
  • scroll : tout comme pour hidden, l'élément sera coupé s'il dépasse les limites. Cette fois le navigateur ajoutera des barres de défilement pour qu'on puisse voir la suite du texte. Ces barres seront obligatoirement affichées, même si celles-ci ne sont pas nécessaires ;
  • auto : c'est le navigateur qui décide d'ajouter des barres de défilement ou pas en fonction des cas.

Cette propriété 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 définir le flottement d'une boîte à 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 supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

  • left : l'élément flotte à gauche ;
  • right : l'élément flotte à droite ;
  • none : pas de flottement (par défaut).
 
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 définir si un élément 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 supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 1

  • left : l'élément est déplacé vers le bas pour se libérer des éléments flottants de gauche ;
  • right : l'élément est déplacé vers le bas pour se libérer des éléments flottants de droite ;
  • both : l'élément est déplacé vers le bas pour se libérer des éléments flottants de gauche comme de droite ;
  • none : l'élément ne se déplacera pas (par défaut).
 
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 définir le mode de positionnement d'un élément.

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 supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Version CSS : 2.1

  • absolute : retire complètement l'élément du flux et le positionne par rapport à son plus proche ancêtre lui-même positionné (ou par défaut la fenêtre du navigateur) en fonction des propriétés top, right, bottom et left ;
  • fixed : position fixe. L'élément reste à sa position dans la fenêtre ;
  • relative : déplace l'élément par rapport à sa position dans le flux. Il n'est pas retiré du flux ;
  • static : positionnement normal (par défaut).
Voir la source
CacherSélectionnez

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

top - bottom - left - right : permettent de définir la position d'un élément. Valeurs en px, %, em... À utiliser pour un positionnement absolu, fixe ou relatif. Si la propriété position est à la valeur static, ces propriétés 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 supportée par IE 7 et précédents. 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 éléments positionnés, de définir quel élément 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 supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.

Complément 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

précédentsommairesuivant

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.