[Résolu] Les sprites CSS images de différentes largeurs

Bonjour,

J'essai de faire un menu SPRITES avec des items de différentes largeur sur la même image et donc mes SPAN sont de différentes largeurs comme çi après:

.menu { list-style:none;}
.menu li { float:left;margin:0 0 0 0;}
.menu a { text-indent:-5000px;}
.menu span{display:block;width:184px;height:46px;}
//EST IL POSSIBLE DE FAIRE DIFFERENTES TAILLE ICI

.menu #0 span { background:url(images/menu.png) 0 0 no-repeat;}
.menu #0 span:hover{background:url(images/menu.png) 0 -46px no-repeat;}

.menu #1 span { background:url(images/menu.png) -184px 0 no-repeat;}
.menu #1 span:hover{background:url(images/menu.png) -184px -46px no-repeat;}

.menu #2 span { background:url(images/menu.png) -356px 0 no-repeat;}
.menu #2 span:hover{background:url(images/menu.png) -356px -46px no-repeat;}

.menu #3 span { background:url(images/menu.png) -548px 0 no-repeat;}
.menu #3 span:hover{background:url(images/menu.png) -548px -46px no-repeat;}

Je vous remercie de votre aide.
Modifié par barale61 (13 Jan 2014 - 23:19)

salut,
et donc quelle est la question ?

Oui en fait ma question est dans le code:

.menu span{display:block;width:184px;height:46px;}

//EST IL POSSIBLE DE FAIRE DIFFÉRENTES TAILLE ICI

donc des SPAN de différentes tailles car dans l'exemple sur le site ils ont la même taille.

Je n'ai pas essayé mais dans le principe, je dirai que oui.
Soit tu ajoute un id ou une classe sur chacun de tes spans de tailles différentes dans le menu.
Soit tu accèdes par des successions de spans : le span du menu, puis le span qui suis un span du menu et ainsi de suite.
Je sais pas si c'est très clair mais bon , l'exemple sera peut être plus parlant :

.menu span{display:block;height:46px;}
.span_grand {width:184px}
.span_petit {width:46px}

Modifié par mathieu1004 (14 Jan 2014 - 10:05)

Merci beaucoup cela fonctionne bien.