Aide - Recherche - Membres - Calendrier
Version complète : problème avec un menu CSS "rollover lists"
Forum Développeur - Administration serveur, programmation et base de données > Programmation > xHTML et CSS
oli ola
Bonjour,

J'essaie de réaliser un menu vertical à l'aide d'une CSS.
Le but est de mettre un fond qui représente un boutton et qui change de couleur en rollover.

Voici ce que ca donne:
http://www.mobiletoken.com/com/testoli

Mon problème est qu'il se présente bien sous Firefox mais pas sur IE. Il n'est pas centré quelque soit la technique que j'utilise ( des left-margin, des left-padding, des div align=center...)

Voici le code que j'ai employé:

HTML

PHP


<div id="subnav" align="center">
<ul>
<li><a href="#">mt pac</a></li>
<li><a href="#">mt pac T&T </a></li>
<li><a href="#">mt vendito</a></li>
<li><a class="currentsub" href="#">mt celero</a></li>
</ul>
</div>


CSS

PHP


#subnav{
position:absolute;
background-color:#FFFFFF;
width:220px;
height:214px;
margin-top:30px;
margin-left:40px;
}

#subnav ul
{
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;

}

#subnav li
{
margin-top:4px;

}


#subnav a {
display: block;
background-image:url(../images/subnav_normal.jpg);
background-repeat:no-repeat;
width: 9.4em;
height: 3em;
padding: .2em .8em;
text-decoration: none;
}

#subnav a:hover
{
background-image:url(../images/subnav_blue.jpg);
color: #FFF;
}

#subnav ul li a.currentsub, #nav ul li a.currentsub:visited {
background-image:url(../images/subnav_blue.jpg);
color: #FFF;
}


Y'aurait-il un moyen de régler ce problème ou une méthode plus adaptée pour réaliser ce genre de menu?

Merci!
neolao
ton width sur le #subnav est de 220px, c'est trop grand, diminue le.

IE va centrer, mais comme la zone que tu indiques est plus grande que ce qui est disponible, eh ben ça va se décaler sur la droite
oli ola
et ben ca marche! icon_mrgreen.gif

merci beaucoup neolao! icon_biggrin.gif
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.
Invision Power Board © 2001-2008 Invision Power Services, Inc.