Positionner des éléments grâce aux CSS

Il est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises <SPAN> et <DIV>.
Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse et montre encore quelques problèmes de compatibilité.

Positionnement relatif et absolu

Le positionnement absolu {position: absolute} se détermine par rapport au coin supérieur gauche de la fenêtre du navigateur. Les coordonnées d'un point s'expriment alors de haut en bas (top) et de gauche à droite (left).

La position relative se fait par rapport à d'autres éléments, comme une image, c'est-à-dire que les éléments contenus dans la balises DIV ou SPAN seront positionnés à la suite des éléments HTML après lesquels ils se trouvent.

Positionner du texte

Positionnons le texte "Comment ça marche?" à 80 pixels du haut de la fenêtre et à 100 pixels à gauche de la fenêtre :

<HTML>
<BODY>
<SPAN style="position: absolute; top: 80 px; left: 100 px;">

Comment ça marche?
</SPAN>
</BODY>
</HTML>

Il y a d'autres façons de procéder, en voici une :

<HTML>
<HEAD>
<STYLE>
<!--
.test{position: absolute; top: 80px; left: 100px; color: black; font-size: x-large}
-->
</STYLE>
</HEAD>
<BODY>
<DIV class=test>
Comment ça marche?
</DIV>
</BODY>
</HTML>

Positionner une image

Positionnons l'image "test.jpg" à 80 pixels du haut de la fenêtre et à 100 pixels à gauche de la fenêtre (l'image fait 103x61) :

<HTML>
<BODY>
<SPAN style="position: absolute; top: 80 px; left: 100 px;width: 103px; height: 61px">
<IMG SRC="test.jpg" >
</SPAN>
</BODY>
</HTML>

Il est important de spécifier la taille de l'image avec les feuilles de style, pour des raisons de non-compatibilité des navigateurs.

Superposer des éléments

Superposons le texte "Comment ça marche?" à l'image "test.jpg":

<HTML>
<BODY>
<SPAN style="position: absolute; top: 30 px; left: 100px;width: 103px; height: 61px">
<IMG SRC="test.jpg" >
</SPAN>
<SPAN style="position: absolute; top: 50 px; left: 100 px;">
Comment ça marche?
</SPAN>
</BODY>
</HTML>

Il est ainsi possible de superposer des éléments de texte, ainsi que des images.

Dernière modification le mardi 14 octobre 2008 à 17:40:30.Ce document intitulé « Positionner des éléments grâce aux CSS » issu de Comment Ça Marche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.

Précédent Boîtes et bordures

Suivant Propriétés CSS

Problème css : Div de positionnement Bonjour à tous, Je découvre les joies des CSS et plus particulièrement au niveau du positionnement. Je travaille avec dreamweaver mx 2004 que je trouve sympa pour dessiner les "calques" ...enfin les div :-) . Voici mon problème : j'ai fait 5 div :... www.commentcamarche.net/forum/affich-2374204-probleme-css-div-de-positionnement

La syntaxe des style (CSS) Définition d'un style La définition d'un style se fait à l'aide de règles en texte simple permettant de décrire l'aspect des éléments de la page. Une règle CSS est caractérisée par deux principaux éléments : Un sélecteur de balises, permettant de... www.commentcamarche.net/contents/css/csssyntax.php3

CSS - Position cadre DIV Bonjour à tous Bonjour, voici mon probleme concernant le positionnement des différents calques dans une page web Ma configuration est la suivante div#global{ width : 100 % height : 600 px; } .header { (barre de menu) width : 100%; height : 20px; }... www.commentcamarche.net/forum/affich-4640316-css-position-cadre-div

Résultats pour Positionner des éléments grâce aux CSS

Javascript - Modifier la hauteur (height) d'un élément HTMLPour modifier la hauteur d'un élément HTML en javascript, il suffit d'utiliser sa propriété de style "height". Pour cela vous pouvez y faire référence de la manière suivante : Si vous souhaitez connaître la hauteur (height) d'un bloc HTML, il... www.commentcamarche.net/faq/sujet-11740-javascript-modifier-la-hauteur-height-d-un-element-html

Changer l'aspect du curseur en CSSLa propriété cursor permet de changer l'aspect du curseur sur un élément d'une page web. Le client affichera automatiquement le curseur de son ordinateur qui correspond au type de curseur que vous aurez choisi. Exemples Liste des attributs... www.commentcamarche.net/faq/sujet-9119-changer-l-aspect-du-curseur-en-css

[Gimp][Retouche photo] Supprimer des éléments d'une imageL'outil de clonage est utile pour supprimer des éléments d'une photo. Par exemple pour éliminer quelqu'un d'une photo, supprimer un avion dans le ciel ou les défauts d'une photo. Cet outil est présent dans Photoshop mais également dans de nombreux... www.commentcamarche.net/faq/sujet-3228-gimp-retouche-photo-supprimer-des-elements-d-une-image

Résultats pour Positionner des éléments grâce aux CSS

Positionnement du footer [CSS]Bonjour, voila je débute en Css, et je bloque sur quelque chose : http://sgtcookie.free.fr voici mon site, mon probleme étant que le footer remonte tout le temp, j'ai tout essayer de modifier mais j'ai pas reussi a faire en sorte qu'il reste en bas.... www.commentcamarche.net/forum/affich-4535920-positionnement-du-footer-css

[CSS] Aligner un contenant au centre (Résolu)Bonjour. Quelqu'un d'entre vous connaitrait-il la propriété css, si elle existe, qui permet d'aligner un contenant (comme une table ou un div par exemple) au centre ? Pour être plus claire, je cherche la propriété css qui remplace le align="center"... www.commentcamarche.net/forum/affich-719745-css-aligner-un-contenant-au-centre

Astuce pour afficher/masquer un div en cssBonjour, Voilà j'ai récemment découvert une petite astuce en bidouillant mon code CSS, afin que celui-ci m'affiche du texte quand je survole un lien. J'avais déjà cherché sur Google mais comme je n'ai entendu parlé de cette astuce nulle part, je me... www.commentcamarche.net/forum/affich-11996886-astuce-pour-afficher-masquer-un-div-en-css

Résultats pour Positionner des éléments grâce aux CSS

Télécharger Adobe Photoshop ElementsAdobe Photoshop Elements est différent de son ainé Photoshop du fait qu’il est destiné à satisfaire le grand public contrairement à ce dernier qui réclame la prise en main d’un professionnel. Parfait à l’écran et sur le papier, ce logiciel a tout pour... www.commentcamarche.net/telecharger/telecharger-34056743-adobe-photoshop-elements

Résultats pour Positionner des éléments grâce aux CSS

Feuilles de style - CSSPrésentation des feuilles de style Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitulée « Cascading StyleSheets » (feuilles de style en cascade), notée CSS. Le principe des... www.commentcamarche.net/contents/css/cssintro.php3

Les classes de style (CSS)Les classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des... www.commentcamarche.net/contents/css/cssclass.php3

Les éléments de transformation XSLLes éléments de transformation Les éléments de transformations permettent de sélectionner et effectuer des opérations sur les éléments du document XML. Leur syntaxe est la suivante : Remarquez la présence du / indiquant que... www.commentcamarche.net/contents/xml/xmltransform.php3

Résultats pour Positionner des éléments grâce aux CSS