Voici quelques notes sur le positionnement des objets dans les pages Web à l'aide des feuilles de style. Elle sont tirée de: http://www.brainjar.com/css/positioning/default.asp
|
Pour le positionnement, les éléments d'un document sont considérés comme étant des rectangles qui possèdent un contenu (le texte dans l'exemple de gauche) entouré par un remplissage (en gris), une bordure (en noir) et des marges (en jaune). Les propriétés correspondantes au remplissage, à la bordure et aux marges sont respectivement padding, border et margin.
Les marges sont toujours transparentes et les bordures peuvent avoir plusieurs styles. Les paramètres d'arrière-plan d'un élément s'appliquent à tout ce qu'il y a à l'intérieur des bordures; donc le remplissage et le contenu. Lorsque les marges, les bordures ou le remplissage n'est pas spécifié on leur donne la valeur zéro. Si désiré les marges peuvent avoir des valeurs négatives.
On peut dire qu'il y a deux types de boites: les boites de type bloc et les boites en ligne. Les premières proviennent d'éléments HTML tel P, DIV ou TABLE tandis que les boites en ligne proviennent des éléments dits en ligne comme B, I, SPAN ou du contenu lui-même comme du texte ou une image. On peut forcer le navigateur à traiter une boite en ligne comme un bloc en utilisant la propriété display:block.
Il va sans dire qu'une boite peut en contenir d'autres aux fins de l'affichage et du positionnement. Dans ce cas la boite extérieur servira de limite pour les calculs d'affichage des boites intérieurs. Par exemple: width:50% signifiera 50% de la largeur de la boite extérieur.
Il y a trois modes de positionnement en CSS2: le mode normal, le mode flottant et le mode absolu. On contrôle le mode au moyen des propriétés position et float.
C'est le mode par défaut. Il n'y a pas de positionnement absolu ni de flottement.
|
Dans ce mode, les boites de type bloc se suivent à la verticale dans la boite qui les contient ou dans la fenêtre du navigateur et les marges verticales sont superposées. La distance entre les deux boites intérieures sera la marge la plus grande.
Voici du texte en gras et en italique ou dans une autre police de caractères. |
Les boites en ligne se suivent à l'horizontale à l'intérieur de la boite qui les contient ou la fenêtre du navigateur. Les marges ne sont jamais superposées. Lors que le navigateur n'a plus de place horizontalement, il passe simplement à la ligne suivante.
|
Lors qu'on utilise position:relative la boite est positionnée en suivant les règles du mode normal à l'intérieur de la boite englobante. Ensuite la boite est déplacée selon les coordonnées (offset) spécifiées à l'aide des propriétés top, right, left, bottom. Il peut arriver que la boite intérieur dépasse les limites de la boite extérieur comme dans l'exemple ci-contre.
Voici un tableau flottant à droite. |
Voici un paragraphe flottant à gauche.
Ce mode peut être utilisé à l'aide de la propriété float (left, right, none ou inherit). Dans ce cas la boite est positionnée verticalement comme dans le mode normal. Horizontalement, elle est déplacée complètement à gauche (ou à droite) de sa boite englobante. Les autres boites en ligne peuvent alors entourer la boite flottante à droite ou à gauche selon le cas. Voir les exemples ci-contre.
Un premier paragraphe à gauche.
Et un deuxième.
Un autre à droite.
Et un deuxième mais avec clear:right
Lorsqu'il y a plusieurs boites consécutives avec la même valeur pour le flottement, le navigateur va les positionner côte à côte s'il y a assez de place. Si l'on désire éviter ce comportement on peut utiliser la propriété clear.
Ce mode s'obtient avec la propriété position:absolute ou position:fixed. La boite est isolée du flot normal de positionnement et devient alors un conteneur indépendant. On positionnera la boite et son contenu à l'aide des propriétés top, right, bottom et left.
C'est un positionnement absolu mais par rapport à la fenêtre de navigation. La boite sera toujours apparente sur l'écran.
Les éléments positionnés de façon absolue peuvent se recouper. L'ordre d'apparition sera déterminé par le contexte d'empilement et par la propriété z-index. Plus celle-ci sera grande, plus l'élément sera à l'avant-plan dans le même contexte. Si les deux valeurs sont égales (ou s'il n'y a pas de valeur) l'ordre de définition dans le code HTML sera utilisé.
Dans le cas des contrôles d'un formulaire ou de plug-ins il pourrait y avoir des comportements bizarres puisque d'autres programmes que le navigateur peuvent modifier l'affichage.