[Résolu] Menu déroulant et CSS

Bonjour,
Je suis en train de refaire l'intégralité de mon site avec CSS mais j'ai ajouté un menu déroulant qui m'embete... très pratique car il distingue son utilisation sous IE et FF mais par contre je n'arrive pas à en même temps le centrer et faire que les sous menus passent sur le corps du site.. quand j'applique z-index avec la position absolute le menu part à gauche et quand le menu est centré les sous menus me font descendre le corps...

Voici mon code:

.menuIE {
display:none !important;
display:block;
margin-top: 110px;


}

a.boutonIE, a.boutonIE:link, a.boutonIE:visited, a.boutonIE:active {
    color:#FAE3F8; 
    width:90px; 
    height:18px; 
    display:block; 
    background:gray; 
    border:1px solid #000; 
    margin-right:10px; 
	margin-left:10px;
    text-align:center; 
    float:left; 
    text-decoration:none; 
    font-family: "Arial Narrow", Arial, "Times New Roman", Times, serif;
    font-size:15px; 
    line-height:18px; 
    overflow:hidden;

}

a.boutonIE:hover {
    color:black; 
    background:#FAE3F8; 
    overflow:visible;}
	

a.boutonIE:hover table {
    display:block; 
    background:#eee; 
    border-collapse:collapse;
}

.boutonFF {
    color:#FAE3F8; 
    width:90px; 
    height:18px; 
    display:block !important; 
	display:none; 
    background:gray; 
    border:1px solid #000; 
    margin-right:25px; 
	margin-left:25px;
    text-align:center; 
    float:left; 
    text-decoration:none; 
    font-family: "Arial Narrow", Arial, "Times New Roman", Times, serif;
    font-size:15px; 
    line-height:18px; 
    overflow:hidden;
	margin-top: 100px;
	
 }

.boutonFF:hover {
    height:auto; 
    cursor:pointer;
    color:black; 
    background:#FAE3F8;
 }


a.SousMenu, a.SousMenu:link, a.SousMenu:visited, a.SousMenu:active {
    display:block; 
    width:90px !important; 
    width:88px; 
    height:18px; 
    border-bottom:1px solid #000; 
    text-decoration:none; 
    color:#000;
    font-family: "Arial Narrow", Arial, "Times New Roman", Times, serif; 
    font-size:15px; 
    text-align:center;
    background:#FAE3F8;
	
}


a.SousMenu:hover {background:#BCCCD2;}

Une idée ??
Merci par avance
Modifié par PourMincir (17 May 2006 - 17:36)

Bonjour,

Tu ne donnes que du code css, peux-tu donner du code html stp, ou mieux, donner l'adresse de ton site; si tu la mis en ligne

Bon... alors là j'ai finalement changé le code CSS et tout semblait ok.
Je viens de le mettre en ligne sur www.pourmincir.com mais le problème vient quand j'ouvre le site sur un écran 19'' où le menu n'est pas centré je pense que ça vient de la position:absolute qui m'est nécessaire pour pouvoir mettre un z-index.
J'ai essayé de centrer avec le tuto mais ça ne marche pas ....

<style type="text/css">

body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menuder {

text-align:center;
margin:auto;
margin-top: 100px; 
padding:15px;
position :absolute;
z-index:1;
left: 120px;
right:120px;
width: 100%;
font-family: "Arial narrow", Arial, "Times New Roman", Times, serif;
}
#menuder dl {
float: left;
width: 130px;
margin: 0 5px;
}
#menuder dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menuder dd {
border: 1px solid gray;
}
#menuder li {
text-align: center;
background: #FAE3F8;
}
#menuder li a, #menuder dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menuder li a:hover, #menuder dt a:hover {
background: #eee;
}
</style>

Merci pour votre aide

Personne ne peut m'aider ??

Bonjour,

Tu peux centrer avec des marges négatives quand tu es en position absolue.

Regarde ici à la fin de l'article.

L'embêtant en utilisant les marges négatives c'est que suivant l'écran ce ne sera pas centré.
Par exemple j'ai bien utilisé les marges négatives sur mon pied de page mais ce n'est pas à la même position sur un écran 15" 17" ou 19".

Une autre idée ?

Non, je n'ai pas d'autre idée car celle là marche très bien, pour toutes les résolutions

Je regarderais ton site un de ces moments

Salut
Il est normal que tu aie des problème de résolution il y a des position absolue un peu partout si tu veux avoir un site fluide il te faut reprendre ta mise en page

Je te posterai un exemple de mise en page

A+

Voilou

une base de travail plus mieux bien

http://test.hysatech.com/PourMincir.html

A+

Bien même très bien !!!!
Ce qui est super c'est que même lors du chargement le menu ne s'ouvre pas
J'suis débutante en CSS donc j'avoue que j'me dépatouille un peu comme je peux lol.
Même sur l'écran 19" c'est centré

J'suis bluffée car cela fait plus d'une semaine que j'demande de l'aide sur les forums et que tu es le premier à trouver

Tu as changé quoi dans le code CSS ?

Salut

J’ai changé beaucoup de chose dans le CSS et l’agencement du HTML je te conseil de récupérer la page et de voir les modification directement,

Recommandation personnelle :
Commence par crée une structure principale dans ton cas entête, bloc gauche, bloc droit, centre et pied de page puis mettre le contenu dans ces bloc

Ne pas oublier de mettre un encodage (problème de caractères) lire
http://forum.alsacreations.com/topic-17-1201-1-Iso88591-iso885915-utf8-lequel-choisir-.html

Éviter les javascipt

A+

Bon ayé j'ai récupéré tout et ça fonctionne très bien.
Je suis d'accord pour ne pas utiliser le javascript mais bon avec IE c'est pas facile de faire sans(pour le menu par exemple).

Je ne pensais pas que l'agencement du HTML puisse avoir autant d'importance.

Maintenant faut j'refasse toutes les autres feuilles aussi bien !!

Merci pour ton aide et j'te tiens au courant.
Modifié par PourMincir (16 May 2006 - 14:08)

J'ai vu que tu as fermé toutes les balises <p>, est-ce obligatoire ?
Car je ne vois pas de différence lorsque je les ferme
Modifié par PourMincir (16 May 2006 - 17:48)

PourMincir a écrit :
J'ai vu que tu as fermé toutes les balises <p>, est-ce obligatoire ?
Car je ne vois pas de différence lorsque je les ferme

Hello,

C'est obligatoire si tu as choisi un doctype XHTML à ta page.
En XHTML, il est obligatoire de fermer toutes les balises, pour des questions de rigueur.

Oki doki

Merci beaucoup pour votre aide en tous cas
J'continue mais j'pense que pour ce post j'ai eu ma réponse alors post clos