Mon menu se positionne mal et les sous-menu modifient leur conteneur

Bonjour,

J'ai un soucis ( forcément puisuqe j'ouvre un topic )

Je me bats depuis quelques jours avec mon menu et sous-menu déroulant.

Celui-ci s'affiche nickel sous FireFox, par contre je rencontre des difficultées sous Opéra, Netscape et IE.

Sous Netscape et IE: la partie qui contient le menu "s'allonge" avec l'ouverture des sous-menus.
Sous Opéra: Je n'ai pas le problème, à l'instar de FireFox, par contre un de mes menus n'est pas aligné avec les autres.

J'ai cherché dans le forum en vain. Les rares réponses que j'ai trouvé me renvoi vers des liens morts ou vers le site openweb qui me " refuse l'accès"

Pour juger par vous même du dysfonctionnement, le site: http://lagardedamakna.free.fr/

Le CSS:

body {
margin: 0;
padding: 0;
background-color: #D8C8A8;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #980000;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#conteneur {
margin: 0 auto;
width: 750px;
left: 50%;
}
#header {
height: 143px;
background-image: url(/images/boutons/bandeaufinal.jpg) ;
}
#header span {
display: none ;
}
#centre {
background-color:#F0E4C0;
text-align: justify ;
text-indent: 2em ;
line-height: 1.3em ;
padding: 2em 2em 2em 2em;
}
#pied {
height: 40px;
text-align: center;
font-size: 0.75em;
line-height: 1.3em;
background-color: #F0E4C0;
}
p {
margin: 0 10px 0;
}
h1{
margin-top: 40px;
font-size: 1.8em;
font-weight: bold;
text-align: center;
}
h2{
margin-top: 35px;
font-size: 1em;
font-weight: bold;
}
h3{
text-align: center;
font-size: 1em;
}
h6{
text-align: center;
font-size: 1em;
}
a {
color: #980000;
text-decoration: underline;
}
#menu {
position: absolute;
margin: 0 auto 0 -375px;
height: 24px;
background-color:#F0E8D8;
top: 158px;
left: 50%;
z-index:auto;
width : 750px
}
#menu dl {
float: left;
width: 9.4em;
margin: 2px 2.5px 2px 2px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #E8DCC8;
border: 1.5px solid #A08060;
}
#menu dd {
border: 1.5px solid #A08060;
}
#menu li {
text-align: center;
background: #F0E8D8;
}
#menu li a, #menu dt a {
color: #980000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #F0F4E0;
}

Si au passage vous avez des commentaires à me faire je suis preneur...

Par avance, merci de votre aide

Question de mise en page : je déplace dans le salon "CSS et mise en forme"

Une idée? un avis? Une suggestion?
Merci

Personne n'a une piste?

Bonsoir

Je comprends pas j'ai beau relire ma feuille css je ne vois pas.
J'ai modifié les valeurs pour voir si cela influait: rien.
J'ai supprimé certaines infos: rien.
J'ai cherchais à comparer avec d'autres feuilles: rien non plus.
Je désespère là...

Quelqu'un pourrait il me fournir une piste?

J'end éduis que c'ets insurmontable?
Je poursuis ma recherche, si je trouve je post pour ceux qui galère dans le même esprit

Salut.
Essaie de reduire la hauteur des <dd> pour IE avec un hack _height:xxpx; ou line-height:xxpx;

Salut artno, justement je venais pour poster mon souci, et je vois qu'on est deux. J'ai exactement le même problème et j'ai pris le code d'alsa création sur le menu déroulant horizontal.

la preuve en image : http://www.i-abalone.com

le seul moyen d'éviter le problème, c'est d'enlever le background du menu pour le laisser blanc, mais du coup, vu que mon menu ne prend pas toute la page (et heureusement puisque pour un résolution plus petite, les onglets de droite s'entasseraient sur la ligne du dessous), ça me laisserait du blanc à droite du menu.

Donc, c'est l'impasse pour moi, qui débute et recopie plus les codes qu'il ne les crée ...

