18073 sujets

Questions générales et questions de débutants

Problème de fermeture du menu déroulant[Résolu]

Bonjour,

J'ai suivi l'excellent tutoriel concernant la création d'un menu déroulant horizontal en css+js pour ma première maquette informatique sur un projet que j'entreprends.


Seulement, un petit problème intervient. La partie déroulante de la rubrique contenant les rubriques ne se ferme pas lorsque je vais par exemple sur une autre partie de la page. Cela gêne beaucoup et ce n'est pas trop ergonomique. Smiley biggrin

J'aurai voulu savoir quelle fonction ou partie de code, il faut rajouter pour que la partie déroulante disparaisse correctement ou l'on se situe dans la page?

Pour mieux comprendre le problème, enfin j'espère voici le site sur lequel se situe ma réalisation de maquette : http://fabrice.thebeaud.free.fr

Je vous remercie d'avance à vous communauté du CSS, lol
Modifié par djmatou (21 Mar 2006 - 11:56)
Avec ce javascript :


window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}


et en rejoutant :


onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();"


sur les "dd" de ton menu (en changeant le n° du smenu pour chacun Smiley ravi )

c'est ok normalement Smiley smile
En effet cela fonctionne, je vous remercies.


Cependant deux autres petits problèmes interviennent sous Firefox :

Le premier problème concerne le script qui m'a été donné en réponse à ma première question :

A la suite de la réponse que j'ai reçu, j'ai donc ajouter la partie code et le résultat fait que sous Firefox, le sous-menu saute. Ce qui est sûr car j'ai regardé, cela provient de cette partie de code.

Et l'autre problème provenant toujours de Firefox, c'est qu'il y a un décalage du menu déroulant. J'ai regardé le FAQ pour pouvoir régler le problème mais sans effet...
Sur quoi faut-il jouer pour que cela fonctionne sous Firefox?

je vous remet l'url du site perso :

fabrice.thebeaud.free.fr


Je vous remercie d'avance, à vous communauté du CSS, lol
J'utilise Firefox et je ne le vois pas sauter ton menu
je ne vois pas non plus de décalage Smiley sweatdrop
peux-tu faire un screen pour le décalage stp ?
Bonjour,


Voici l'aperçu du screenshot avec Firefox

upload/5646-screenshotF.jpg

le menu est décalé si tu regardes aussi avec IE, c'est un décalage gauche alors que sur IE, que ce soit d'un coté et de l'autre le menu est centré!

On le voit quand on regarde l'onglet "contacts" que c'est pas réellement comme sous IE.

Merci à la communauté du css et js!
Ah ok, j'avais pas compris, je croyais que c'était tes sous-menus qui étaient décalés Smiley confused

Personnellement, je n'ai pas du tout ce que ça donne pour toi Smiley confus

Pour moi, ton menu est complètement décalé sur la droite par rapport au reste avec firefox et IE Smiley ohwell

J'ai un 15'

Je te mets un screen

upload/2075-djmatouscre.gif
C'est tout de même assez curieux, moi je suis sur pc portable et j'ai un écran 15,1 pouce et ça donne pas le même résultat que chez toi!

Que dois-je faire pour que cela soit correct?



Merci d'avance
En fait Blue, ta configuration est 800x600?

Moi je suis en 1024x768,donc voilà pourquoi j'ai pas le même résultat.


A ton avis quelle est la solution pour améliorer ça?



Merci à la communauté css et js
j'ai insérer entre la balise body ceci :

<div id="cadre"></div>


et dans ma css :

cadre {
width:780px;
margin:auto;
}

pour que cela fonctionne pour le 800*600 (éviter la scroll bar horizontale)

je m'attaque à la position du menu qui je pense est fixe c'est pour ça!

Les commentaires et remarques de votre part sont les bienvenues pour améiorer mon travail!

Merci à la communauté css et js Smiley biggrin
En fait, c'est parceque tu as donné à ton menu des propriétées de placement là :


#menu {
position: absolute;
top: 140;
left: 130;
z-index:100;
width: 50em;
}


(petite remarque, il faut mettre px aux dimensions Smiley cligne )

Pour le centrage, tu vas utiliser les marges négatives, dont tu peux voir le tuto ici (en bas de l'article) enfin la marge négative left seulement, puisque ton menu est inséré dans la table de ton site, ce qui fait que tu n'as pas besoin de positionner en hauteur

Tu dois donc donner ces propriété à ton menu :

#menu {
position: absolute;
left: 50%; 
width: 732px;
margin-left: -366px;
}


J'ai regardé sur le pc de mon copain (un 1024) et ça marche aussi sur le mien Smiley smile
djmatou a écrit :
j'ai insérer entre la balise body ceci :

<div id="cadre"></div>


et dans ma css :

cadre {
width:780px;
margin:auto;
}

pour que cela fonctionne pour le 800*600 (éviter la scroll bar horizontale)

je m'attaque à la position du menu qui je pense est fixe c'est pour ça!

Les commentaires et remarques de votre part sont les bienvenues pour améiorer mon travail!

Merci à la communauté css et js Smiley biggrin


lol grilled Smiley lol mais je vais voir ta méthode Smiley smile
ah ok c'est pour éviter le scroll horizontal en 800

Ca marche, mais tu peux directement insérer le code dans le body de ton css (par contre, tu en as 2 (body), va falloir en enlever un)

Sinon, tu peux juste mettre margin: auto; ça suffit Smiley smile
Bonjour Blue,

regardes ce que ça donne sur le site perso : fabrice.thebeaud.free.fr

Tu pourras me dire si un décalage se crée avec Firefox et IE!

Merci beaucoup pour toutes ses aides!
et bien j'ai joué sur la taille du menu, c'est à dire la largeur de chaque bloc et voilà le résultat!


Merci beaucoup Blue pour ton aide qui a été précieuse!
djmatou a écrit :
et bien j'ai joué sur la taille du menu, c'est à dire la largeur de chaque bloc et voilà le résultat!


Merci beaucoup Blue pour ton aide qui a été précieuse!


ah ok, tu as un peu agrandi chaque menu pour qu'ils prennent la largeur du conteneur

fûté Smiley cligne

pas de quoi pour l'aide Smiley smile
Sujet clos
Aller à