Les Fiches de MonWebFacile





Chapitre

Fiche

 

Fiche CSS : Positionnement des éléments HTM dans une page

Objet de la fiche :

État de la fiche Terminée validée


Plan de la fiche

Avant propos

On touche ici à la mise en forme profonde de la page HTML qui donnera le véritable  rendu de votre future page Web. Avant 90% des mises en forme (positionnement des objets) étaient réalisées à l'aide des tableaux : c'était pratique et cela donnait un très bon résultat. Avec l'arrivée en force des feuilles de style css, certains puristes ont décrété que les tableaux utilisés pour la mise en forme, étaient à proscrire définitivement. Il est vrai que les feuilles de style ont apporté une grande souplesse, et des facilités d'évolution et de maintenance, toutefois la reconnaissance des feuilles de style pour le positionnement est diversement interprétée par les navigateurs et l'on peut se retrouver devant de belles surprises lors de la visualisation du résultat final. Alors ne rejetons  pas tout de suite l'utilisation des tableaux, ils peuvent nous être encore dans certains cas d'une grande utilité.

Le positionnement est souvent lié à l'utilisation de la balise <div>

Généralités

Sans rentrer dans le détail du décryptage de l'imbrication des balises au fur et à mesure que le navigateur charge la page HTML, on peut dire qu' il existe deux  modes de positionnement des éléments HTML :

  • Le mode par défaut : le navigateur construit la page Web qui va être affichée au fur et à mesure qu'il reçoit les informations (types de balises et contenu) contenues dans la page HTML demandée. Ainsi les éléments seront positionnés les uns à la suite des autres dans l'ordre ou ils ont été écrits dans la page HTML et en tenant compte des types de chaque balise (bloc ou en ligne) et des feuilles de style qui lui sont associées. On appelle aussi cela la méthode de positionnement dans le flux.

Rappelons que les balises bloc introduisent systématiquement un retour à la ligne et voyons le résultat obtenu sur le positionnement des éléments avec le flux ci-dessous..

  •  Le mode qui sort l'élément du Flux de 4 façons différentes :

- le positionnement relatif, se fait par rapport à d'autres éléments, comme une image, c'est-à-dire que les éléments contenus dans la boite seront positionnés à la suite des éléments HTML après lesquels ils se trouvent.

- le positionnement absolu se détermine par rapport au coin supérieur gauche de la fenêtre du navigateur. Les coordonnées de positionnement de la boite s'expriment par rapport au sommet de la fenêtre du navigateur (variation en y), et par rapport au coté gauche de la fenêtre du navigateur (variation en x).

- le positionnement fixé,

- le positionnement flottant.

Attributs de positionnement

Il s'agit d'un ensemble d'attributs qui outre le type de positionnement et les références X/Y du positionnement lui-même, associe les notions de dimensions, les modes d'affichage des contenus et des priorités des différents objets les uns par rapport aux autres.

Une définition de style complète sera de la forme :

{type de positionnement;position X/Y;dimension L/H;mode affichage;priorités des éléments superposés}

Attributs de positionnement
Attributs Actions Valeurs Commentaires
Les attributs suivants sont relatifs au type de positionnement.
position Type de positionnement d'un objet. static : C'est la valeur par défaut de cet attribut. L'élément est dans le flux normal et sera positionné dans l'ordre ou il a été écrit dans la page HTML. On n'a pas a spécifier cette valeur si on ne désire pas un positionnement spécifique pour cet élément.
absolute : Permet de positionner l'élément n'importe ou à l'intérieur de son conteneur Parent. Si le conteneur parent est body l'élément peut être positionné n'importe ou sur l'écran du navigateur. Un élément positionné absolu est sensible au scrolling.
relative : Positionnement d'un bloc dans le flux normal, pouvant être décalé horizontalement avec top ou bottom ou verticalement avec left et right.
fixed : Permet de positionner l'élément n'importe ou dans la fenêtre du navigateur. Un élément positionné fixed est insensible au scrolling.
float Souvent utilisé pour enrouler un texte autour d'une image. left : la partie enroulée est à gauche. numérique, entier (pixel, em) ou %
right : la partie enroulée est à droite. numérique, entier (pixel, em) ou %
none Aucun flottement n'est appliqué
clear S'utilise avec float pour signaler l'arrêt du flottement left : l'élément avec l'attribut clear:left n'accepte pas d'élément float sur sa gauche.
right : l'élément avec l'attribut clear:right n'accepte pas d'élément float sur sa droite.
both : l'élément avec l'attribut clear:both n'accepte pas d'élément float ni sur sa droite, ni sur sa gauche.
- none : Dans ce cas rien n'est affecté par rapport aux éléments flottants et cette propriété n'influence pas le positionnement en cours.
Les attributs left, top, width et height font références aux modes de positionnement définis par la propriété position
left Positionnement  gauche
  • auto
  • numérique entier (pixel, em)
  •  %(1)
