Menu déroulant dynamique

Yop yop, salut à tous.
Tout d'abord je tiens à saluer et féliciter les réalisateurs de ce site vraiment bien

Bon si je suis là, vous vous en doutez, c'est parce-que j'ai des petits soucis sur le site que je suis entrain de faire.

Pour l'instant je ne vais parler que d'un soucis...

Il s'agit d'un site pour une team de jeu... j'ai utilisé le script de réalisation d'un menu déroulant présent sur Alsacreations.

Pour voir le résultat actuel de ce menu (buggé) voici l'adresse:

http://zero-frags.kicks-ass.net/zerofrags

Voici les différents problèmes que je rencontre:

1 - pour avoir l'aspet qu'il a actuellement, je suis obligé de mettre dans le CSS, sur #menu et #li : float: left;
Sinon le menu devient vertical




2 - comme vous pouvez le voir, les sous-menus s'affichent sous le menu principal dont il est originaire. Or je souhaiterais que les sous-menus soient alignés à l'identique du menu principal, à gauche de ma page




3 - sous FF, le float: left du #li enlève la mise en forme de mon #ul (qui contient mes #li), soit background noir devient transparent. Je suis obligé de tricher en mettant un background noir sur #li. (Pour que vous puissiez voir le pb via le lien au début du post je n'ai pas mis le CSS de triche)

Ca fait vraiment beaucoup de choses simplement pour un menu, mais je me suis cassé la tête dessus pendant un moment et je suis à court d'idées.

Je solicite donc votre aide

Merci d'avance.

A bientôt

P.S: bien entendu les photos sont modifiées pour que vous puissiez voir, je ne vais pas modifier mon CSS pour 2 photos

Bon,

petit up puisque plus de 80 fois lu mais pas de réponse

Bonjour, je ne peux malheureusement pas vous répondre car vous semblez plus avancé que moi :
je viens d'adapter les codes pour mon site, j'ai mis le menu déroulant dans un élément de bibliothèque mais qd je l'insére dans la page, le menu redevient vertical sous forme de liste à puce (alors que j'ai bien le param float) avez-vous une idée?
Merci !
Modifié par lilia (11 Sep 2007 - 16:27)

Salut,

lilia a écrit :
Bonjour, je ne peux malheureusement pas vous répondre car vous semblez plus avancé que moi :
je viens d'adapter les codes pour mon site, j'ai mis le menu déroulant dans un élément de bibliothèque mais qd je l'insére dans la page, le menu redevient vertical sous forme de liste à puce (alors que j'ai bien le param float) avez-vous une idée?
Merci !

Lilia : Merci d'ouvrir ton propre sujet plutôt que de parasiter le sujet d'un autre membre qui attends réponse à son propre problème. Cela facilitera l'appréhension de vos deux problèmes, et rien ne t'empêche de suivre la lecture de ce sujet en plus du tiens, s'il peut t'apporter plus d'informations.
De plus il sera impossible de t'aider sans une page en ligne ou l'intégralité de code, personne ici n'est devin.

Merci de ta compréhension.

Nextoo : Je ne vois pas le problème énoncé sur tes captures d'écrans, je dirais que tout semble fonctionner. As tu réussi à résoudre ton problème ?
Modifié par Mikachu (11 Sep 2007 - 16:58)

ok je ne pensais pas parasiter

Salut à vous deux,

pas la peine de se battre hein

Pour répondre aux questions, non mon problème n'est pas résolu, mais il est vrai que je dois donner plus de détails.

Quand tu clic sur le lien, tu arrives effectivement sur mon site avec un menu/sous-menu fonctionnel. En fait je l'ai modifié car j'ai pas mal de visiteurs en ce moment, lan près de chez moi arrivant à grand pas.

Mais ce n'est pas le type de menu que je voudrais avoir.

En fait le sous-menu actuel se déroule à la verticale, alors que je souhaiterais qu'il se déroule à l'horizontal, donc qu'il soit visuellement identique au menu parent (suis-je clair? ).

Les images qui te paraissent bonnes je les ai en fait modifié pour donner un aperçu de ce que j'aimerais avoir... Donc première photo = actuel, seconde photo = ce que j'aimerai .

Pour la seconde question, oui j'aurais une idée, regarde mon code CSS du menu, ca pourra peut-être t'aiguiller.

#element_sub
{
	border-left: #FFFFFF 1px solid;
	border-right: #000000 1px solid;
	background-color: #000000;
	width:800px;
	height:20px;
	top: 0;
	z-index:100;
}

dl,dt,dd,li,ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#element_sub dl 
{
	float: left;
	width: 160px;
}

#element_sub dt
{
	color:#ffffff;
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	border: 1px solid gray;
	margin: 1px;
}

#element_sub dd
{
	width: 160px;
	position: absolute;
	background: #000;
	display: none;
	margin-bottom: 1px;
}

#element_sub li 
{
        float: left;
	margin: 0;
	margin: 1px;
	border: 1px solid gray;
	text-align: center;
}

#element_sub ul
{	
}

#element_sub li a, #element_sub dt a 
{
	color:#fff;
	text-decoration: none;
	display: block;
	border: 0 none;
}

#element_sub li a:visited, #element_sub li a:focus, #element_sub dt a:focus, #element_sub dt a:visited 
{
	color: #ffffff;
}

#element_sub li a:hover, #element_sub dt a:hover
{
	background: #ffffff;
	color: #003366;
}

@ bientôt, merci pour vos réponses actuelles et à venir
Modifié par Nextoo (14 Sep 2007 - 08:54)