Flux rss
Dossiers
Ils ont besoin de votre aide
Collection CommentCaMarche.net

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.

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

Cherchez l'erreur HTML/CSS (Résolu) Bonjour, un phenomene très curieux s'est produit sur une de mes page sur celle-ci >> http://bart.wadela.free.fr/zikmu/menu256.php il y a 2 images d'affichees : le titre " Bart Wadela ... " et en dessous (positionnée par un css) un bandeau... www.commentcamarche.net/forum/affich-7747375-cherchez-l-erreur-html-css
Différence entre display:none et visibility:hidden Les deux attributs CSS display:none et visibility:hidden permettent tous deux de masquer l'affichage d'un élément en CSS dans le navigateur. Néanmoins, il existe une subtile nuance : visibility: hidden rend le bloc concerné invisible.... www.commentcamarche.net/faq/sujet-7908-difference-entre-display-none-et-visibility-hidden
DHTML - La notion de couche Qu'est-ce qu'une couche? Le DHTML est basé sur une fonctionnalité provenant de la norme 4.0 du HTML: les feuilles de style en cascade de positionnement, aussi appelée CSS-P (Cascading Style Sheets Positionning). Celles-ci permettent de définir des... www.commentcamarche.net/contents/dhtml/dhtmllayer.php3

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
Javascript - Connaître la hauteur d'un élément HTMLSi vous souhaitez connaître la hauteur (height) d'un bloc HTML en javascript, il existe deux façons selon les navigateurs : element.offsetHeight element.style.pixelHeight Ainsi, le code suivant permet d'obtenir la hauteur d'un bloc HTML... www.commentcamarche.net/faq/sujet-11739-javascript-connaitre-la-hauteur-d-un-element-html
Définir une hauteur verticale et relative à un élémentParfois, on voudrait définir une hauteur verticale à un élément. C'est simple en utilisant des valeurs fixes (en pixels pas exemple), mais c'est plus compliqué en utilisant des hauteurs relatives (en pourcentages). Ce problème est souvent... www.commentcamarche.net/faq/sujet-4713-definir-une-hauteur-verticale-et-relative-a-un-element
Réponses suivantes

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

[CSS] hover pas sur tous les éléments (Résolu)Bonjour, J'ai un tableau HTML de la forme : Titre 1Titre 2            Ligne 1Ligne 1 Ligne 2Ligne 2 Ligne 3Ligne 3 Et j'ai ce CSS : tr:hover{ background-color : yellow; } Mais... www.commentcamarche.net/forum/affich-7540321-css-hover-pas-sur-tous-les-elements
De l'absolu dans du relatif en css (Résolu)Bonjour, Est-il possible de d'avoir une balise div A qui est en relatif (en css) par rapport a BODY et de mettre en absolu une balise B qui est dans la balise A. Sachant que le point 0 est celui de la balise A ? c'est a dire que si la balise... www.commentcamarche.net/forum/affich-8514916-de-l-absolu-dans-du-relatif-en-css
[CSS]problème avec les puces d'une liste (Résolu)Bonjour, j'ai voulu mettre une image comme puce pour une liste. J'ai essayé les 2 méthodes : -avec background-image: #gauche_bas dd ul { list-style-type:none; background-image:url(puce.gif); background-repeat:no-repeat; background... www.commentcamarche.net/forum/affich-3352827-css-probleme-avec-les-puces-d-une-liste
Réponses suivantes

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

Télécharger Fresh DiagnoseFresh Diagnose est un utilitaire gratuit permettant d'analyser les éléments matériels (hardware) de votre ordinateur, tels que le CPU, le disque dur, la carte graphique ou encore la carte-mère. De plus, il permet de tester les performances grâce à... www.commentcamarche.net/telecharger/telecharger-34055342-fresh-diagnose
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éponses suivantes

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

TNB CSSP1CSSP 1, Filaire, Cable 1.1 m, Bande passante écouteurs:20-20000 Hz, Divers:Impedance: 32 Ohms @ 1 Khz, Water resistant, Longueur du cable:1.1 m, Sensibilité:100 dB/1mW, Wireless Technology:Filiaire, Divers:Impedance: 32 Ohms @ 1 Khz, Water... www.commentcamarche.net/guide-achat/tnb-cssp1-612115-fiche-technique
Réponses suivantes

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

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
Les unités dans les feuilles de style (CSS)Les boîtes Les balises DIV définissent des blocs d'éléments. Il s'agit d'une structure privilégiée pour définir des boîtes telles que des menus ou des encarts. Le standard CSS propose un certain nombre de propriétés permettant de contrôler... www.commentcamarche.net/contents/css/css-bordures-boites.php3
Topologie des réseauxQue signifie le terme « topologie » Un réseau informatique est constitué d'ordinateurs reliés entre eux grâce à des lignes de communication (câbles réseaux, etc.) et des éléments matériels (cartes réseau, ainsi que d'autres équipements permettant... www.commentcamarche.net/contents/initiation/topologi.php3
Réponses suivantes