HTML et CSS

HTML/CSS>
Feuilles de style (CSS) >
Affichage et positionnement

Affichage et positionnement

Les propriétés display,position et float permettent de déterminer comment un élément s'insère dans le contenu d'une page.

La propriété display définit le mode d'affichage: les deux principaux modes à connaître d'un élément sont le mode bloc (display:block;) et le mode "sur la ligne" (display:inline;).

Voici

un exemple d'élément affiché comme un bloc

et voilà
un élément identique affiché 'inline'
: le second s'insère naturellement dans le texte alors que le bloc se place comme un conteneur à part.

Le type d'affichage des éléments HTML est défini par défaut : un lien, un "span", un texte formaté par <b></b>, <strong></strong>... sont des éléments "inline" par défaut. Une liste, un élément de liste, un "div", un "p" ... sont de type bloc par défaut. Le type par défaut peut être changé grâce aux feuilles de style... même si ce n'est pas nécessairement une bonne idée (exemples idiots)

La propriété position permet de préciser la méthode de positionnement d'un élément. La position d'un élément est par défaut déterminée par sa place dans le code source (position:static;) mais on peut la modifier en choisissant une autre méthode de positionnement grâce à la propriété position, puis en fixant les valeurs de top et/ou left et/ou right et/ou bottom.

    Valeurs possibles de position (autres que static)
  • absolute : permet de fixer les coordonnées absolue de l'élément à l'intérieur de son parent (exactement, de son premier parent non static). Plutôt adapté pour les affichages de type bloc.
  • fixed : permet de fixer les coordonnées de l'élément à l'intérieur de la fenêtre du navigateur. Plutôt adapté pour les affichages de type bloc. L'élément reste fixe dans la fenêtre du navigateur même quand on en fait défiler le contenu. Il y en a un dans cette page mais vous ne l'avez peut-être pas encore vu...
  • relative: permet de fixer la position de l'élément par-rapport à sa position par défaut. Par exemple    ce texte    est dans un span positionné un peu à droite et au dessus de sa position normale, ce qui fait qu'il empiète un peu sur ce qui est à sa droite (on l'a rendu un peu transparent pour mieux voir).

Si des éléments sont amenés à se superposer du fait de leur positionnement, on peut choisir leur ordre d'empilement grâce à la propriété z-index et leur opacité grâce à la propriété opacity. Par défaut les éléments se superposent dans leur ordre de création.

La propriété float peut valoir left ou right, signifiant que l'élément va se placer le plus à gauche (respectivement à droite) de son conteneur, en étant "habillé" de l'autre côté par la suite du contenu (comme cette boîte turquoise).Par défaut float vaut none, c'est à dire que les éléments ne sont pas habillés.
Avec CSS tout est possible !
Créez une page contenant plusieurs "boîtes", d'aspect et de tailles différentes, se superposant ou non
Observez et expliquez le comportement des 6 boîtes de couleur sur cette page lorsqu'on la redimensionne ou qu'on la fait défiler, en fonction de leurs propriétés de positionnement.
 
Licence Creative Commons
licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 3.0 non transposé
Auteur : Nathalie Bonnin
Professeur de Physique, Chimie, Informatique au lycée La Martinière Monplaisir (Lyon 8ème)
Contact :
nathalie.bonnin (chez) scientillula.net
Licence Creative Commons
La totalité du contenu du site Scientillula.net appartient à Nathalie Bonnin et est mise à disposition selon les termes de la licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 3.0 non transposé