Bonjour, je souhaiterais créer un site avec un menu déroulant.
J'ai suivi un tutoriel pour créer le menu, (je ne me rappelle plus l'adresse du site sur lequel j'ai pu prendre le code), j'ai personnalisé le code en mettant les parties du menu en texte sur images, les sous menus en orange sur un fond blanc... enfin bref, voici mon problème:
quand je teste mon menu déroulant sous Mozilla Firefox, c'est nickel. Par contre sous Internet Explorer 7 et les versions antérieures, les sous-menus subissent un gros décalage à droite. Le site n'est pas encore en ligne et est en construction.
Voici un screenshot:
http://img19.imageshack.us/img19/3973/screenshotwug.png
Voici mes codes:
Code HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>La Cawotte Cwue</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="test.css" />
<script language="JavaScript" type="text/javascript">
function MM_findObj(n, d) { //v4.0
var p,i,x;
if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document;
n=n.substring(0,p);
}
if(!(x=d[n])&&d.all) x=d.all[n];
for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
function changestyle(couche, style) {
if (!(layer = MM_findObj(couche))) return;
layer.style.visibility = style;
}
</script>
</head>
<body>
<!-- L'en-tête -->
<div id="en_tete">
</div>
<div id="menu"><ul id="nav">
<li class="special"><a href="#" class="sans_liste">Accueil</a></li>
<li class="special"><a href="#" class="liste">Classes</a>
<ul>
<li><a href="#" class="ndll">Ecaflip</a></li>
<li><a href="#" class="ndll">Sadida</a></li>
<li><a href="#" class="ndll">Eniripsa</a></li>
<li><a href="#" class="ndll">Osamodas</a></li>
<li><a href="#" class="ndll">Iop</a></li>
<li><a href="#" class="ndll">Enutrof</a></li>
<li><a href="#" class="ndll">Crâ</a></li>
<li><a href="#" class="ndll">Sram</a></li>
<li><a href="#" class="ndll">Féca</a></li>
<li><a href="#" class="ndll">Xélor</a></li>
<li><a href="#" class="ndll">Sacrieur</a></li>
<li><a href="#" class="ndllfin">Pandawa</a></li>
</ul>
</li>
<li class="special"><a href="#" class="liste">Fun</a>
<ul>
<li><a href="#" class="ndll">Fan-fics</a></li>
<li><a href="#" class="ndll">Blagues</a></li>
<li><a href="#" class="ndll">Screens</a></li>
<li><a href="#" class="ndllfin">...</a></li>
</ul>
</li>
<li class="special"><a href="#" class="sans_liste">Us</a></li>
<li class="special"><a href="#" class="sans_liste">Forum</a></li>
<li class="special"><a href="#" class="liste">Liens</a>
<ul>
<li><a href="#" class="ndll">lien1</a></li>
<li><a href="#" class="ndll">lien2</a></li>
<li><a href="#" class="ndllfin">lien3</a></li>
</ul>
</li>
<li class="special"><a href="#" class="liste">Bonus</a>
<ul>
<li><a href="#" class="ndll">bonus1</a></li>
<li><a href="#" class="ndll">bonus2</a></li>
<li><a href="#" class="ndll">bonus3</a></li>
<li><a href="#" class="ndll">bonus4</a></li>
<li><a href="#" class="ndllfin">bonus5</a></li>
</ul>
</li>
<li class="special"><a href="#" class="sans_liste">Contact</a></li>
</div>
<div id="corps">
<img src="http://img4.imageshack.us/img4/9826/debutp.png" alt="Image" class="img"/>
<img src="http://img19.imageshack.us/img19/8074/accueiiiil.png" alt="bannière_du_dessous_dans_l_accueil" class="img"/>
<p>Bienvenue dans le potager de La Cawotte Cwue! =w=<br/></p>
</body>
</html>
Code CSS:
body
{
width: 790px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background: #3a261b;
}
/* L'en-tête */
#en_tete
{
width: 791px;
height: 264px;
background-image:url("http://img22.imageshack.us/img22/2892/banniereu.png");
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
margin-top:0;
}
#menu
{
margin-top: 5px;
position: relative; /* on positionne le conteneur */
margin-left: auto;
margin-right: auto;
width: 790px;
text-align: left;
}
#nav, #nav ul { /* toutes les listes */
padding: 0;
margin: 0;
list-style: none;
line-height: 40px;
text-align : center;
font-size: 18px;
color:#000;
font-family:"Eras Demi ITC","Eras Light ITC","Arial Black",serif;
}
#nav a {
display: block;
width: 90px;
color:#ff8800;
font-family:"Eras Demi ITC","Eras Light ITC","Arial Black",serif;
text-decoration:none;
}
#nav .liste a, #nav .sans_liste a
{
font-family:"Eras Demi ITC","Eras Light ITC","Arial Black",serif;
font-size: 18px;
}
#nav .ndll, #nav .ndllfin
{
font-family:"Eras Demi ITC","Eras Light ITC","Arial Black",serif;
font-size: 12px;
}
#nav .ndll:hover
{
background: #ff8800;
color: #fff;
}
#nav .ndllfin:hover
{
background: url("http://img21.imageshack.us/img21/147/menuhorlihov.png");
color:#fff;
}
#nav li { /* tous les items de liste */
float: left;
width: 90px; /* largeur obligatoire, sinon opera devient fou */
}
#nav li ul { /* listes de deuxième niveau */
position: absolute;
width: 90px;
height:40px;
left: -999em; /* on met left plutôt que display pour cacher les menus parce que display: none n'est pas lu par les lecteurs d'écran */
}
#nav li:hover ul, #nav li .sfhover ul
{ /* listes imbriquées sous les items de listes survolés */
width:90px;
left: auto;
list-style-position: inside;
}
#nav .sans_liste,#nav .liste
{
background:url("http://img21.imageshack.us/img21/3553/menuhor.png");
margin: 0px, 3px;
font-family: "Eras Demi ITC", "Eras Light ITC", "Arial Black", serif.
}
#nav .ndll
{
background:#fff;
width:auto;
height:auto;
}
#nav .ndllfin
{
background: url("http://img21.imageshack.us/img21/4197/menuhorli.png");
width:auto;
height:auto;
}
#nav .sans_liste:hover, #nav .liste:hover
{
color: #fff
}
#nav .sans_liste:hover
{
background: url("http://img17.imageshack.us/img17/2307/imagemenu2.png")
}
#nav .liste:hover
{
background: url("http://img17.imageshack.us/img17/6606/imagemenu.png");
}
#nav .special
{
margin: 4px;
}
/*Le corps! =) */
#corps
{
background: #fff;
width:790px;
margin-top: 70px;
}
p
{
font-family: "Eras Light ITC", serif;
color: #000;
font-size: 18px;
padding: 40px;
text-align: center;
}
img
{
border: none;
}
.img
{
display: block;
border: none;
}Configuration: Windows Vista
Firefox 3.0.8
