28173 sujets

CSS et mise en forme, CSS3

Menu <ul> et <li> avec CSS --> Petite Précision

Bonsoir à tous.

J'ai créé un menu horizontal dans mon site, mis en page grâce à cet outil fabuleux qu'est le CSS Smiley loveu .

Voilà un extrait de mon code CSS :

ul.menu1 {
	list-style-type: none;
	padding:0;
	position:absolute;
	top: 14.5em;
	width: 760px;
	margin-left:auto;
	margin-right:auto;
}

li.menu1 {
	margin-left:auto;
	margin-right:auto;
	float: left;
}

.menu1 a {
	height: 20px;
	display: block;
	text-align: center;
	border: 1px solid #CCCCCC; 
	text-decoration: none;
	color: #000; 
	background: #fff;
	border-spacing: 1px;
	padding-left: 5px;
	padding-right: 5px;
}


Exemple de code HTML pour le menu :

<ul class="menu1">
<li class="menu1" style="width: 100px;"><a href="index.php">Accueil</a></li>


Ça me donne un menu d'un bloc, j'ai créé 6 boutons, tout fonctionne impeccable !!!

Cependant, j'aimerais que mes 6 boutons soient séparés : 3 à gauche, 3 à droite. J'ai pensé à créer un bouton invisible, afin de les séparer, mais je n'arrive pas à le faire :x !!!

Avez-vous une idée ?

Merci beaucoup,

Vince_122
Modifié par Vince_122 (16 Dec 2007 - 22:56)
Bonsoir,

Il te suffit à priori de faire flotter à gauche (float:left) les trois premiers éléments de liste et à droite (float:right) les trois suivants.

Tu as plusieurs manières de cibler ces deux groupes, dont:
• l'ajout d'une même classe aux 3 premiers et d'une seconde aux 3 derniers
• l'utilisation du sélecteur de frère adjacent (inopérant sur Internet Explorer 6 et inférieur)

La première solution est tout ce qu'il y a de plus simple à mettre en œuvre. La dernière possibilité, quant à elle, s'emploiera de la sorte:

li {float:left;}
li+li+li+li {float:right;}
Petite précision tout de même: le fait de faire flotter des éléments à droite implique une modification visuelle de leur ordre d'apparition. Si ce n'est pas l'effet recherché, il te faudra oublier cette solution et alterner par exemple flottants et éléments en ligne de la sorte:

ul {text-align:right;}
li {float:left;}
li+li+li+li {display:inline; float:none;}
En effet ca fonctionne nickel Smiley smile
Juste un petit soucis avec ma balise <a>, elle n'est plus detectée !!!

Le a:hover et <span> ne fonctionnent plus Smiley decu

http://www.24heurespourlafrance.com/nouvelleversion/
Pour voir ce que ca donne.

Merci beaucoup,

Vince_122

PS : J'ai comparé les 2 propriétés CSS et les 2 parties du code HTML, elles sont exactement similaires (sauf évidemment le float: left et right Smiley cligne )


CODE HTML :

<div id="menu1">
<ul class="menu1g">
<li class="menu1g" style="width: 100px;"><a href="index.php">Accueil<span>Accueil du site 24 heures pour la France</span></a></li>
<li class="menu1g" style="width: 100px;"><a href="">FAQ<span>Foire Aux Questions</span></a></li>
<li class="menu1g" style="width: 180px;"><a href="quisommesnous.php">Qui sommes nous ?<span>Page qui sommes nous</span></a></li>
</ul>
<ul class="menu1d">
<li class="menu1d" style="width: 100px;"><a href="">Contact<span>Page de contact</span></a></li>
<li class="menu1d" style="width: 160px;"><a href="">Rejoindre l'équipe<span>Venez nous proposer vos services !</span></a></li>
<li class="menu1d" style="width: 100px;"><a href="">Dons<span>Page de Dons</span></a></li>
</ul>
</div>


CSS

#menu1 {
	margin-left:auto;
	margin-right:auto;
	width:810px;
}

ul.menu1g {
	list-style-type: none;
	padding:0;
	position:absolute;
	top: 14.5em; /* positionnement du menu, que vous pouvez changer à loisir */
	width: 810px; /* précision pour Opera */
	margin-left:auto;
	margin-right:auto;
}

li.menu1g {
	margin-left:auto;
	margin-right:auto;
	float: left;
}

.menu1g a {     /* définition de chaque bouton du menu */
	height: 20px;
	display: block;
	text-align: center;
	border: 1px solid #CCCCCC; 
	text-decoration: none;
	color: #000; 
	background: #fff;
	border-spacing: 1px;
	padding-left: 5px;
	padding-right: 5px;
}

.menu1g a:hover {
	color: #411;
	background: #ffffbb;
	border: 1px solid gray; 
	border-bottom: 0px;
	color: black;
}

.menu1g a span {     /* définition de la balise <span> inclue dans <a> */
	display: none;
}

.menu1g a:hover span {   /* définition de la balise <span> au survol */
	display: block;
	position: absolute;
	top: 20px;
	left: 0;
	width: 810px;       /* largeur de la zone de commentaires, selon la taille du menu */
	text-align: left;
	color: black;
	padding-left: 10px;
}

ul.menu1d {
	list-style-type: none;
	padding:0;
	position: absolute;
	top: 14.5em; /* positionnement du menu, que vous pouvez changer à loisir */
	width: 810px; /* précision pour Opera */
	margin-left:auto;
	margin-right:auto;
}

li.menu1d {
	margin-left:auto;
	margin-right:auto;
	float: right;
}

.menu1d a {     /* définition de chaque bouton du menu */
	/*width: 100px;	   /* largeur du bouton, que vous pouvez changer à loisir */
	height: 20px;
	display: block;
	text-align: center;
	border: 1px solid #CCCCCC; 
	text-decoration: none;
	color: #000; 
	background: #fff;
	border-spacing: 1px;
	padding-left: 5px;
	padding-right: 5px;
}

.menu1d a:hover {
	color: #411;
	background: #ffffbb;
	border: 1px solid gray; 
	border-bottom: 0px;
	color: black;
}

.menu1d a span {     /* définition de la balise <span> inclue dans <a> */
	display: none;
}

.menu1d a:hover span {   /* définition de la balise <span> au survol */
	display: block;
	position: absolute;
	top: 20px;
	left: 0;
	width: 705px;       /* largeur de la zone de commentaires, selon la taille du menu */
	text-align: left;
	color: black;
	padding-left: 10px;
}

Modifié par Vince_122 (17 Dec 2007 - 20:12)
Sujet clos
Aller à