bonjour a tous voila mon probleme, jai un menu en CSS fait pour faire un double rollover image, seulement la contrainte est qu'il faut que je mette le meme margin top au 5 éléments du menu, du coup je dois leur attribuer un width different et lesmettre sur des z-index pour définir la priorité des calques! mais IE (produit de microbidule) pose probleme alors que firefox affiche tout correctement
voici la page en question :
C'est ICI
voilci mon CSS :
*{ margin:0; padding:0; } html,body{ background: url(img-fonds/fond-accueil.gif) no-repeat; margin:0px; padding:0px; } a:hover { background: none; } #logo{ padding:0px; position:absolute; background: url(img-accueil/logo_adimages.gif) no-repeat; height:257px; width:355px; margin-top:-10px; margin-left:80px; } a#contact{ position:absolute; background: url(./images/contact-a.gif) no-repeat; height:43px; width:260px; margin-top:451px; margin-left:404px; text-decoration:none; } a#contact:hover{ background: url(./images/contact-b.gif) no-repeat; } #toute_com{ position:absolute; background: url(./img-accueil/toute_com.gif) no-repeat; height:69px; width:559px; margin-top:494px; margin-left:255px; } ul#menu_ad li{ /*POUR le menu*/ list-style-type:none; display:inline; position:absolute; } ul#menu_ad li a { position:absolute; float:left; text-indent:-10000px; width: 260px; } #nav{ padding: 0; position:absolute; } #nav ul{ position:absolute; margin:0; padding:0; list-style: none; } #nav li { position:absolute; background-repeat: no-repeat; } #nav a { /* if background is on a:link IE6 won't display properly */ position:absolute; background-repeat: no-repeat; /* height and or width in here will stop main image change in IE5 */ color: yellow; font-family: "Arial Black", sans-serif; text-align: center; width: 124px; height:120px; /*height or width in here will stop main image change in IE5 Win luckily, line-height is OK! - hidden from IE5 Mac see below a must be block to display background-image in IE Win - but also needs to be hidden from IE5 Mac see below */ } #nav a/*Comment hack to hide this from IE5 - needed to extend link over button image in IE6 */{ height:100px; width: 122px; position:absolute; } #nav a img { position:absolute; width: 414px; /* IE5 Win can't dynamically change size - Adon't use 0px to hide */ height: 198px; float:left; border: 0 none; margin-top:60px; visibility: hidden; margin-left:500px; top:-300px; left:0px; } #nav a:hover img { position:absolute; visibility: visible; background: none; } /* commented backslash hack v2 - hide rules from IE5 Mac \*/ #nav a { position:absolute; padding: 0; display: block; } #nav li { position:absolute; margin-top:0; margin-bottom:0; width: 80px; } /* end hack */ a#menu1{ z-index:5; position:absolute; padding: 0; height:123px; width:255px; margin-top:305px; background-image: url(img-navig/bout-siteweb-a.gif); margin-left:0px; background-position:right; } a#menu2{ z-index:4; position:absolute; height:123px; width:438px; margin-top:305px; background-image: url(img-navig/bout-studio-a.gif); margin-left:0px; background-position:right; } a#menu3{ z-index:3; position:absolute; height:123px; width:597px; margin-top:305px; background-image: url(img-navig/bout-enseignes-a.gif); margin-left:0px; background-position:right; } a#menu4{ z-index:2; position:absolute; height:123px; width:757px; margin-top:305px; background-image: url(img-navig/bout-imprimerie-a.gif); margin-left:0px; background-position:right; } a#menu5{ z-index:0; position:absolute; height:123px; width:935px; margin-top:305px; margin-left:0px; background-image: url(img-navig/bout-conseils-a.gif); background-position:right; } a#menu1:hover{ background-image: url(img-navig/bout-siteweb-b.gif); } a#menu2:hover{ background-image: url(img-navig/bout-studio-b.gif); } a#menu3:hover{ background-image: url(img-navig/bout-enseignes-b.gif); } a#menu4:hover{ background-image: url(img-navig/bout-imprimerie-b.gif); } a#menu5:hover{ background-image: url(img-navig/bout-conseils-b.gif); } #bienvenue{ background-image: url(img-navig/bloc-texte-bienvenue.gif); width: 414px; height: 198px; position: absolute; border: 0 none; margin-top:60px; margin-left:500px; }
dsl pour la longueur mais je ne sais pas d'ou vien mon probleme ! aidez moiiii svpp
