28172 sujets

CSS et mise en forme, CSS3

Supprimer le premier séparateur dans un menu [Résolu]

Bonjour,

J'ai essayé de créer une feuille de style pour ajouter des séparations entre les boutons de mon menu, j'ai presque réussi, mais le séparateur est aussi à droite de mon premier bouton !

Je veux supprimer le premier séparateur, mais comment faire ? Smiley rolleyes

Vous avez peut-être une idée ? Smiley biggrin

http://s347489368.onlinehome.fr/menu-separateur.jpg

Voici mon CSS :

/* DEFAULT */
div.customenu_layout_default div.customenu_default a span{
background: transparent url(../images/menu_button.png) repeat-x 50% 0;
}

/* DEFAULT: hover */
div.customenu_layout_default div.customenu_default a span.link_hover {
background: transparent url(../images/menu_button.png) repeat-x 50% 0;
background-position: 50% -48px!important;
}

/* DEFAULT: active */
div.customenu_layout_default div.customenu_default  a span.link_active  {
background-image: url(../images/menu_button-lock.png), url(../images/menu_button.png)!important;
background-position: left top, 50% -96px!important;
background-repeat: no-repeat, repeat-x!important;
}

/* LAYOUT */

div.customenu_layout_default div.customenu_default {
}

div.customenu_layout_default div.customenu_default,
div.customenu_layout_default div.customenu_default a,
div.customenu_layout_default div.customenu_default span {
background: transparent url(../images/menu_button.png) repeat-x 50% 0;
margin: 0;
padding: 0;
}

div.customenu_layout_default div.customenu_default a span {
background: url("../images/menu_separ.png") no-repeat scroll left top transparent;
float: left;
height: 38px; /* height - padding */
padding: 10px 29.7px 0;
/* width: 250px; */ /* for fixed widths */
text-align: center;
cursor: pointer;
/*border-right: 2px solid #4eb9da;*/
}

div.customenu_layout_default div.customenu_default a,
div.customenu_layout_default div.customenu_default a:hover,
div.customenu_layout_default div.customenu_default a span {
line-height: 1.4em;
font-size: 18px;
font-weight: normal;
text-decoration: none;
color: #FFFFFF;
display: inline-block; /* NEEDED FOR IE ON MAC */
}


/* OVERRIDE */
/* Overide any stuff you want per menu item
* Things like backgrounds, widths, heights, etc.
* You can do this for any count of items
*/
div.customenu_layout_default div.customenu_default a.link_1 span {

}
div.customenu_layout_default div.customenu_default a.link_2 span {
}
div.customenu_layout_default div.customenu_default a.link_3 span {
}
div.customenu_layout_default div.customenu_default a.link_4 span {
}

/* OVERRIDE: normal */

div.customenu_layout_default div.customenu_default a.link_1 span.link_normal {
/*background: url('/"../images/menu_separ.png"') no-repeat scroll left top transparent!important;
opacity: 0.5;*/
}


Voici l'HTML de mon menu

