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

Objet de la fiche :

État de la fiche

Plan de la fiche

• | Avant propos |
• | Généralités |
• | Attributs de positionnement |
• | Positionnement relatif |
• | Positionnement absolu |
• | Positionnement fixed |
• | Priorité des éléments superposés |
• | Positionnement flottant |
• | Alignement des éléments |
• | Les bonnes habitudes |
• | Application au projet de site web|

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}

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

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;.....

Je suis un texte dans une boite en position:fixed

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

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

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

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.

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.

Note²  : 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

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