18041 sujets

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

Tuto: Menu horizontal déroulant sur une ligne

Bonjour,

Je souhaite utiliser le tuto précisé dans le sujet, mais avec une position relative pour le div menu.
Du coup, tout se décale lors du roll over.
Que faut il changer d'autre dans le css, ou le js?

Merci d'avance.
Modifié par MV007 (12 Apr 2006 - 16:08)
Bonjour MV007,

Comme conseillé dans les règles du forum, je t'invite à donner plus d'éléments sur le contexte de ta page, en montrant ton code, ou en mettant ta page en ligne.

De même, un lien sur le tutoriel concerné serait un plus.
Smiley cligne Smiley smile
MV007 a écrit :
Du coup, tout se décale lors du roll over.
Que faut il changer d'autre dans le css, ou le js?

Salut,
IL suffit dans ce cas juste de mettre position:absolute; ailleurs
Smiley cligne

Bonne continuation
A+
MV007 a écrit :
Bonjour,

Je souhaite utiliser le tuto précisé dans le sujet, mais avec une position relative pour le div menu.
Du coup, tout se décale lors du roll over.
Que faut il changer d'autre dans le css, ou le js?

Merci d'avance.


Désolé Smiley confused

La page :
essai

le CSS:

#nav {
font-size: 10px;
margin-top:30px;
margin-left:100px;
text-align:center
font-family: Geneva, Arial, Helvetica, sans-serif;
color:#5b9e03;
}

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


#nav dl {
float: left;
}

#nav li {
display: inline;
}

#nav a {
text-decoration: none;
color: #000;
background: #fff;
}

#smenu1, #smenu2, #smenu3, #smenu4 {
margin-left:0px;
font-size: 0.7em;
border-top: 1px solid gray;
width: 400px;
}


Le tuto (ou plutot l'exemple):
menu

Par rapport à l'exemple, le div nav correspond au div menu.
Modifié par MV007 (12 Apr 2006 - 16:09)
Alan a écrit :

Salut,
IL suffit dans ce cas juste de mettre position:absolute; ailleurs
Smiley cligne

Bonne continuation
A+


C'est pas plutot relative?
Déja fait mais probleme d'alignement... Les sous menus restent sous les menus correspondants mais ne s'alignent pas tous à gauche.

#nav {
position:relative;
font-size: 10px;
margin-top:30px;
margin-left:100px;
text-align:center
font-family: Geneva, Arial, Helvetica, sans-serif;
color:#5b9e03;
}

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


#nav dl {
float: left;
}

#nav li {
display: inline;
}

#nav a {
text-decoration: none;
color: #000;
background: #fff;
}

#smenu1, #smenu2, #smenu3, #smenu4 {
position:absolute;
margin-left:0px;
font-size: 0.7em;
border-top: 1px solid gray;
width: 400px;
}

Modifié par MV007 (12 Apr 2006 - 16:38)
Modérateur
bonjour, tu y etais presque Smiley smile :

#nav
en relative
et
#smenuN
en absolute
avec comme coordonnées
left:0;

pour qu'il se replace au bord gauche de leur conteneur parent ..

++
Après 48 heures d'essais, je pense y être enfin arrivé. Sous IE6 pas de problème. Pour les autres navigateurs, je ne sais pas. Si c'est ok, alors ce topic est résolu (tout seul mais merci quand même Smiley cligne ).
Pour info, j'ai modifié le HTML et le CSS.

Rappel:
la page haccp

le CSS

Si les modo veulent que je rajoute le code directement sur le forum, y a pas de problème mais les pages sont longues!
Modifié par MV007 (13 Apr 2006 - 11:25)
MV007 a écrit :
Après 48 heures d'essais, je pense y être enfin arrivé. Sous IE6 pas de problème. Pour les autres navigateurs, je ne sais pas. Si c'est ok, alors ce topic est résolu (tout seul mais merci quand même Smiley cligne ).
Pour info, j'ai modifié le HTML et le CSS.

Rappel:
la page haccp

le CSS

Si les modo veulent que je rajoute le code directement sur le forum, y a pas de problème mais les pages sont longues!
MV007 a écrit :


Désolé Smiley confused

La page :
haccp

le CSS:

#nav {
font-size: 10px;
margin-top:30px;
margin-left:100px;
text-align:center
font-family: Geneva, Arial, Helvetica, sans-serif;
color:#5b9e03;
}

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


#nav dl {
float: left;
}

#nav li {
display: inline;
}

#nav a {
text-decoration: none;
color: #000;
background: #fff;
}

#smenu1, #smenu2, #smenu3, #smenu4 {
margin-left:0px;
font-size: 0.7em;
border-top: 1px solid gray;
width: 400px;
}


Le tuto (ou plutot l'exemple):
menu

Par rapport à l'exemple, le div nav correspond au div menu.
Administrateur
Hello MV007,

Je n'ai pas compris tes deux derniers messages : il s'agit simplement de citations sans autre explication Smiley ohwell
Bonjour, (je fais remonter le post dsl)

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

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

Sinon, 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 Smiley smile

cordialement,

ze debutant
Modifié par debutantcss (11 Jan 2007 - 16:55)
Bonjour et bienvenue sur Alsacréations, Smiley smile

Il faudrait mieux créer un nouveau sujet, les problèmes que l'on peut rencontrer sont probablement différents de ceux de l'auteur du post original.
Sujet clos
Aller à