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

Zdou Messages postés 3 Date d'inscription Statut Membre Dernière intervention -
oloufemi Messages postés 20 Date d'inscription Statut Membre Dernière intervention - 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>


<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;
}

Afficher la suite

A voir également:

[CSS/Javascript] Décalage des sous-menus
Telecharger javascript - Télécharger - Langages
Javascript void 0 c'est quoi ✓ - Forum Réseaux sociaux
Décalage son image tv orange fibre ✓ - Forum Cinéma / Télé
Iptv decalage son image ✓ - Forum Gravure
Javascript echo ✓ - Forum PHP

6 réponses

Réponse 1 / 6

je_pas_sur

http://www.google.com/url?sa=U&start=4&q=http://peutetreunereponse.over-blog.com/...
ca peut aider

Réponse 2 / 6

Zdou Messages postés 3 Date d'inscription Statut Membre Dernière intervention

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.

Réponse 3 / 6

math 2000 Messages postés 2605 Date d'inscription Statut Membre Dernière intervention 405

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/

Réponse 4 / 6

Zdou Messages postés 3 Date d'inscription Statut Membre Dernière intervention

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.

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

Posez votre question

Réponse 5 / 6

math 2000 Messages postés 2605 Date d'inscription Statut Membre Dernière intervention 405

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

Réponse 6 / 6

oloufemi Messages postés 20 Date d'inscription Statut Membre Dernière intervention

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.

Discussions similaires

java script error in the main process

Smart IPTV décalage de son

Décalage son et image sur YouTube ?

Javascript Arrondi à 2 chiffres après la virgule

recopier une formule sans décalage

Votre réponse

Discussions similaires