High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

Rechercher : dans
Par :

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

Dernière réponse le 28 jui 2009 à 02:34:39 Zdou, le 17 avr 2009 à 19:20:13 
 Signaler ce message aux modérateurs

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

Meilleures réponses pour « [CSS/Javascript] Décalage des sous menus » dans :
Que peut faire le web pour vous ? VoirLe "web", ce sont les pages HTML affichées dans votre navigateur. Elles ont évolué techniquement (hmtl, css, javascript, ajax, Flash, Java...) au point de devenir des outils à part entière. Que peut donc faire le web pour vous ? Voici une...
Popup en CSS, sans Javascript VoirVoici comment réaliser une popup d'information en pure CSS, sans Javascript. L'astuce est d'utiliser :hover de manière à utiliser des CSS différents au passage du curseur. Parmis les attributs CSS modifiés, on utilise display:none afin de...
Télécharger PSPad VoirPSPad est un excellent éditeur de texte. Il est utile pour travailler sur du simple texte, mais aussi sur du HTML, CSS, Javascript, php ou autres langages de programmation (C++, Java, Python...). Les fonctionnalités sont impressionnantes: ...
Télécharger Notepad2 VoirNotepad2 est un bloc-note sans installation libre possédant des fonctionnalités avancées de coloration syntaxique. Fonctionnalités Coloration syntaxique pour les langages suivants : HTML, XML, PHP, ASP (JScript, VBS), CSS, JavaScript, VBScript,...
Posez votre question Répondre

1

je_pas_sur, le 18 avr 2009 à 13:36:50
   
Répondre à je_pas_sur

2

Zdou, le 19 avr 2009 à 00:19:36

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épondre à Zdou

3

math 2000, le 19 avr 2009 à 08:54:52

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/

   
Répondre à math 2000

4

Zdou, le 19 avr 2009 à 15:32:08

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.

   
Répondre à Zdou

5

math 2000, le 19 avr 2009 à 15:37:08

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/">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/menu%20d%C3%A9roulant%20compatible%20ie6">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/ma">menu déroulant css <!--[if gte IE 7]><!--></a><!--<![endif]-->
<table>
<tbody>
<tr>
<td>

<ul>
<li><a href="http://bormat2.free.fr/menu%20deroulant">menu déroulant</a></li>
<li><a href="http://bormat2.free.fr/menu%20depliant">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épondre à math 2000

6

 oloufemi, le 28 jui 2009 à 02:34:39

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.

   
Répondre à oloufemi
Posez votre question Répondre
Ils ont besoin de votre aide