<div class="customenu_layout_default">
	<div class="customenu_default">

		<a onfocus="this.blur();" class="link_1 link_id28 link_inactive " title="Accueil" href="/index.php/accueil"><span onmouseout="changeClassName(this,'link_hover','link_normal');" onmouseover="changeClassName(this,'link_normal','link_hover');" class="link_1 link_id28 link_inactive link_normal">Accueil</span></a>
		
		<a onfocus="this.blur();" class="link_2 link_id29 link_inactive " title="Qui sommes-nous ?" href="/index.php/qui-sommes-nous"><span onmouseout="changeClassName(this,'link_hover','link_normal');" onmouseover="changeClassName(this,'link_normal','link_hover');" class="link_2 link_id29 link_inactive  link_normal">Qui sommes-nous ?</span></a>
		
		<a onfocus="this.blur();" class="link_3 link_id18 link_inactive " title="Nos services" href="/index.php/nos-services"><span onmouseout="changeClassName(this,'link_hover','link_normal');" onmouseover="changeClassName(this,'link_normal','link_hover');" class="link_3 link_id18 link_inactive  link_normal">Nos services</span></a>
		
		<a onfocus="this.blur();" class="link_4 link_id30 link_inactive " title="Tarifs" href="/index.php/tarifs"><span onmouseout="changeClassName(this,'link_hover','link_normal');" onmouseover="changeClassName(this,'link_normal','link_hover');" class="link_4 link_id30 link_inactive  link_normal">Tarifs</span></a>
		
		<a onfocus="this.blur();" class="link_5 link_id86 link_inactive " title="Nous contacter" href="/index.php/nous-contacter?view=ckforms&amp;id=1"><span onmouseout="changeClassName(this,'link_hover','link_normal');" onmouseover="changeClassName(this,'link_normal','link_hover');" class="link_5 link_id86 link_inactive  link_normal">Nous contacter</span></a>
		
		<a onfocus="this.blur();" class="link_6 link_id106 link_inactive " title="Recrutement" href="/index.php/recrutement"><span onmouseout="changeClassName(this,'link_hover','link_normal');" onmouseover="changeClassName(this,'link_normal','link_hover');" class="link_6 link_id106 link_inactive link_normal">Recrutement</span></a>

	</div>
</div>

Modifié par vertig (29 Aug 2011 - 14:56)
Salut salut,

Franchement sans ton HTML c'est dur d'être plus précis, mais à ce que je vois ton petit séparateur c'est une image (tu aurais pu utilisé la propriété content avec les pseudos classes after et before). Donc à vue de nez je dirais :


div.customenu_layout_default div.customenu_default:first-child a span
{
background: inherit;
}


Peut être, à voir. Je n'ai jamais utilisé first-child avec des sélecteurs encore après à vrais dire..(hué moi). C'est peut être une énormité en fait, de toute façon on me le dira vite fais Smiley langue
Modifié par Gili (29 Aug 2011 - 13:42)
Gili a écrit :
Je n'ai jamais utilisé first-child avec des sélecteurs encore après

C'est tout à fait faisable et ça ne pose pas de problème.

vertig, tu peux utiliser element:first-child comme suggéré par Gili, ou encore un sélecteur du type element + element qui te permet d'exclure le premier élément dans une suite de frères. Voilà pour les bases, à toi d'adapter ça à ta structure HTML en écrivant les bons sélecteurs. Smiley cligne
Merci Gili, fvsch Smiley smile

C'est vrai qu'afficher le HTML c'est judicieux ! J'étais concentré sur le style.

Mais voilà, c'est réparé !

Je test le code de Gili, mais à première vu, ça efface toutes mes séparations ! Je travail un peu dessus pour voir comment je peux me servir de first-child (je ne connais pas, je m'informe avant !)


div.customenu_layout_default div.customenu_default:first-child a span

{

background: inherit;

}
Merci pour la précision Florent, j'aurais encore appris quelque chose sacré non d'une pipe.

Bonne chance dans ta quête Vertig ^^ (faut que j'arrête de procrastiner et que j'étuuudie mon dieu que c'est duuuuur)
Modifié par Gili (29 Aug 2011 - 14:17)
J'ai résolu sans ":first-child" ! C'est certainement plus propre, mais je ne sais pas l'utiliser ! Smiley decu

Résolu avec ça :

div.customenu_layout_default div.customenu_default a.link_1 span.link_normal {
	background: inherit;
}


Gili m'a mis sur la voie, merci !

Mon premier bouton est identifié en link_1

Merci à vous, il est très réactif ce top_forum ! Smiley biggrin
Je trouve aussi que ce fofo est génial Smiley langue (sauf dans ce moment de procrastination, il ne fait que m'enfoncer ^^)

Par contre, quand tu as trouvé la solution à ton problème, tu peux éditer ton message initial pour mettre [Résolu] dans le titre, comme ça tout l'monde s'y retrouve ^^

Bonne continuation.
Sujet clos
Aller à