Note1 Il existe un bug dans le navigateur Internet Explorer: si l'on spécifie une largeur relative comme par exemple width:50%, la largeur sera basée sur la dimension du parent et non sur l'élément lui-même.
Note2
Suivant les navigateurs et sans la propriété width sur l'élément ce dernier peut prendre des largeurs par défaut un peu différentes et spécialement sous Internet Explorer qui affecte à l'élément tout l'espace compris entre la fin de l'élément lui même et le bord droit de son parent (on retrouve la même remarque dans la fiche HTML concernant les bordures). Cela se passe plutôt bien avec les autres navigateurs.
top Positionnement haut
width Largeur de l'élément(2)
  • auto
  • numérique entier (pixel, em)
  •  %(1)
height Hauteur de l'élément
L'attribut suivant est relatif aux priorités des éléments superposés.
z-index superposition automatique auto C'est la valeur par défaut. Dans les cas de position:absolute ou position:fixed  avec des positionnement identiques, les éléments superposés sont empilés les uns sur les autres de telle façon que c'est le dernier du flux qui se place devant tous les autres.
valeur indiquant la profondeur valeur numérique entière Dans les cas de position:absolute ou position:fixed  avec des positionnement identiques, les éléments superposés sont empilés les uns sur les autres dans l'ordre croissant de la propriété z_index. L'élément ayant le z-index de plus grande valeur se place devant tous les autres.

Positionnement relatif

Généralités


Par défaut, un navigateur affiche les différents éléments de la page dans l'ordre où ils ont été placés dans la page HTML (flux normal). Un bloc en position relative reste dans le flux normal, mais peut être décalé (horizontalement avec top ou bottom et verticalement avec left ou right) par rapport aux autres éléments frères ou parents. Le contenu suivant n'est pas affecté par ce déplacement, qui peut donc entraîner des chevauchements. En fait ce type de positionnement n'est pas beaucoup utilisé d'autant que si l'on se permet quelques fantaisies le résultat, en fonction des navigateurs, est souvent surprenant.

Voici un exemple d'une image et d'un morceau de texte auxquels on applique un positionnement relatif.

Syntaxe

Afin d'éviter les surprises en fonction des divers navigateurs, il est conseillé de définir l'ensemble des attributs de positionnement (right,left...) et éventuellement ceux de dimensionnement (width et height)..

{position:relative;right:xx;left:;yy;bottom:zz;top:ww}

Exemple


1. Le conseil des gouverneurs de la Banque centrale européenne se compose
des membres du directoire de la Banque centrale européenne
et des gouverneurs des banques centrales nationales des États membres
ne faisant pas l’objet d’une dérogation au sens de l’article III-91. 2.
a) Le directoire se compose du président, du vice-président et de quatre autres membres.



Commentaires

Remarquez l'utilisation de la balise <span> pour délimiter la chaîne de caractères "Le directoire" et ainsi pouvoir lui affecter un positionnement relatif et une couleur d'arrière plan.

Positionnement absolu


Généralités

Permet de positionner l'élément n'importe ou à l'intérieur de son conteneur Parent. Si le conteneur parent est body l'élément peut être positionné n'importe ou sur l'écran du navigateur. Un élément positionné absolu est sensible au scrolling. Si on positionne plusieurs éléments susceptibles de se chevaucher on utilisera la propriété  z-index pour indiquer quel élément se positionnera au dessus des autres.

Lorsque l'on positionne un objet et s'il est différent d'une image ou d'un élément multimédia (<object>) sa couleur de fond est celle héritée de son parent : en l'absence d'arrière plan (image, mais surtout couleur) le contenu de l'élément que l'on positionne va se retrouver mêlé au contenu du parent.  Cela peut être pratique si l'on est sûr que le contenu du parent ne sera pas une gêne.

Exemple de disposition des éléments




Positionnement fixed

Permet de positionner l'élément n'importe ou dans la fenêtre du navigateur à l'aide des attributs top, left, right, buttom. Un élément positionné fixed est insensible au scrolling.

Syntaxe

position:fixed;top:xx;left:zz;.....

Imbrication d'éléments

Il est possible d'imbriquer par exemple des éléments "relatif" et/ou "absolu" dans un élément "fixed" mais attention aux surprises et aux divers débordement d'un élément sur un autre. Les précautions minimales à prendre dans ce type de construction est de fixer précisément les valeurs de margin et padding : si on ne les utilise pas veillez à les initialiser à 0 em ou 0 px.

