28172 sujets

CSS et mise en forme, CSS3

Espacements dans le sous-menu [Résolu]

Bonjour.

Je n'arrive pas à trouver comment faire pour moins espacer les éléments du sous-menu pour qu'ils aient un espace entre eux différends de celui du menu principal.

Voici le lien vers mon test de menu: http://largowin.com/z/menu.html

et voici le code pour assurer un peu de pérennité à la chose:

Merci de votre aide.



	#navigation {margin-left: 300px}
	
	#nav {
		margin: 0;
		padding: 56px 5px 12px 235px ;
		font-family:Verdana, Geneva, sans-serif;
		text-transform: uppercase;
		font-size:16px;
	}

	#nav li.on ul, #nav li.off ul, #nav li.offv ul, #nav li.offc ul, #nav li.offd ul {
		margin: 0;
		padding: 0;
	}

	#nav a {
		
		text-decoration: none;
	}

	#nav li { /*float the main list items*/
		margin: 0;
		float: left;
		display: block;
		padding-right: 15px; 
	}


	#navv li { 
		padding-right: 2px; 
	}

	#nav li ul {
		display: none;
	}

	#nav li.off ul, #nav li.on ul, #nav li.offv ul, #nav li.offc ul, #nav li.offd ul { /*put the subnav below*/
		position: absolute;
		top: 33px;
		*top: 44px;
		padding-top: 50px;
		height: 28px;
	}

	#nav li a {
		color: #343435;
		display: block;
		height: 15px;
	}

	#nav li.on a {
		color: #343435;
	}

	#nav li.on ul a, #nav li.off ul a, #nav li.offv ul a, #nav li.offc ul a, #nav li.offd ul a {
		float: left; /*ie doesn't inherit the float*/
		border: 0;
		color: #343435;
		width: auto;
	}

	#nav li.on ul {
		display: block;
	}

	#nav li.off:hover ul, #nav li.offv:hover ul, #nav li.offc:hover ul, #nav li.offd:hover ul {
		display: block;
		z-index: 6000;
				}

	#nav li.off a:hover, #nav li:hover a, #nav li.offv a:hover, #nav li.offc a:hover, #nav li.offd a:hover {
		color: #fd0002;
	}
	
	/* Disposition des 3 sousmenus */
	
	#nav li.offv ul {
	left: 654px;
	}

#nav li.offc ul {
	left: 728px; 
	}

#nav li.offd ul {
	left: 750px;
	}		
	</style>




<body>

<div id="navigation">
	<ul id="nav">
				<li class="off"><a href="#">About us</a></li>
			<li class="offv"><a href="#">Vintage</a>
				<ul>
  					<li><a href="#">1</a></li>
  					<li><a href="#">2</a></li>
				</ul>
            </li>
	<li class="offc"><a href="#">Collections</a>
	<ul>
					<li><a href="#">1</a></li>
  					<li><a href="#">2</a></li>
  					<li><a href="#">3</a></li>
  					<li><a href="#">4</a></li>
  					<li><a href="#">5</a></li>
  					<li><a href="#">6</a></li>
	</ul>
    </li>
   
			<li class="offd"><a href="#">Designers</a>
				<ul>
  					<li><a href="#">1</a></li>
  					<li><a href="#">2</a></li>
  					<li><a href="#">3</a></li>
				</ul>
 </li>
			<li class="off"><a href="#">Craftmanship</a></li>
			<li class="off"><a href="#">Contact</a></li>
		</ul>
        </div>
</body>

Modifié par largowin (08 Jun 2011 - 12:00)
Bonjour,

Essaie ceci :

1) ajouter après la ligne 

	#nav li ul {
		display: none;
	}

ce qui suit :
#nav li ul li {margin-left: -15px;}


2) modifier la fin du CSS comme suit :

	/* Disposition des 3 sousmenus */
	#nav li.offv ul {left: 658px;}
	#nav li.offc ul {left: 745px;}
	#nav li.offd ul {left: 876px;}


