Petit souci avec un menu horizontal

***Tout d'abord bonjour a tous, je decouvre le site Alsacreations qui est tres bien concu et ses tutos sont fort utiles, je remercie leur auteur .

Je developpe en ce moment un site pour un client, et j'ai un petit souci avec le menu.
J'ai utilise ce tutorial pour le realiser.
Mon probleme est le suivant :

- sous Firefox lorsque je deroule un sous menu, il passe sous le bloc "site" placé dessous
- sous IE mon bloc ou le menu est affiche s'aggrandit en hauteur lorsqu'on deroule un menu

La page en question pour etayer mon propos.

Je souhaiterais donc savoir comment faire pour que les menus deroulants s'affichent au premier plan et sans que ca redimensionne le bloc qui les contient.
Je vous remercie par avance
Modifié par cdtmorogth (13 Apr 2006 - 12:49)

cdtmorogth a écrit :
***Tout d'abord bonjour a tous, je decouvre le site Alsacreation

AlsacréationSSSSSS !

(merci pour les compliments quand-même)

Raphael a écrit :

AlsacréationSSSSSS !

(merci pour les compliments quand-même)

***Desole pour le "s" J'ai edite mon message.

Bonjour cdtmorogth,

Pour que ton menu s'affiche par dessus ton bloc site, il faut le mettre en position absolue et lui mettre un z-index supérieur à celui du bloc site.

Donc tu mets à ta div menu :

position: absolute;
z-index: 2;

et à ta div site :

z-index: 1;

Après avoir fait ça, tu t'aperçois que l'encadrement de ton menu descend à l'ouverture de tes sous-menus puisque tu l'as fait à partir de ta div menu et qu'il est donc dépendant de lui.

Il faut donc faire un cadre dans une nouvelle div, mais avant, enlèves de ta div menu :

background-color: #ddd;
padding: 5px;
border: 1px solid gray;

pour enlever le cadre

et :

margin-left: auto;
margin-right: auto;

qui te servait à centrer ton menu quand il était en position relative.

Donc là, tu vas faire ton cadre.

Ton menu fait 14px de hauteur et 700px de largeur, alors tu donnes à ton cadre une hauteur de 19 px et une largeur de 705 px car tu vas mettre un padding-left et un padding-top de 5px pour centrer ton menu.

Ensuite tu dois centrer ton cadre, donc tu mets les marges droite et gauche à auto.

Ce qui donne :

#cadre {
height: 19px;
width: 705px;
background: #ddd;
border: 1px solid gray;
z-index: 1;
padding-top: 5px;
padding-left: 5px;
margin-left: auto;
margin-right: auto;
}

Ensuite, tu insères ta div menu dans ta div cadre dans le html.

voilà ce que j'aurais fait

***blue tu es mon sauveur ! J'ai suivi à la lettre tes instructions (très claires et détaillées je t'en suis gré car je débute en CSS ) et ça a fonctionné du premier coup .
Egalement ça m'aura permis d'y voir plus clair dans tout ce bazar que sont les CSS .

Sois donc duement remercié pour ton intervention .

Edit : vous pouvez marquer ce topic comme "résolu" maintenant.
Encore merci et bonne continuation à Alsacréations que j'ajoute dès maintenant à mes favoris .
Modifié par cdtmorogth (13 Apr 2006 - 18:27)

lol je suis une fille

Pour le [résolu] c'est toi qui doit le mettre dans ton titre, en éditant ton premier message