Adaptation du tuto

Bonjour,

J'ai besoin d'une petite aide sur un menu qui part du tutoriel, ainsi par la suite, du post de MV007 ,

Partons de ce dernier, que j'ai deja adapté, non pas sur une ligne, mais sur une liste déroulante.

J'essaye en vain de faire plusieurs choses....

J'aurais besoin de :
- le centrer sur la page (en fait il sera dans une celulle TD)
- faire en sorte que chaque sous menu apparaisse sous le menu parent
car la tout apparait sur la gauche :s
- fair en sorte que le le reste de la page, sous le menu ne se décale pas lorsque le menu s'ouvre...

Si vous pouviez m'aider, j'en serais tres reconnaissant, voici le code, il resemble a celui du haut :

<style>

#nav {
position:relative;
margin:auto;
padding-left:270px;
padding-top:22px;

text-align:center;
height:30px;
font-family: verdana, courier, monospace; 
}

#menunav {
text-align:left;
}

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


#menunav dl {
float:left;
font-weight:bold;
font-size:10px;
}

#menunav dd {
float:left;
}

#last {
float:left;
clear:right;
}

#menunav li {

list-style-type: none;
margin: 0 0 0 0;
padding: 0;
}

#menunav a, a:visited {
text-decoration: none;
color:#5b9e03;
}

#menunav a:hover {
text-decoration:none;
color:#000000;
}


#smenu1, #smenu2, #smenu3, #smenu4, #smenu5 {
position:absolute;
margin-left:0px;
font-size: 9px;
/*border-top: 1px solid gray;*/
clear:both;
width:480px;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a {
color:#000000;
}



</style>
<center>
<div id="nav" align=center>
  <div id="menunav">
	<dl>
		<dt onmouseover="montre('smenu1');"><a href="#">MENU 1</a></dt>
			
	</dl>
	<dl>			
		<dt onmouseover="montre('smenu2');"><a href="#">MENU 2 TITRE LONG</a></dt>
			
	</dl>
		<dl>	
		<dt onmouseover="montre('smenu3');"><a href="#">MENU 3</a></dt>
			
	</dl>
	<dl>	
		<dt onmouseover="montre('smenu4');"><a href="#">MENU 4</a></dt>
			
	</dl>
		<dl>	
		<dt onmouseover="montre('smenu5');"><a href="#">MENU 5</a></dt>
			
	</dl>

	
	<dd id="smenu1">
				
				
					<li><a href="test5">test1.1</a></li>
					<li><a href="test5">test1.2</a></li>
	  </dd>
	
	<dd id="smenu2">
				
				
					<li><a href="test5">test2.1</a></li>
					<li><a href="test5">test2.2</a></li>

				
	  </dd>
	
	<dd id="smenu3">
				
				
					<li><a href="test5">test3.1</a></li>
					<li><a href="test5">test3.2</a></li>
	  </dd>
	  
 	<dd id="smenu4">
				
					<li><a href="test5">test4.1</a></li>
					<li><a href="test5">test4.2</a></li>
				
  </dd>
 
	<dd id="smenu5">
				
					<li><a href="test5">test5.1</a></li>
					<li><a href="test5">test5.2</a></li>
				
	  </dd>

</div>
</div>

</center>

Merci à tous ceux qui pourront m'aider

cordialement,

ze debutant
Modifié par debutantcss (11 Jan 2007 - 16:55)

debutantcss a écrit :
J'ai besoin d'une petite aide sur un menu qui part du tutoriel, ainsi par la suite, du post de MV007 ,

Hello,

J'ai peut-être mal lu ton sujet, mais je crois qu'à aucun moment tu n'indiques de quel tutoriel tu parles

oui pardon
Menu horizontal déroulant sur une ligne

Salut,

Tes cadres des sous-menu flottent à gauche car il y a

#menunav dd {
float:left;
}

Donc essaie de l'enlever. Mais je ne crois pas que ca corrige ton problème (j'ai pas testé). Donc ce que tu peut faire -car je ne crois pas que l'on puisse centrer les cadres de sous-menu- tu met la même taille pour les cadre de sous-menu que pour l'onglet #menunav.

Ensuite pour ton problème de centrer tu met dans ton css :

#menunav {
margin: auto;
}

Ca devrait aller je pense .

Je pense que le contenu de la page sous le menu bouge car tu as mis deux <di> alors qu'une aurait suffit. Enlève ton <div id="nav"></div>
Par contre si ca ne marche pas il faudra que tu passes le reste de ton code qui comporte le contenu de ton corps.

Voila en espèrant t'avoir aider. A+