Merci à tous de nous aider !

Je creuse toujours la question, je vais essayer la manip conseillée juste avant toi et je poste pour vous dire où j'en suis!
Merci à vous deux

Il n'y a pas un moyen de passer sans le hack pour ie?
De plus cela ne résoudra rien pour les autres navigateurs...

peut-être raphael himself pourrait nous aider nan ? j'ai bien lu les FAQ et autres infos sur le site, j'ai peut-être pas tout compris mais j'ai pas trouvé de réponse .

help !!!!

Perseverons!
Ca fait un moment que j'ai posté et personne ne réponds.
Je ne pense pas que ce soit dû à une difficulté quelconque. Sûrement qu'on nous laisse chercher par nous même car c'est tout simple.
Sauf que je ne vois vraiment pas

Bonjour,
je pense que la solution est de sortir les "dd" du flux en les positionnant en absolu, cela empêche le conteneur de s'agrandir avec.
Donc essayes de remplacer :

#menu dd {
border: 1.5px solid #A08060;
}

par:

#menu dd {
position:absolute;/*supprime le problème d'étirement*/
width:9.4em;/*du coup il faut repréciser la largeur*/
border: 1.5px solid #A08060;
}

Modifié par energizer (01 Nov 2005 - 19:28)

wouahhhhhhhhhhhhhhhhhhh !!!!!!

ça marche !!! mille mercis energizer du premier coup tu es mon dieu

je débute tout juste la programmation, et c'est la première fois que j'utilise un forum, je dois vous dire merci pour cet esprit de solidarité

Avec si peu de connaissance, je me sentais impuissant et je pense qu'à terme j'aurais dû copier un autre tuto, une montagne de milliers de merci energizer, et si un jour jee peux aider, je n'hésiterais pas

j'espère que ça marche pour toi aussi artno.

merci à alsacréations, et à sa communauté, ciao

Bonsoir Artno,

Il semblerai, effectivement, qu'ie ne tienne pas compte du forçage de la hauteur du

<div id="menu">

à 24 pixels. Il agrandi ton div quoi que tu fasses. J'aurai tendance à dire que si ton div n'a pas de couleur de fond alors tu ne verras pas son élargissement .
Si tu veux, toutefois, garder une couleur de fond, je te préconise une image, hum de la couleur désirée , de hauteur désirée (en l'occurence 24px) et de largeur 1px, que tu mettra en fond de ton div et répétée sur x. Le code de mef de ton div devient alors :

#menu {
position: absolute;
margin: 0 auto 0 -375px;
height: 24px;
[b]
/*background-color:#F0E8D8;*/
background-image: (fond_beige.png);
background-repeat: repeat-x;
[/b]
top: 158px;
left: 50%;
z-index:auto;
width : 750px;
}

[ edit avant mise en ligne ] Il semble qu'une solution plus élégante ait été donnée par energizer mais je poste tout de même la mienne certe moins académique mais malgré tout efficace.
[ /edit avant mise en ligne ]

hroiian
Modifié par hroiian (01 Nov 2005 - 22:50)

Je tenterais les deux dès demain...
Merci à vous

J'ai finalement adopté la solution d'Energizer puisque plus correcte en plus d'être plus rapide à mettre en oeuvre.

Merci à vous deux pour votre aide, tout roule sous IE, FF et Netscape.

Reste le hic sous Opera: un des menu reste à la ligne et ne semble pas contenu dans le conteneur.
Il doit sagir d'une particularité "Opera" puisque cela fonctionne parfaitement sous les autres navigateurs.

Vous auriez une proposition? ( dire que j'ignorais l'existance d'Opera jusqu'à découvrir ce site, c'était plus simple )

Opéra me pose vraiment un soucis. Je ne vois pas comment faire pour tout faire " rentrer" sur la même ligne.
Débutant? Tu as aussi le soucis sous Opera avec ton menu?
Quelqu'un pourrait m'aider?

Il n'y aurait pas un spécialiste d'Opera dans le coin pour m'aider?
Merci