Exemple


Commentaires sur le code

Imbrication

Priorité des éléments superposés  z-index


Généralités

Dans les cas de position:absolute ou position:fixed  avec des positionnement identiques ou susceptibles de se chevaucher, les éléments superposés sont empilés les uns sur les autres dans l'ordre croissant de la propriété z_index. L'élément ayant le z-index de plus grande valeur se place devant tous les autres. z-index varie de 0 (valeur par défaut) jusqu'a 999 valeur la plus forte. En l'absence de prérogative z-index, c'est le dernier objet lu dans le flux qui se superpose aux autres.

Attributs et valeurs


z-index superposition automatique auto C'est la valeur par défaut. Dans les cas de position:absolute ou position:fixed  avec des positionnement identiques, les éléments superposés sont empilés les uns sur les autres de telle façon que c'est le dernier du flux qui se place devant tous les autres.
valeur indiquant la profondeur valeur numérique entière Dans les cas de position:absolute ou position:fixed  avec des positionnement identiques, les éléments superposés sont empilés les uns sur les autres dans l'ordre croissant de la propriété z_index. L'élément ayant le z-index de plus grande valeur se place devant tous les autres.

Exemple



 


Positionnement flottant


Généralités

La propriété float est essentiel pour assurer une qualité professionnelle à la présentation de votre page Web, à la condition de savoir bien le manipuler et d'en connaître les limites.

Cette propriété permet de sortir un élément du flux,  par exemple une image ou une colonne de contenu et l'afficher à gauche ou à droite à l'intérieur de son parent. En plaçant un élément déterminé à l'intérieur du conteneur, le reste du flux, est décalé à droite (si la propriété float est spécifié à gauche) de l'élément flottant, et se poursuit en dessous selon sa longueur.

De fait, si l'on peut facilement déduire le comportement de l'élément flottant, celui du reste du flux devra être deviné par le designer, qui devra prévoir l'écoulement des autres éléments : c'est pourquoi il est nécessaire de préciser la taille d'un élément flottant, ainsi que de prévoir la place prise par le reste du flux.

Le comportement inattendu du reste du flux se retrouve souvent sous la forme d'autres éléments flottants qui n'occupent pas la place voulue. C'est ici que la propriété clear entre en jeu et contrôle le comportement des éléments qui suivent, dans le flux, un élément flottant. Par défaut, l'élément standard suivant un élément flottant s'affichera dans l'espace laissé par la largeur du flottant dans le contenu parent. Ce comportement n'étant pas forcément voulu, clear a été conçue pour préciser que cet élément et bien sur ce qui suivent ne seront pas influencés par le comportement d'un flottant. Cette précision peut se faire pour les éléments flottant sur chaque côté ou sur les deux à la fois. En fait clear permet de libérer l'élément de l'influence de la propriété float.

Les attributs et valeurs de float et clear


float left : la partie enroulée est à gauche numérique, entier (pixel, em) ou %
right : la partie enroulée est à droite numérique, entier (pixel, em) ou %
none Aucun flottement n'est appliqué
clear S'utilise avec float pour signaler l'arrêt du flottement left : l'élément avec l'attribut clear:left n'accepte pas d'élément float sur sa gauche.
right : l'élément avec l'attribut clear:right n'accepte pas d'élément float sur sa droite.
both : l'élément avec l'attribut clear:both n'accepte pas d'élément float ni sur sa droite, ni sur sa gauche.
none : Dans ce cas rien n'est affecté par rapport aux éléments flottants et cette propriété n'influence pas le positionnement en cours.

Exemple de disposition des éléments

Voici le résultat d'une page HTML  dont certains éléments utilisent la propriété float.

  • La partie encadrée par le rectangle rouge constitue la boite  de type <div>, conteneur de la présentation.
  • La boite générale contient du texte et des éléments de type image <img> (avec propriété float:left), un petit mémo <div> (avec propriété float:right) et un formulaire <form> (avec propriété float:right).
  • Un arrêt de l'action des float  est spécifié par un bloc <div> spécifique en fin de conteneur.
  • Des marges internes et externes ont été appliquées pour obtenir une bonne présentation de l'ensemble.

Exemple d'un positionnement en colonnes


La musique country, ou country (autrefois « country and western ») est un....

Le directoire se compose du président, du vice-président et de quatre autres membres
Le conseil des gouverneurs de la Banque centrale européenne se compose des membres....
Banque centrale européenne se compose des membres du directoire de la Banque centrale européenne et des gouverneurs ...

Bien que la country ait été décriée par certains critiques français comme étant .......


