28173 sujets

CSS et mise en forme, CSS3

Intégration Menu déroulant.

Bonjour,
J'ai un problème avec un menu déroulant(en css et javascript), que je ne parviens pas à résoudre.
Je m'explique.
J'ai un gabarit standard
Header / menu / contenu / Footer

Tous mes éléments sont positionner grace au Css. Ce quie me pose problème c'est mon menu. Si je le laisse en relatif qd il se déroule il fait descendre mon div Contenu et si je le positionne en absolu il ne se recentre pas qd on resize la fenetre.(Il reste à la position indiqué...)

Et je ne vois pas du tout comment résoudre celà....

Merci de m'éclairé...
Bonsoir jonBe Smiley smile ,


As-tu un lien pour nous montrer ton problème?
Si non peux tu mettre le code?

@+
Ce que j'ai besoin de savoir c'est comment positionner un menu déroulant
sans qu'il ne detruise la mise en page des "Div" suivant.

Pour celà je crois que la seule methode est la méthode absolue pour pouvoir jouer avec le Z-index. Mais alors comment puis je faire pour que ce menu en Absolute suive les autres éléments lors d'un resize de frame.

Je viens de tester en le mettant sans valeur de position mais en mettant un margin, ce qui fonctionne très bien ds Ffox(il s'aligne au bord de mon div précédent, ms pas ds IE

Voiçi le code actuel de mon Menu

#menu {
	position: absolute;
	top: 115px;
	left: 182px;
	z-index:100;
	width: 568px;
}
#menu dd {
	border: 0px solid gray;
}
#menu dl {
	float: left;
	width: 142px;
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: 0px;
}
#menu dt {
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	border: 0px solid gray;
	background-repeat: no-repeat;
	background-image: url(../images/BgbtnMenu.jpg);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	vertical-align: middle;
	color: #FFFFFF;
	width: 142px;
	padding-top: 5px;
	padding-bottom: 5px;
}
#menu dt a {
	text-align: center;
	height: 20px;
	font-weight: bold;
	border: 0px solid gray;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	vertical-align: middle;
	color: #FFFFFF;
	width: 142px;
}
#menu dt:hover {
	background-image: url(../images/btnMenuLight.jpg);
}

#menu li {
	text-align: left;
	background-color: #095AA6;
	width: 142px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
	border-bottom-width: 1px;
	padding-top: 2px;
	padding-bottom: 2px;
}
#menu li a {
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	height: 100%;
	border: 0 none;
	font-size: 8pt;
	padding-left: 2px;
	padding-right: 2px;
}

#menu li a:hover {
	background-color: #98B5EF;
}

Modifié par jonBe (16 Oct 2007 - 22:34)
Modérateur
Salut,

Tu peux laisser le menu en relatif et mettre les parties cachées (dd) en absolu à l'affichage (sans valeurs top et left). Par la suite, tu ajoutes un clear: both; sur l'élément qui suit le menu vu que tu te sers de float.
Modifié par koala64 (17 Oct 2007 - 15:46)
Merci, je vais essayer cette solution...

A quoi sert le clear ?

Heyoan a écrit :
Salut,

je ne sais pas si cela répond à ta question mais as-tu jeté un oeil à ce tuto sur un menu horizontal ?


Oui c'est sur cet exemple que je me suis basé... Mais ds cete exemple il est en absolu a 0 ,0 si je me souviens bien donc ca ne pose pas de prob qd on reduit la fenetre...
Modifié par jonBe (17 Oct 2007 - 15:53)
ok donc dès que j'ai des floatantes, pour arreter celà je dois procédé par un clear ds la boite qui suit c'est bien ça ?

Super le lien que tu m'as donnés vais essayer de m'y mettre à fond...j'èspère qu'après ca je pourrais enfin m'en sortir correctement Smiley smile
Modifié par jonBe (17 Oct 2007 - 16:38)
Sujet clos
Aller à