Menus déroulants en CSS (encore !)

[jphicath]

Bonjour à tous,

mes excuses d'avance pour mon vocabulaire, je suis débutant.

Je cherche à faire un menu déroulant sur mon site, et j'ai trouvé (ici) un joli exemple, avec CSS et JS.

Ca fonctionne très bien. En résumé, un peu de CSS pour le menu lui-même, et un peu de Javascript pour le montrer ou le cacher.

Bon, là où ça se gâte, c'est au niveau du positionnement du menu.

Je suis obligé de le positionner en absolute (parce que je veux qu'il s'affiche au-dessus de tout le reste, bien sûr !), donc ça donne ça :

#sous-menu1 {

display: None;

margin: 0;

padding : 0;

position : absolute;

top : 155px;

left : 300px; width : auto;

list-style-image: url(Aucune);

cursor: hand;

background-color: #D80001;

float: left;

overflow: visible;

height: auto;}

Et c'est super en 800x600.

Mais à d'autres résolutions, 1024 ou 1280, ça ne va plus du tout parce que le menu est toujours positionné à 300 pixels du bord gauche, mais ma page est centrée, et se déplace.

Donc, en clair, je cherche une solution pour que le menu "suive" l'image qui permet d'ouvrir le menu.

C'est certainement très simple, j'imagine trois solutions :

- il faut pouvoir indiquer à mon menu (cf. CSS ci-dessus qu'il doit se positionner relativement à la table qui constitue le site, et non plus par rapport au bord de la page,

- ou bien se positionner par rapport au centre de la page,

- ou bien (solution merdique, sûrement) calculer le décallage en fonction de la résolution du navigateur.

Bref, comme vous le voyez, je suis vraiment perdu, presqu'au bord du suicide...

Alors toutes vos réponses sont les bienvenues (y compris si vous me proposez une autre solution pas trop compliquée et qui marcherait pour tous les navigateurs).

Merci d'avance,

JPhi

[AntiStatic]

Yep salut,

alors si la largeur de ton site est fixe et définit en pixel c'est trés simple il suffit de positioner ton menu en absolu au centre du site puis de le décaler à l'endroit ou tu veux qu'il soit affiché en utilisant des marges négatives !

En clair ca donne ca :

#sous-menu1 {
display: None;
padding : 0;
position : absolute;
top : 155px;
left : 50%;
margin-left : -300px; 
width : auto;
list-style-image: url(Aucune);
cursor: hand;
background-color: #D80001;
float: left;
overflow: visible;
height: auto;}

Explications :

left : 50% va positionner ton menu au centre de l'écran. A partir de la tu veux l'afficher plus à gauche, donc tu le décale de X pixels vers la gauche pour correctement le positionner, par exemple la j'ai mis margin-left : -300px ; mais c'est à toi d'ajuster !

Ensuite quand selon les différentes résolutions d'écran de tes visisteurs, ton menu devrait toujours être placé au bon endroit !

Dis moi si c'est OK pour toi !

A +

[jphicath]

Génial, merci !

Bon, en fait, j'ai mis :

margin: 0 0 0 -100px;

Parce que apparement, il ne comprenait pas margin-left (dreamweaver m'a proposé le code ci-dessus qui a l'air de faire ça en tous les cas).

Je suis sauvé, merci encore !

Juste avant la nuit ! Je vais pouvoir dormir comme un bébé grâce à toi (en me réveillant toutes les deux heures, à cause de l'angoisse d'avoir merdé sur un truc aussi simple par rapport à tout ce qui m'attend !!!)

JPhi

[AntiStatic]

Erf ya pas de quoi Pourtant ca devrait marcher pourtant avec un margin-left : -100px ;

Mais bon avec margin ca marche aussi mais fait bien attention à mettre des 0px avec PX parce que sinon mozilla va pas comprendre !

Donc margin : 0px 0px 0px -100px !

D'ailleurs fait bien attention aussi à tester ton site sous Mozilla sinon tu risque d'avoir quelques surprises et de passer de longues nuits blanches

[jphicath]

Merci pour le conseil.

Et justement...

Sous Mozilla, le menu ne disparaît pas quand le focus quitte le menu sans repasser par l'image qui fait apparaître ce menu.

Pour être clair (le menu est vertical), si je descends la souris pour sortir de mon menu, et bien le menu reste en place.

Alors que sous IE, pas de souci, le OnMouseOut sur ce menu fonctionne !!

Dreamweaver n'a pas l'air d'être ennuyé par ça... mais moi si... allez, une nuit de cauchemards...!!

Si quelqu'un a une solution...

JPhi, qui a le sommeil perturbé.