18073 sujets

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

Problème avec le menu horizontal déroulant sur une ligne

Salut à tous !

Bravo pour ce très bon site.

Je me permet de créer un nouveau sujet car j'ai un problème sur lequel je m'arrache les cheveux depuis un petit moment. Smiley bawling

J'utilise le code du menu horizontal déroulant sur une ligne proposé par Alsacréations, que j'ai inclu dans ma mise en page pur CSS, inspirée de Largeur fluide, header/menu haut/menu gauche flottant/menu droite flottant/contenu/footer (oui oui, j'utilise beaucoup Alsacréations Smiley biggrin )

Le problème est que j'ai réduit la largeur de la page à 90%, et lorsque j'insère mon menu dans le div "haut", la deuxième ligne (dynamique) sort du conteneur de mon site.

upload/2733-menupb.gif upload/2733-menupb2.gif

Je pense que cela est du à l'utilisation du positionnement absolu, mais je ne sais pas comment faire autrement !

Aidez-moi svp !! Smiley ohwell

LE HTML (partie du menu) :
<div id="conteneur">

	<div id="header">

		<img src="images/global/original/header/logo.jpg" />

	</div>


	<div id="haut">
	
		<dl>
			<dt onmouseover="montre('smenu1');" onkeypress="montre('smenu1');"><a href="actu/">Actu</a></dt>
				<dd id="smenu1">
					<ul>
						<li><a href="actu/">Toute l'actualité de la PlayStation Portable</a></li>
					</ul>
				</dd>
		</dl>
		
		<dl>			
			<dt onmouseover="montre('smenu2');" onkeypress="montre('smenu2');"><a href="jeux/">Jeux</a></dt>
				<dd id="smenu2">
					<ul>
						<li><a href="jeux/fiches.html">Fiches de jeux</a></li>
						<li><a href="jeux/tests.html">Tests</a></li>
						<li><a href="jeux/calendrier.html">Calendrier des sorties</a></li>
						<li><a href="jeux/astuces.html">Vos astuces</a></li>
					</ul>
				</dd>
		</dl>
		
		<dl>	
			<dt onmouseover="montre('smenu3');" onkeypress="montre('smenu3');"><a href="umd/">UMD</a></dt>
				<dd id="smenu3">
					<ul>
						<li><a href="umd/video/">UMD Vidéo</a></li>
						<li><a href="umd/audio/">UMD Audio</a></li>
						<li><a href="umd/calendrier.html">Calendrier des sorties</a></li>
					</ul>
				</dd>
		</dl>
		
		<dl>			
			<dt onmouseover="montre('smenu4');" onkeypress="montre('smenu4');"><a href="psplayers/">PSPlayers</a></dt>
				<dd id="smenu4">
					<ul>
						<li><a href="psplayers/liste.html">Tous les joueurs inscrits</a></li>
						<li><a href="psplayers/recherche.html">Recherche</a></li>
						<li><a href="psplayers/inscription.html">Créer sa fiche</a></li>
					</ul>
				</dd>
		</dl>
		
		<dl>	
			<dt onmouseover="montre('smenu5');" onkeypress="montre('smenu5');"><a href="faq/">FAQ</a></dt>
				<dd id="smenu5">
					<ul>
						<li><a href="faq/">Toute la FAQ</a></li>
						<li><a href="faq/console.html">La console</a></li>
						<li><a href="faq/jeux.html">Les jeux</a></li>
						<li><a href="faq/accessoires.html">Les accessoires</a></li>
					</ul>
				</dd>
		</dl>
		
		<dl>	
			<dt onmouseover="montre('smenu6');" onkeypress="montre('smenu6');"><a href="http://forums.playportable.com">Forums</a></dt>
				<dd id="smenu6">
					<ul>
						<li><a href="http://forums.playportable.com">Les forums PlayPortable</a></li>
						<li><a href="#">Le PlayBar</a></li>
						<li><a href="http://forums.playportable.com/index.php?act=Reg&CODE=00">Inscrivez-vous !</a></li>
					</ul>
				</dd>
		</dl>
		
		<dl>	
			<dt onmouseover="montre('smenu7');" onkeypress="montre('smenu7');"><a href="">+</a></dt>
				<dd id="smenu7">
					<ul>
						<li><a href="dossiers/">Dossiers</a></li>
						<li><a href="chroniques/">Chroniques</a></li>
						<li><a href="interviews/">Interviews</a></li>
						<li><a href="boutique/">Boutique goodies</a></li>
					</ul>
				</dd>
		</dl>
	
	</div>


LE CSS (début et partie du menu) :
body {
	font-family: Arial, Helvetica, sans-serif, Verdana;
	font-size: 0.8em;
	margin: 0;
	padding: 0;
	text-align: center;
}

#conteneur {
	width: 95%;
	margin: 0 auto 10px auto;
	padding: 0;
	text-align: left;
}

#header {
	height: 100px;
	margin: 0;
	padding: 5px 0 5px 0;
}

#haut {
	margin: 0;
	padding: 5px;
	height: 31px;
	font-size: 0.9em;
}
#haut dl, #haut dt, #haut dd, #haut ul, #haut li {list-style-type: none; padding: 0;}
#haut dl {float: left; margin: 0;}
#haut dt {margin: 0 5px;}
#haut dd {margin: 7px 0 0 10px; width: 500px;}
#haut ul, #haut li {margin: 0;}

#haut dt a {color: #006699; text-decoration: none; font-weight: bold;}
#haut dt a:hover {color: #0099CC;}
#haut li a {color: #0099CC; text-decoration: none;}
#haut li a:hover {color: #006B8E;}

#haut li {display: inline; margin: 0 5px 0 0;}
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7 {
	display: none;
	position: absolute;
	left: 0;
	font-size: 0.9em;
}
#smenu1 {display: block;}

Modifié par Spone (25 Jul 2005 - 20:42)

 #smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7 {
display: none;
[b]position: absolute;[/b] <===Je pense aussi que le probleme vient de la,
essayé de l'enlever ou de mettre "static" ou "relative"..
left: 0;
font-size: 0.9em;
}

#smenu1 {display: block;}  <===Pourquoi la remettre?..vous donnez la proprieté juste au dessu (none) [biggol]

Modifié par ghijselinck (23 Aug 2005 - 11:43)
Sujet clos
Aller à