Bonjour à tous,
Je développe un site dans lequel j'ai une menu très simple sur la gauche.
c'est une liste :
J'utilise ensuite la technique de porte coulissantes pour l'habiller (enfin je crois)
Sous Firefox, Safari c'est nickel, mais sous IE6 PC, y'a un truc de fou.
Les "boutons" se décalent tous vers le bas et l'écrat est de plus en plus important à mesure que je décend dans le menu.
Je ne peux mettre d'exemple en ligne, c'est un site évenementiel pour l'instant confidentiel.
AU SECOURS !!!
merci à toutes vos âmes de bon samaritain.
Modifié par ernstein (11 Mar 2005 - 17:19)
Je développe un site dans lequel j'ai une menu très simple sur la gauche.
c'est une liste :
<ul id="menu">
<li id="active01"><a href="rub01.asp" title="News" accesskey="1" tabindex="1"><span>News</span></a></li>
<li id="rub02"><a href="rub02.asp" title="Programme" accesskey="2" tabindex="2"><span>Programme</span></a></li>
<li id="rub03"><a href="rub03.asp" title="Réservation" accesskey="3" tabindex="3"><span>Réservation</span></a></li>
<li id="rub04"><a href="rub04.asp" title="Fan Club Officiel" accesskey="4" tabindex="4"><span>Fan Club Officiel</span></a></li>
<li id="rub05"><a href="rub05.asp" title="Produits exclusifs" accesskey="5" tabindex="5"><span>Produits exclusifs</span></a></li>
<li id="rub06"><a href="rub06.asp" title="Concours de costumes" accesskey="6" tabindex="6"><span>Concours de costumes</span></a></li>
<li id="rub07"><a href="rub07.asp" title="Festival du film de fans" accesskey="7" tabindex="7"><span>Festival du film de fans</span></a></li>
<li id="rub08"><a href="rub08.asp" title="Espace partenaires" accesskey="8" tabindex="8"><span>Espace partenaires</span></a></li>
<li id="rub09"><a href="rub09.asp" title="Espace presse" accesskey="9" tabindex="9"><span>Espace presse</span></a></li>
<li id="rub10"><a href="rub10.asp" title="Contacts" accesskey="10" tabindex="10"><span>Contacts</span></a></li>
<img src="images/flags.jpg" title="Changement de langue" alt="Changement de langue" usemap="#flags">
<map name="flags" id="flags">
<area shape="rect" alt="Español" title="Español" coords="97,0,121,27" href="/rub01.asp?lan=sp" />
<area shape="rect" alt="English" title="English" coords="59,0,83,27" href="/rub01.asp?lan=uk" />
<area shape="rect" alt="Français" title="Français" coords="21,0,44,27" href="/rub01.asp?lan=fr" />
</map>
</ul>
J'utilise ensuite la technique de porte coulissantes pour l'habiller (enfin je crois)
/* MENU */
#menu span {display:none;}
#menu {
background-image: url("images/menu_fr.jpg");
background-repeat:no-repeat;
height:240px;
width:140px;
margin:0;
padding:0;
position:absolute;
z-index:20;
top:341px;
list-style:none;
left:0;
}
#menu li {
height:24px;
text-align:right;
}
#menu a {
height:24px;
width:140px;
display:block;
}
#rub01 {margin:0; padding:0; top:0; height:24px;}
#rub02 {margin:0; padding:0; top:24px; height:24px;}
#rub03 {margin:0; padding:0; top:48px; height:24px;}
#rub04 {margin:0; padding:0; top:72px; height:24px;}
#rub05 {margin:0; padding:0; top:96px; height:24px;}
#rub06 {margin:0; padding:0; top:120px; height:24px;}
#rub07 {margin:0; padding:0; top:144px; height:24px;}
#rub08 {margin:0; padding:0; top:168px; height:24px;}
#rub09 {margin:0; padding:0; top:192px; height:24px;}
#rub10 {margin:0; padding:0; top:216px; height:24px;}
#rub01 a:hover {background: transparent url("images/menu_fr.jpg") -140px 0 no-repeat;}
#rub02 a:hover {background: transparent url("images/menu_fr.jpg") -140px -24px no-repeat;}
#rub03 a:hover {background: transparent url("images/menu_fr.jpg") -140px -48px no-repeat;}
#rub04 a:hover {background: transparent url("images/menu_fr.jpg") -140px -72px no-repeat;}
#rub05 a:hover {background: transparent url("images/menu_fr.jpg") -140px -96px no-repeat;}
#rub06 a:hover {background: transparent url("images/menu_fr.jpg") -140px -120px no-repeat;}
#rub07 a:hover {background: transparent url("images/menu_fr.jpg") -140px -144px no-repeat;}
#rub08 a:hover {background: transparent url("images/menu_fr.jpg") -140px -168px no-repeat;}
#rub09 a:hover {background: transparent url("images/menu_fr.jpg") -140px -192px no-repeat;}
#rub10 a:hover {background: transparent url("images/menu_fr.jpg") -140px -216px no-repeat;}
#active01 a {background: transparent url("images/menu_fr.jpg") -280px 0 no-repeat;}
#active02 a {background: transparent url("images/menu_fr.jpg") -280px -24px no-repeat;}
#active03 a {background: transparent url("images/menu_fr.jpg") -280px -48px no-repeat;}
#active04 a {background: transparent url("images/menu_fr.jpg") -280px -72px no-repeat;}
#active05 a {background: transparent url("images/menu_fr.jpg") -280px -96px no-repeat;}
#active06 a {background: transparent url("images/menu_fr.jpg") -280px -120px no-repeat;}
#active07 a {background: transparent url("images/menu_fr.jpg") -280px -144px no-repeat;}
#active08 a {background: transparent url("images/menu_fr.jpg") -280px -168px no-repeat;}
#active09 a {background: transparent url("images/menu_fr.jpg") -280px -192px no-repeat;}
#active10 a {background: transparent url("images/menu_fr.jpg") -280px -216px no-repeat;}
Sous Firefox, Safari c'est nickel, mais sous IE6 PC, y'a un truc de fou.
Les "boutons" se décalent tous vers le bas et l'écrat est de plus en plus important à mesure que je décend dans le menu.
Je ne peux mettre d'exemple en ligne, c'est un site évenementiel pour l'instant confidentiel.
AU SECOURS !!!
merci à toutes vos âmes de bon samaritain.
Modifié par ernstein (11 Mar 2005 - 17:19)