Longueur bouton background-image suivant texte

Bonjour à tous,

Je suis nouveau sur ce site que je viens de découvrir suite à mes recherches... infructueuses.

Je voudrais créer un bouton avec une background-image.

Mon problème est la longueur de l'image du bouton : est-il possible de demander l'allongement automatique de l'image en fonction de la longueur du texte ?

Mon autre problème est que l'image est un trapèze, et l'ensemble des boutons représente une sorte de liste d'onglets inclinés.

Voici l'image en simple photoshop et je voudrais la mettre en musique pour l'utiliser. Évidemment, cette image a été crée en statique. La longueur des boutons dépend de la longueur du texte.





Grand merci à vous,
Modifié par xxi (23 May 2009 - 15:15)

Bonjour,

Je n'ai pas le temps de m'arrêter en détail sur ce problème pour proposer une solution complète, mais rapidement:

- À la question «l'image peut-elle s'alonger automatiquement?», la réponse est non.
- Tu peux par contre jouer sur deux éléments imbriqués (au pif: un LI et un A), et une image de fond unique ou bien deux images de fond, pour obtenir ce type d'effet.
- Le visuel présenté est cependant un peu plus subtil que ça, vu que si on définit chaque item comme un rectangle (ce qui est le cas pour un élément en display:block par exemple), alors les différents items du menu doivent se superposer aux extrémités.
- La superposition (partielle) des items du menu peut à priori se gérer avec un margin-left ou un margin-right négatif appliqué aux items du menu.
- La couleur de chaque item peut se gérer avec un background-color, et des images uniquement pour les extrémités.
- Il faudra sans doute pouvoir gérer l'empilement des items, notamment pour faire ressortir les items correspondant à la page ou rubrique en cours, ou bien pour les effets de survol. Il faudra alors jouer sur du z-index (faire une recherche sur l'utilisation correcte de z-index dans les ressources d'apprentissage sur Alsacréations).

Voilà pour quelques pistes.

Merci pour ton aide mais ca me parait 'achement compliqué.

Je vais tester le shmilblick !
Modifié par xxi (23 May 2009 - 19:29)