Tu peux bien sûr changer la valeur du margin-left, mais il faudra adapter les valeurs des "left" pour les sousmenus !

Cordialement
Super! Ça fonctionne très bien. Merci beaucoup!

lddsoft a écrit :


Tu peux bien sûr changer la valeur du margin-left, mais il faudra adapter les valeurs des &quot;left&quot; pour les sousmenus !


En fait, je n'ai même plus besoin
Désolé de réactiver ce vieux post, mais deux autres questions par rapport à ce menu que j'ai finalement utilisé pour ce site : http://thomasjewellery.com/aboutus.html

La cliente veut que lorsque je suis sur la page About us ou la sous-page Collections 1 par exemple, que le mot du menu soit en rouge.

J'ai essayé de mettre une deuxième classe avec la classe off dans la page html mais ça ne fonctionne pas.

J'avoue que je m'y perds un peu avec ces sous-menus.

Finalement, question stupide je suppose, mais je ne comprends pas pourquoi le menu ne se colle pas à droite de mon div global (gabarit pris sur Alsa).

Bref, une aide serait grandement appréciée.

Merci
Modifié par largowin (31 May 2011 - 04:20)
Bonjour,
largowin a écrit :
La cliente veut que lorsque je suis sur la page About us ou la sous-page Collections 1 par exemple, que le mot du menu soit en rouge.

Pour chaque page concernée:
<li class="off rouge"><a href="#">About us</a></li>

Dans le fichier "base.css", ajouter juste avant "Fin navigation" :

#nav li.rouge a:link {color: red}
#nav li.rouge ul li a:link {color: black}
#nav li.rouge ul li a:hover {color: red}


Il faudrait revoir l'utilisation de ces différentes classes: "off", "on", "offv", "offc", "offd". Je dois dire que je m'y perds un peu Smiley sweatdrop .

largowin a écrit :
pourquoi le menu ne se colle pas à droite de mon div global (gabarit pris sur Alsa).

Parce qu'il est enfermé dans un autre div moins large que le "div global" et qui est centré par rapport à ce dernier.
Modifié par lddsoft (31 May 2011 - 06:28)
lddsoft a écrit :


Il faudrait revoir l'utilisation de ces différentes classes: &quot;off&quot;, &quot;on&quot;, &quot;offv&quot;, &quot;offc&quot;, &quot;offd&quot;. Je dois dire que je m'y perds un peu Smiley sweatdrop .

Et moi donc! Blague à part, j'ai gardé le off en ajoutant la première lettre du mot de chaque onglet du menu. Je ne me souviens plus pourquoi j'avais fait ça par contre Smiley biggrin . Va falloir en effet que je fasse le ménage dans ça.

Quoiqu'il en soit, merci beaucoup pour ta solution; ça fonctionne impec. Va falloir que je me plonge dans la syntaxe associée à ce genre de menu.

Parce qu'il est enfermé dans un autre div moins large que le &quot;div global&quot; et qui est centré par rapport à ce dernier.


Oui mais, aucune largeur n'est associée à aucune autre div que global. Il me semble que ça devrait fonctionner sur le même principe que le footer et prendre toute la largeur automatiquement.
largowin a écrit :
Oui mais, aucune largeur n'est associée à aucune autre div que global. Il me semble que ça devrait fonctionner sur le même principe que le footer et prendre toute la largeur automatiquement.


Ton div global fait 990px en largeur et est centré sur la fenêtre (margin-left/right en auto).
Ton div nav est un enfant de div global et de div entete. Aucune largeur n'est spécifiée. Cette largeur est donc égale à 100% du parent.

Précise un peu ton souhait. Où voudrais-tu voir le menu?
Ça y est... J'ai trouvé. Il y avait un padding-right: 15px; séparer les éléments du menu que j'avais oublié. Je l'ai changé pour un padding-left (pas encore en ligne, car j'ai d'autres trucs à régler avant aussi).

Merci pour ton aide précieuse.
Sujet clos
Aller à