leditvalentin Posté 17 Mai 2007 Partager Posté 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;} Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant