J'ai simplifié ma proposition. Mais comment expliquer simplement ?
Dans l'exemple que je t'ai donné, les liens sont placés dans une liste.
La liste est maintenant placée dans un bloc (#in) positionné en relative, avec l'image en arrière-plan, pour que ce qu'il contiendra le prenne comme référence. Et donc, son coin haut-gauche représente le 0haut-0gauche.
Les liens sont positionnés en fonction des dimensions de l'image et de la position des "E n" présents dedans.
Le 1er est à 40px du haut.
Ensuite, les autres liens continuent à être placés en fonction de la position du haut de l'image.
Tous les liens sont placés à 504px du bord gauche de l'image.
Pour que les visiteurs aient droit à un peu moins de précision, j'ai donné des dimensions aux liens (width : 80px;). C'est ce qu'on peut voir si on rétablit leur arrière-plan blanc que j'avais annulé (/* background-color : #fff; */).
Tout ça donne :
Code : Tout sélectionner
#in ul li a {
display : block;
position : absolute;
left : 504px;
top : 40px;
width : 80px;
font-family : Arial, sans-serif;
font-size : 18px;
font-weight : bold;
text-align : center;
background-color : #fff;
}Les dimensions de mes liens les placent à 504px du bord gauche de l'image.
Donc, le 1er lien se trouve à 40px du haut et à 504px de la gauche des bords respectifs de l'image.
Comme tous les liens sont à 504px de la gauche, il ne me reste plus qu'à préciser pour chaque lien individuellement sa place par rapport du haut de l'image.
Et le 2e
Code : Tout sélectionner
<li><a id="in2" href="#">E 2</a></li>Code : Tout sélectionner
#in ul li a#in2 {
top : 156px;
}La page est maintenant
Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Un titre</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
#in {
position : relative;
margin-top : 16px;
margin-left : 16px;
background : #fa8341 url(http://images3.hiboox.com/images/0708/c5x375cj.gif) 0 0 no-repeat;
width : 637px;
height : 444px;
}
#in ul {
list-style : none;
margin : 0;
padding : 0;
border-left : 1px dotted #fff;
}
#in ul li {
}
#in ul li a {
display : block;
position : absolute;
left : 504px;
top : 40px;
width : 80px;
font-family : Arial, sans-serif;
font-size : 18px;
font-weight : bold;
text-align : center;
background-color : #fff;
}
#in ul li a:hover {
color : #ff8c00;
}
#in ul li a#in1 {
top : 362px;
}
#in ul li a#in2 {
top : 156px;
}
#in ul li a#in4 {
top : 294px;
}
#in ul li a#in5 {
top : 408px;
}
#in ul li a#in6 {
top : 202px;
}
#in ul li a#in7 {
top : 248px;
}
p {margin:0; padding:5px;}
</style>
</head>
<body>
<div id="conteneur">
<p>En réponse à
<a href="http://www.geckozone.org/forum/viewtopic.php?p=431232">Désordre</a>
</p>
<div id="in">
<ul>
<li><a id="in3" href="#">E 3</a></li>
<li><a id="in2" href="#">E 2</a></li>
<li><a id="in6" href="#">E 6</a></li>
<li><a id="in7" href="#">E 7</a></li>
<li><a id="in4" href="#">E 4</a></li>
<li><a id="in1" href="#">E 1</a></li>
<li><a id="in5" href="#">E 5</a></li>
</ul>
</div>
</body>
</html>Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X; fr) AppleWebKit/523.12 (KHTML, like Gecko) Safari/419.3