[Résolu] Mise en place d'images dans un menu

Bonjour,

Je pêche un peu sur un cas de mise en forme de menu.

Je refais un menu type "onglet" sur un site dynamique et je souhaite mettre une image à droite, une autre au centre et finir par une image à gauche.

Tout ça, en étant compatible avec les navigateurs les plus utilisés bien sûr !

J'ai exporté le code HTML du menu dans un fichier démo pour le mettre à disposition, car je travaille en local pour développer.

Le fichier du menu est ici : http://demo.cs-info.fr/test-menu.html

J'ai deux soucis :

1. mettre l'image de droite ! J'ai essayé plusieurs choses, mais ça ne fonctionne pas avec tous les navigateurs (je tests avec Firefox, Chrome et IE).

2. aligner verticalement le texte au milieu des "onglets" ! Idem, ça ne fonctionne pas avec tous les navigateurs.

Il y a des pros du CSS ici (c'est un compliment gratuit, mais sincère) alors, je me suis dit que j'allais demander à des pros ! Merci pour le p'tit coup de pouce !

J'avance un peu sans vraiment y croire !

OK pour l'alignement vertical, je mets en commentaire ma position relative sur l'image à placer à droite.

span.imgright {
background: url("test-menu/bar_nav_right.png") no-repeat scroll right center transparent;
height: 55px;
/* position: relative !important; */
top: 0 !important;
width: 18px;
} 

Une info, je me suis senti obligé d'ajouter un SPAN avec un classe pour insérer mon image.
L'image est inséré, mais pas facile à placer à droite.

Quelqu'un ?

Si je remets ma position relative avec un float right, c'est mieux mais c'est pas ça !

http://demo.cs-info.fr/test-menu/float-right.jpg

span.imgright {
background: url("test-menu/bar_nav_right.png") no-repeat scroll right center transparent;
height: 55px;
position: relative !important;
float: right;
top: 0 !important;
width: 18px;
}

salut,
"Ceux qui flattent le roi, l'abusent..."
Plus sérieusement, en CSS3 tu peux passer par les backgrounds multiples, en voici un petit exemple mais je suppose que tu cherches à maximiser la compatibilité des navigateurs. Je pense du coup que le mieux serait de passer par les pseudos éléments ":before" et ":after".

Salut Zelalsan,

C'est quoi les éléments ":before" et ":after" ?

Comment ça fonctionne ?

Ta solution fonctionne pas mal ! Il y a des navigateurs qui ne prenne pas en charge ?

Si j'adapte ton code, ça devrait marcher, merci.
Modifié par vertig (12 Jun 2014 - 18:20)

Tu pourrais jeter un coup d’œil sur Google et voir ce que ça donne. Pour la solution toute faite, voici un autre exemple.
Les backgrounds multiples seront pris en compte par les navigateurs comprenant le CSS3 (FF3.6, IE9...).

Nickel pour la démo, merci à toi.

ça fonctionne bien avec les navigateur actuels, moi ça me va ! Super !

Comme quoi, avec un Pro, ça va mieux, merci.

Ceci sans abuser le roi.

Je t'en prie mais