Exemple d'application de la propriété clear pour la structuration finale d'objets flottant

En fonction des feuilles de style , l'élément doté de la propriété clear risque de réagir non seulement à l'élément flottant  situé dans le même conteneur, mais aussi à d'autres éléments flottant extérieurs à celui-ci, ce qui le repoussera beaucoup plus bas que le but désiré. Pour éviter tout effet indésirable, il faut limiter l'action de la propriété clear au conteneur englobant le flottant souhaité, le texte qui le suit et le clear lui-même.

Avant l'application de clear
Je suis du texte avant.....

Un petit mémo plus grand que le texte de la boite....

Le conseil des gouverneurs ....

je suis du texte après ...

Aprés l'application de clear
Je suis du texte avant.....

Un petit mémo plus grand que le texte de la boite....

Le conseil des gouverneurs ....

 
je suis du texte après

Commentaire

Attention à la réaction des ces attributs en fonction des navigateurs. Tant que l'on reste dans des configurations simples et que l'on suit les recommandations précédentes on évitera les plus gros problèmes, mais attention en cas d'emboîtements compliqués certaines réactions peuvent être imprévisibles.

Alignement des éléments

Méthode avec l'attribut margin

Les marges sont  transparentes et ne font pas partie de la dimension de l'élément.

Valeurs de l'attribut margin
Attributs Fonctions Valeurs
margin associé à 1 valeur Spécifie l'espace externe pour les quatre cotés. Exp.  margin:0.3em pixels, %2, em, auto
margin associé à 2 valeurs La première valeur défini l'espacement externe en haut et en bas, la seconde défini l'espacement externe à gauche et à droite. Exp.  margin:0.3em 5px
margin associé à 4 valeurs Espaces externes définis pour chacun des cotés dans le sens haut, droite, bas, gauche (à partir de haut dans le sens des aiguilles d'une montre. Exp.  margin:0.3em 01em 5px 2px
margin-top Spécifie la marge externe individuellement coté par coté. Exp.  margin-top:0.3em.
  • top : haut
  • bottom : bas
  • left : gauche
  • right : droite
pixels, %2, em, auto
margin-bottom
margin-left
margin-right

Note2  : Pour les valeurs en % la dimension de référence est la largeur de la boîte mère.

Exemple


Méthode avec les attributs de positionnement de texte.

Ces attributs relatifs au positionnement de texte ont été vus dans la fiche "Style et structuration de texte", mais ils peuvent être aussi utilisés dans le cadre de positionnement d'éléments.

  • vertical-align permet de gérer l'alignement vertical
  • text-align permet de spécifier l'alignement horizontal
Attributs de la propriété text-align utilisables pour le positionnement
Attributs Commentaires
left alignement du texte gauche
center alignement du texte au milieu
right alignement du texte à droite
inherit hérite de la propriété du son parent

Exemple

Remarques

Le fait d'utiliser text-align pour aligner des éléments aligne aussi le contenu des éléments eux-mêmes, il faut donc réajuster les éléments inclus à votre convenance. C'est le cas par exemple de la boite jaune qui est positionnée avec text-align:center, et dont le contenu "Element secondaire" doit être réajusté si on ne veut pas qu'il soit lui aussi centré par un text-align:left (p {text-align:left}.


Les bonnes habitudes

  • L'utilisation de la propriété background-color ou background-image est fortement recommandé en association avec les propriétés position:absolute et position:fixed.
  • Spécifiez systématiquement la propriété width et éventuellement la propriété height afin d'obtenir une présentation homogène par les différents navigateurs.
  • Pour les éléments float prévoir systématiquement une largeur afin d'éviter des débordements imprévisibles.

Application au projet de site web

Le but de cet exercice est de positionner les différents partie de notre site de manière à le rendre convivial et ergonomique.

  • Étape 1 : Centrage du site. Pour cela :
    • Dans la page index.html de la racine créez une boite div qui encadre l'ensemble de la page (départ de la boite juste après <body> et fin de la boite juste avant </body>). Cette boite aura pour identificateur "Site".
    • Faire de même pour les pages Bouquets.htm, Compositions.htm, Fleurs.htm et Plantes .htm du répertoire "Site".
    • Sauvegardez les divers fichiers
    • Dans le fichier CSSExterneScreen.css créez la feuille de style pour la boite "Site", lui donner une largeur de 65%  puis centrez la boite en utilisant la propriété margin:auto.
  • Étape 2 : Positionnement de la liste "Choisissez et commandez" sur la gauche et positionnement du tableau d'images à droite sur la même horizontale. On donnera une largeur de 15em à la liste.

Retrouvez la solution



Respectons la propriété intellectuelle