Problème de position par rapport a une image

leditvalentin · 17 Mai 2007

Bonjour,

Je suis en train de créer un site et j'ai un petit souci.

En effet j'ai crée mon acceuil en css avec un effet de de hover sur les images du menu.

Jusque la pas de problème.

Mais la ou sa se complique c'est que ma deuxieme partie, d'autres liens je n'arrive pas a les possitionner par rapport a l'image de fond du menu !

Voici le site:

http://perso.orange.fr/leditvalentin007/maman/

Comme vous pouvez le voir j'ai essayer de mettre un layer (carré bleu) et impossbile de le positionner par rapport a l'image de fond !

Je l'ai mis en absolute mais si je le met en relative l'alignement bouge tout le temps en fonction de la résolution de l'écran alors que pour le menu pas de problème.

Voici les codes sources et merci pour votre aide:

HTML

<link rel="stylesheet" media="screen" type="text/css" href="site.css" />
 </head>


<body>
 <ul id="iconmenu">
  <li id="panel1"><a href="classe.html"></a></li>
  <li id="panel2"><a href="#"></a></li>
  <li id="panel3"><a href="#"></a></li>
  <li id="panel4"><a href="#"></a></li>
  <li id="panel5"><a href="#"></a></li>
  <li id="panel6"><a href="#"></a></li>

</ul>

<div id="Layer1" style="position: absolute; margin: 3% auto; padding: 3px; width: 1000px; height: 500px; z-index:1;
clip: rect(0 100 100 10); background-color: #3300FF; visibility: visible;">
</div>

CSS

#iconmenu {position: relative; margin: 3% auto; padding: 3px; width: 1000px; height: 500px; background: url(img/index/bgimg.png) no-repeat;}
#iconmenu li {width: 155px; height: 254px; position: absolute; top: 2px;  0 0 no-repeat; display: block; list-style: none;}
#iconmenu a {width: 155px; height: 254px; display: block;}


#iconmenu #panel1 {background: url(img/index/1.jpg) no-repeat; left: 20px; top: 20px;}
#iconmenu #panel2 {background: url(img/index/2.jpg) no-repeat; left: 178px; top: 20px;}
#iconmenu #panel3 {background: url(img/index/3.jpg) no-repeat; left: 336px; top: 20px;}
#iconmenu #panel4 {background: url(img/index/4.jpg) no-repeat; left: 494px; top: 20px;}
#iconmenu #panel5 {background: url(img/index/5.jpg) no-repeat; left: 652px; top: 20px;}
#iconmenu #panel6 {background: url(img/index/6.jpg) no-repeat; left: 810px; top: 20px;}



#iconmenu #panel1 a:hover {background: url(img/index/1) -0px -0px no-repeat;}
#iconmenu #panel2 a:hover {background: url(img/index/2) -0px -0px no-repeat;}
#iconmenu #panel3 a:hover {background: url(img/index/3) -0px -0px no-repeat;}
#iconmenu #panel4 a:hover {background: url(img/index/4) -0px -0px no-repeat;}
#iconmenu #panel5 a:hover {background: url(img/index/5) -0px -0px no-repeat;}
#iconmenu #panel6 a:hover {background: url(img/index/6) -0px -0px no-repeat;}

Connexion

Problème de position par rapport a une image

Sujets conseillés

leditvalentin

Veuillez vous connecter pour commenter

Parcourir

Activité