Sujet Précédent Sujet Suivant

[CSS/Javascript] Décalage des sous-menus

Fermé
Zdou Messages postés 3 Date d'inscription vendredi 17 avril 2009 Statut Membre Dernière intervention 19 avril 2009 - 17 avril 2009 à 19:20
oloufemi Messages postés 20 Date d'inscription dimanche 22 octobre 2006 Statut Membre Dernière intervention 30 juin 2011 - 28 juil. 2009 à 02:34
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;
}

6 réponses

Réponse 1 / 6
je_pas_sur
18 avril 2009 à 13:36
http://www.google.com/url?sa=U&start=4&q=http://peutetreunereponse.over-blog.com/...
ca peut aider
0
Réponse 2 / 6
Zdou Messages postés 3 Date d'inscription vendredi 17 avril 2009 Statut Membre Dernière intervention 19 avril 2009
19 avril 2009 à 00:19
Non...
Je ne suis pas sur Over-Blog.
J'ai déjà choisi un hébergeur, mais ce n'est pas ce que je cherche.
0
Réponse 3 / 6
math 2000 Messages postés 2579 Date d'inscription dimanche 9 septembre 2007 Statut Membre Dernière intervention 7 mai 2016 404
19 avril 2009 à 08:54
tu peux trafiquerdes truxc avec des margin-left :dans une feuille de style que pour ie
sinon tu as ça
un menu dépilant compatible ie6
http://bormat2.free.fr/wordpress4/
0
Réponse 4 / 6
Zdou Messages postés 3 Date d'inscription vendredi 17 avril 2009 Statut Membre Dernière intervention 19 avril 2009
19 avril 2009 à 15:32
Je ne sais pas utiliser de feuille de style uniquement pour IE.
C'est justement ce que je souhaiterais, tant que cela décale mon menu correctement.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
math 2000 Messages postés 2579 Date d'inscription dimanche 9 septembre 2007 Statut Membre Dernière intervention 7 mai 2016 404
19 avril 2009 à 15:37
regarde mon code
voici ma feuille de style
http://bormat2.free.fr/menu-css
et le code html 
<div class="menu1"><ul>
<li><a class="tr" href="http://bormat2.free.fr/wordpress4/">menu déroulant<!--[if gte IE 7]><!--></a><!--<![endif]--><table><tbody><tr><td>
<ul>
<li><a href="http://bormat2.free.fr/sss.html">menu dépliant</a></li>
<li><a href="http://bormat2.free.fr/wordpress4/">menu déroulant</a></li>
</ul></td></tr></tbody></table><!--[if lte IE 6]></a><![endif]--></li>

</ul>
<ul>
<li><a class="tr" href="http://bormat2.free.fr/wordpress4/">menu déroulant css <!--[if gte IE 7]><!--></a><!--<![endif]-->
<table>
<tbody>
<tr>
<td>

<ul>
<li><a href="http://bormat2.free.fr/wordpress4/">menu déroulant</a></li>
<li><a href="http://bormat2.free.fr/wordpress4/">menu dépliant</a></li>
<li><a href="http://club.doctissimo.fr/mechan/">mechan</a></li>
</ul>

</td>
</tr>
</tbody>
</table>
<!--[if lte IE 7]></a><![endif]--></li>
</ul>
</div>


tu n'a plus qu'a adapter les couleurs et les images
0
Réponse 6 / 6
oloufemi Messages postés 20 Date d'inscription dimanche 22 octobre 2006 Statut Membre Dernière intervention 30 juin 2011
28 juil. 2009 à 02:34
Ton probleme est il résolu?
Sinon essaie de remplacer cette partie du css par:

#nav li:hover ul, #nav li .sfhover ul
{ /* listes imbriquées sous les items de listes survolés */
width:90px;
left: 0;
list-style-position: inside;
}

Si, cela continue a merder, tu peux construire un nouveau menu du genre avec les fonctions intégrées dans dreamweaver; il suffira apres de modifier les backgrounds.
0

Discussions similaires

Décalage son et image sur YouTube ?
Rubik4s -
Kybla -

7 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Décalage horaire sur Whatsapp
Nannie -
VincentVoltaCCM -

3 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses