[résolu] Menu onglet avec <li> avec alignement et propri

Question

Fugugirl

31 Oct 2007 à 11:50

Bonjour à tous,

je suis en train de faire un menu en onglet en css avec une apparence OFF, ON et CURRENT (sélectionné). Jusque là tout va bien. Là où ça commence à coincer pour mon cerveau c'est quand on me demande que sur ce menu à 100%, d'isoler deux rubriques et les ferrer à droite avec des images de OFF, ON et CURRENT différentes. De plus dans ce menu sont imbriqués autant de sous-menu que de <li> afficher via une fonction javascript "montre on click" grosso modo...

Quelle méthode adopter ? La superposition des menus avec des postions absolute ? Ca me semble un peu barbare.

Voilà un code type qui pourrait me servir de base sans les ssmenus.


ul#menu009{
	margin:0;
	padding:0;
	list-style-type:none;
	width:auto;
	font-size:12px;
	height:36px;
	font-family:Tahoma, Verdana, Arial, Helvetica;
	position:relative;
	display:block;
	font-weight:bold;
	background:url("bkg_off.gif") repeat-x left top;
	border-bottom:5px solid #64812a;
	border-top:1px solid #cbd77e;}

ul#menu009 li{
	display:block;
	float:left;
	margin:0;
	padding:0;}

ul#menu009 li a{
	display:block;
	float:left;
	color:#486215;
	text-decoration:none;
	padding:12px 20px 0 20px;
	height:24px;
	background:url("separator.gif") no-repeat right top;}

ul#menu009 li a:hover{
	background:url("hover.gif") no-repeat right top;}

ul#menu009 li a.current,ul#menu009 li a.current:hover{
	color:#fff;
	background:url("bkg_on.gif") no-repeat right top;}

<ul id="menu009">
<li><a href="#">Home</a></li>
<li><a href="#" class="current">Products</a></li>
<li><a href="#">Services</a></li>

<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>

Merci de vos conseils.
Bonne journée,
Aurélia.
Modifié par Fugugirl (01 Nov 2007 - 15:22)

Lideln

31 Oct 2007 à 14:14

Mmmmh si je comprends bien, il te faudrait un menu de base, doublé d'une classe "àdroite" qui change les aspects ON, OFF et CUR, et qui soit en float:right, non ?
J'ai pas testé et jsuis pas un roi de css, mais dans l'esprit c'est ce qui semble le plus logique.

Jsuis ptet à côté de la plaque et j'ai ptet mal saisi ce que tu voulais aussi...

EDIT :
après un rapide test sous FF, j'obtiens bien *ce que je pense que tu veux* avec :



ul#menu009 li, ul#menu009 li.toTheRight
{
	display:block;
	margin:0;
	padding:0;
}

ul#menu009 li
{
	float: left;
}

ul#menu009 li.toTheRight
{
	float: right;
}

et


<ul id="menu009">
	<li><a href="home">Home</a></li>
	<li><a href="products" class="current">Products</a></li>
	<li><a href="services">Services</a></li>
	<li class="toTheRight"><a href="about">About us</a></li>
	<li class="toTheRight"><a href="contact">Contact us</a></li>
</ul>

Modifié par Lideln (31 Oct 2007 - 14:24)

Fugugirl

31 Oct 2007 à 14:16

Yes c'est ça en théorie. Agir sur quelques balises <li> avec des class ou id pour les balancer de l'autre côté de l'écran. Je teste en ce moment... Je reviendrai plus tard si je bloque sur le code Smiley smile

Merci
A.

Lideln

31 Oct 2007 à 14:22

cf mon edit ci-dessus Smiley smile

Fugugirl

1 Nov 2007 à 06:58

Je reviens parce qu'il est très tôt et que je ne trouve pas la solution. J'ai tenté ton code, Lideln, mais ça n'a pas fonctionné chez moi... Smiley decu

Je dois pas être très douée.

Ma page est visible là : http://alarenverse.com/pagebase/base_menu_2.html

J'ai aussi le problème des hover pas pris en compte pour les deux ID/Class (j'ai fait les deux dans un état pas possible ne m'en veuillez pas) créées spécialement pour les rubriques administration et ajouter du temps...

La solution est peut-être ailleurs.

Merci de votre aide à tous,
Aurélia.

/*------------------- NAVIGATION
---------------------------------*/
ul {margin:0;
padding:0;}

ul#menu009{
	margin:0;
	padding:0;
	list-style-type:none;
	font-size:12px;
	height:36px;
	font-family:Tahoma, Verdana, Arial, Helvetica;
	/*position:relative;*/
	/*display:block;*/
	font-weight:normal;
	background:url("bkg_off.gif") repeat-x left top;
	border-top:1px solid #728aa7;}

ul#menu009 li{
	display:block;
	float:left;
	margin:0;
	padding:0;}
	
ul#menu009 li a{
	display:block;
	float:left;
	color:#000066;
	text-decoration:none;
	padding:12px 10px 0 10px;
	height:24px;
	background:url("separator.gif") no-repeat right top;}

ul#menu009 li a:hover{
	background:url("hover.gif") no-repeat right top;}

ul#menu009 li a.current,ul#menu009 li a.current:hover{
	color:#fff;
	background:url("bkg_on.gif") no-repeat right top;}
	
li#admin {
	background:url("bkg_off_admin.gif") repeat-x left top;
	display:block;
	margin:0;
	padding:0;
	}


li#admin a{
	color:#31509d;
	text-decoration:none;
	padding:12px 10px 0 10px;
	font-weight:normal;
	height:24px;
	background:url("separator_admin.gif") no-repeat right top;}

li#admin a.currentad {
	color:#fff;
	background:url("bkg_on_admin.gif") no-repeat right top;}
	
li.punch {
	background:url("bkg_off_punch.gif") repeat-x left top;
	display:block;
	margin:0;
	padding:0;
	}


li.punch a{
	color:#31509d;
	text-decoration:none;
	padding:12px 10px 0 10px;
	font-weight:normal;
	height:24px;
	background:url("separator_punch.gif") no-repeat right top;}
	
li.punch a:hover{
	background:url("hover_punch.gif") no-repeat right top;}

li.punch a.currentpu{
	color:#fff;
	background:url("bkg_on_punch.gif") no-repeat right top;}


<ul id="menu009">
<li><a href="#">Projets &agrave; la loupe</a></li>
<li><a href="#">T&acirc;ches en cours</a></li>
<li><a href="#" class="current">T&acirc;ches effectu&eacute;es</a></li>
<li><a href="#">Planning</a></li>
<li><a href="#">Statistiques</a></li>
<li><a href="#">Rapports</a></li>
<li><a href="#">Géolocalisation</a></li>
<li class="punch"><a href="#">Ajouter du temps</a></li>
<li id="admin"><a href="#">Administration</a></li>
</ul>
				<ul id="ssmenu1">
                  <li>sstitre 1</li>
                    <li>sstitre 2</li>
                    <li>sstitre 3</li>
                    <li>sstitre 2</li>
                </ul>

Lideln

1 Nov 2007 à 14:01

Hello !

Alors ce que tu veux faire c'est juste :
1) aligner "ajouter du temps" et "administration" à droite
2) mettre un :hover différent pour ces deux la
et c'est tout ?

Si oui, normalement mon exemple fonctionne. Mets bien :


ul#menu009 li#admin
{
	background:url("bkg_off_admin.gif") repeat-x left top;
	display:block;
	float: right; /* Ici on écrase la propriété float: left définie plus haut*/
	margin:0;
	padding:0;
}

Je ne sais pas si ça a une importance, mais pour ma part je prends toujours le soin d'écrire le parent quand je sais qu'un élément en a forcément un.
Par exemple ici :
ul#menu009 li#admin
et pas juste :
li#admin

Encore une fois je ne sais pas si ça a une importance, je trouve cela plus strict et plus carré, donc mieux Smiley smile

Pour le changement de background, avec un peu de chance c'est dû à ça.
Je vais faire des tests chez moi et je te tiens au courant.

Bon finalement j'ai fait les tests avant de poster, et ça fonctionne.

Il faut bien préciser le parent, comme je t'ai dit :
CSS


ul {margin:0;
padding:0;}

ul#menu009{
	margin:0;
	padding:0;
	list-style-type:none;
	font-size:12px;
	height:36px;
	font-family:Tahoma, Verdana, Arial, Helvetica;
	/*position:relative;*/
	/*display:block;*/
	font-weight:normal;
	background:url("bkg_off.gif") repeat-x left top;
	border-top:1px solid #728aa7;}

ul#menu009 li{
	display:block;
	float:left;
	margin:0;
	padding:0;}
	
ul#menu009 li a{
	display:block;
	float:left;
	color:#000066;
	text-decoration:none;
	padding:12px 10px 0 10px;
	height:24px;
	background:url("separator.gif") no-repeat right top;}

ul#menu009 li a:hover{
	background:url("hover.gif") no-repeat right top;}

ul#menu009 li a.current,ul#menu009 li a.current:hover{
	color:#fff;
	background:url("bkg_on.gif") no-repeat right top;}
	
ul#menu009 li#admin {
	background:url("bkg_off_admin.gif") repeat-x left top;
	display:block;
	float: right;
	margin:0;
	padding:0;
	}


ul#menu009 li#admin a{
	color:#31509d;
	text-decoration:none;
	padding:12px 10px 0 10px;
	font-weight:normal;
	height:24px;
	background:url("separator_admin.gif") no-repeat right top;}

ul#menu009 li#admin a.currentad {
	color:#fff;
	background:url("bkg_on_admin.gif") no-repeat right top;}
	
ul#menu009 li.punch {
	background:url("bkg_off_punch.gif") repeat-x left top;
	display:block;
	float: right;
	margin:0;
	padding:0;
	}


ul#menu009 li.punch a{
	color:#31509d;
	text-decoration:none;
	padding:12px 10px 0 10px;
	font-weight:normal;
	height:24px;
	background:url("separator_punch.gif") no-repeat right top;}
	
ul#menu009 li.punch a:hover{
	background:url("hover_punch.gif") no-repeat right top;}

ul#menu009 li.punch a.currentpu{
	color:#fff;
	background:url("bkg_on_punch.gif") no-repeat right top;}

Et HTML (car avec le float:right, ca t'affiche le plus à droite le premier que tu spécifies, et comme tu veux administration tout au bout (à priori) on change l'ordre d'affichage des deux div dans le html)


	<ul id="menu009">
	<li><a href="#">Projets &agrave; la loupe</a></li>
	<li><a href="#">T&acirc;ches en cours</a></li>
	<li><a href="#" class="current">T&acirc;ches effectu&eacute;es</a></li>
	<li><a href="#">Planning</a></li>
	<li><a href="#">Statistiques</a></li>
	<li><a href="#">Rapports</a></li>
	<li><a href="#">Géolocalisation</a></li>
	<li id="admin"><a href="#">Administration</a></li>
	<li class="punch"><a href="#">Ajouter du temps</a></li>
	</ul>

Voilà, n'oublie pas de spécifier un :hover pour ton administration (et pourquoi n'utilises tu pas la technique "des tiroirs" dont tu parlais - avec juste raison - dans un autre post ? Smiley cligne

)

Enjoy,

Renaud

Fugugirl

1 Nov 2007 à 14:26

Ca marche un peu comme les portes coulissantes, sans en être vraiment. J'aime tenter de nouvelles choses.

Le problème pour mes align resterait le même. J'essaie tout ça et merci encore de ton obstination à me faire comprendre. Je note ta remarque sur les parents et leur déclaration systématique. Smiley lol

Apprendre c'est mon truc et j'aime qu'on m'explique.

Très bonne journée à toi,
Aurélia.

Fugugirl

1 Nov 2007 à 15:01

Merci encore. Je viens de mettre ça en place et ça marche nickel sous FF (je suis sur Mac). Il ne reste plus qu'à tester avec IE6...

Tschüß
Aurélia.

Lideln

1 Nov 2007 à 15:46

Ah quelle horreur, Mac Smiley smile

Ravi d'avoir pu aider,

Grüsse

Sujet clos

CSS et mise en forme, CSS3

[résolu] Menu onglet avec <li> avec alignement et propri