Editer un article - Informaticien.be

Editer un article

Titre
Mots Clés
Texte	Tout d'abord, je vous conseille de prendre le temps de lire : http://www.yoyodesign.org/doc/w3c/css2/visuren.html#positioning-scheme Il y a en CSS2, 5 méthodes de positionnement : [u]Le positionnement selon le flux normal[/u] Sous ce terme un peu barbare se cache en fait la méthode de positionnement la plus classique. L'ordre d'affichage des éléments suis exactement le même ordre que le document HTML. C'est à dire que : - les éléments de type "boîte" (<div>, <p>, <h1>, <table>...) s'empilent les uns sur les autres de haut en bas ; - les éléments de type "en-ligne" (<span>, <a>, <b>, <img>...) sont placés horizontalement, les uns après les autres le long de la ligne de texte. C'est en fait le mode de positionnement par défaut lorsque aucune valeur n'a été donnée aux attributs "[url=http://www.yoyodesign.org/doc/w3c/css2/visuren.html#propdef-position]position[/url]" et "[url=http://www.yoyodesign.org/doc/w3c/css2/visuren.html#propdef-float]float[/url]". > [i]Ce mode de positionnement est à privilégier lorsqu'on compose des longs documents mono-colonne comme par exemple les spécifications du W3C données en lien ci-dessus[/i] [u]Le positionnement relatif[/u] Un élément utilise le positionnement relatif lorsqu'il possède la propriété : [css]position: relative;[/css] Le positionnement relatif permet de déplacer un élément [i]relativement[/i] à sa position qu'il aurait eu dans le flus normal s'il n'avait pas été déplacé. Pour déplacer l'élément il faut utiliser les propriétés "top", "bottom", "left" et "right". Considérons ce texte hautement philosophique : [html]<p>Coin ! Coin ! Coin ! Coin ! Coin ! Coin ! <b class="pan">PAN !</b> Coin ! Coin ! Coin ! Coin ! Coin !</p>[/html] Par défaut tous les mots sont alignés de la même manière sur la ligne de texte. Si maintenant on donne à mon élément <b> les propriétés suivantes : [css]b.pan { position: relative; bottom: 5px; }[/css] Cela va déplacer le texte "PAN !" de 5 pixels vers le haut. Note : on aurait très bien pu écrire "top: -5px", l'effet aurait été identique, mais certains navigateurs n'apprécient pas toujours les valeurs négatives. > [i]Le positionnement relatif ne s'utilise donc pas de manière générale pour tous les éléments du document mais seulement pour quelques uns d'entre eux pour lesquels on a décidé d'une position particulière.[/i] [u]Les flottants[/u] Un élément est dit "flottant" lorsqu'il possède la propriété : [css]float: left; ou float: right;[/css] Un élément qui a la propriété "float: right;" sera plaqué contre le bord interne droit de son élément conteneur. Idem pour "float: left;" En des temps reculés de l'histoire du HTML on obtenait un comportement similaire en faisant comme ceci : [html]<p><img src="..." align="right">Bla bla bla bla bla...</p>[/html] Ceci n'est bien sûr pas à utiliser, l'attribut "align" étant déprécié. Les flottants permettent de faire 2 choses : - de faire écouler du texte le long des bords du bloc flottant ; - de placer des boîtes cote à cote. (rapellons que dans le flux normal celles-ci se placent par défaut les unes sur les autres) Les flottants doivent être utilisés avec précaution car : - n'importe quel élément qui reçoit la propriété float devient une boîte ; - les flottants sortent du flux normal. Concrètement, ceci signifie que si on a quelque chose comme : [html]<div id="principal"> <div id="menu">...</div> <div id="contenu">...</div> </div> div#menu { float: left; width: 25%; } div#contenu { float: right; width: 75%; }[/html] le <div id="principal"> sera considéré comme vide car les 2 <div> qu'il contient ne sont plus dans le flux normal. Pour contourner ce problème on peut placer un troisième dont le but est d'étirer le bloc conteneur : [html]<div id="principal"> <div id="menu">...</div> <div id="contenu">...</div> <div class="spacer"></div> </div> div acer { clear: both; }[/html] La propriété "clear" permet de s'assurer qu'aucun élément n'ira se mettre à gauche ou à droite du <div>. Cela dit, dans un tel exemple il n'est pas forcément utile de mettre les 2 éléments en flottants. Si on sait d'avance celui qui sera la plus long (et qui imposera sa hauteur au bloc conteneur), on peut le laisser dans le flux normal. > [i]Les flottants sont donc un bon outil aussi bien pour placer des tableaux ou des illustrations le long des marges internes d'un texte que pour créer une mise en page multi-colonnes.[/i] Attention cependant certains navigateurs ont un peu de mal avec les flottants. C'est par exemple le cas d'Internet Explorer pour Windows qui a tendance avoir des bugs de ce genre : - http://forum.hardware.fr/forum2.php3?post=27221&cat=10 - http://www.positioniseverything.net/floatmodel.html - http://www.digital-web.com/features/feature_2003-02.shtml [u]Le positionnement absolu[/u] Un élément utilise le positionnement absolu lorsqu'il possède la propriété : [css]position: absolute;[/css] Le positionnement absolu permet de placer précisément, au pixel près, n'importe quel élément dans le document. Comme avec le positionnement relatif, on utilise "top", "bottom", "left" et "right" pour placer l'élément. Le repère de coordonnées utilisé pour le positionnement est celui du bloc conteneur [b]positionné[/bJ'insiste sur le mot "positionné" car c'est une erreur fréquente. Un élément est positionné lorsqu'il possède la propriété "position" et que celle-ci vaut, "relative", "absolute" ou "fixed". Un exemple pour mieux comprendre. Considérons le code suivant : [html]<div id="conteneur"> <div id="contenu"></div> </div> et : body { margin: 100px; } div#conteneur { width: 400px; height: 300px; } div#contenu { position: absolute; top: 0; left: 0; width: 200px; height: 150px; }[/html] Le bloc "conteneur" n'est pas positionné. Le bloc "contenu" ne va donc pas se positionner par rapport à lui mais par rapport à l'élément racine. Il va donc se retrouver tout en haut à gauche : [code] 0 0+-------+------------------+ \| \| \| \|contenu\|------+ \| +-------+ \| \| \| \| \| \| \| \| \| \| \| +-----------+ \| \| conteneur \| \| \| +--------------------------+[/code] Si on ajoute à "conteneur" la propriété "position: relative", il devient alors positionné et "contenu" se place par rapport à lui : [code] +--------------------------+ \| 0 \| \| 0+-------+---+ \| \| \| \| \| \| \| \|contenu\| \| \| \| +-------+ \| \| \| +-----------+ \| \| conteneur \| \| \| +--------------------------+[/code] Dès qu'un élément est placé absolument : - il devient un élément de type boîte (bloc) ; - il sort du flux normal. > [i]Le positionnement absolu est l'arme absolue (sans jeu de mots) car on peut se permettre de construire n'importe quel type de mise en page avec, de la plus simple à la plus complexe. Pour les designs simples je conseille toutefois de privilégier les autres formes de positionnement. Ce positionnement absolu présente toutefois un risque : celui que l'ordre de lecture des informations à l'écran ne reflète pas celle du document HTML. Etant donné que l'on peut placer les éléments n'importe où, rien n'empêcherait d'écrire dans le document HTML la conclusion d'un texte avant l'introduction et de rétablir l'ordre logique avec le positionnement absolu. Il est toujours bon de se demander comment apparaîtrait une page sans aucun style ou dans un navigateur texte car en terme d'accessibilité c'est un point important.[/i] [u]Le positionnement fixe[/u] Un élément utilise le positionnement fixe lorsqu'il possède la propriété : [css]position: fixed;[/css] Le positionnement fixe fonctionne comme le positionnement absolu sauf que l'élément ainsi positionné reste [u]attaché[/u] à la zone de visualisation. Concrètement cela empêche les éléments de se déplacer lorsqu'on fait défiler la page avec les barres de défilement. Pour les médias paginés (feuilles de papier, transparent...) l'élément est répété sur toutes lees pages. > [i]Le positionnement fixe est idéal pour réaliser des menus fixes et donc se passer des frames. Un bon exemple se trouve sur le site du W3C pour les CSS : http://www.w3.org/Style/CSS/ Gros problème : Internet Explorer pour Windows ne supporte pas ce mode de positionnement, ce qui limite, hélas, considérablement son intérêt.[/i] [u]Quelques liens pour aller plus loin[/u] - http://www.brainjar.com/css/positioning/ - http://www.blogblues.com/standards/css/position.asp - http://www.positioniseverything.net/ Merci à gm_superstar pour cet article
Fichier