Bouton d'onglet avec répétition en largeur

Bonjour/Bonsoir à tous,

Je dispose de ce bouton contenant des effets principalement sur les bords de l'image :
http://img29.mediafire.com/c033d9a29f321a5d7c0fbbd2e5404c1e16e7ec04123242fc0b48196b433a72eb5g.jpg

J'aurais voulu savoir comment en CSS je pourrais faire en sorte que le fond de ce bouton puisse se répéter en largeur, car il n'y aura pas qu'un seul bouton. Je voudrais adapter le CSS à ce code HTML :

<div id="onglets">
    <ul>
	<li><a href="#">Général</a></li>
	<li class="active"><a href="#">Les jeux principaux</a></li>
	<li><a href="#">Les jeux secondaires</a></li>
	<li><a href="#">Partenaires</a></li>
    </ul>
</div>

Merci de votre réponse.

Tu peux peut-être tenter CSS3 avec border-radius et box-shadow. Ton résultat sera étirable en hauteur comme en largeur, sans alourdir ton code HTML.

Je m'attendais à cette réponse...

Et bien dans l'équipe de projets nous nous sommes jurés de ne pas utiliser le CSS3, car nous voudrions que notre code soit adapté pour IE6 et autres navigateurs ne gérant pas le CSS3.

Le truc c'est qu'avec cette idée vous assumez le choix de vous mettre au niveau du dernier de la classe. Ce qui va évidemment fortement pénaliser les autres.

En proposant un rendu en fonction des capacités de chaque agent utilisateur tu peux au contraire proposer quelque chose de moderne et d'évolutif.

Si tu tiens cependant à tenir cette position avec ton équipe, tu devrais simplement t'en sortir avec deux ou trois conteneurs imbriqués et quelques images de fond.

puissancesnake a écrit :
Et bien dans l'équipe de projets nous nous sommes jurés de ne pas utiliser le CSS3, car nous voudrions que notre code soit adapté pour IE6 et autres navigateurs ne gérant pas le CSS3.

En voilà une noble quête !
Ce qu'on appelle la dégradation gracieuse implique que le code est JUSTEMENT adapté à IE6 et autres vieux trucs MAIS avec un rendu différent (sans arrondis, sans ombres).