La meilleure méthode pour obtenir ceci

Salut,

Je recherche la meilleure méthode pour obtenir le rendu suivant, sachant que l'icone n'est pas fixe...

http://www.xaoweb.fr/bouton.gif

Voici ma méthode actuelle:

p.menu_item img, span {
    vertical-align: middle;
    display: inline-block;
}

p.menu_item img {
    border: 1px solid #454545;
    height: 22px;
}

p.menu_item span {
    border-color: #454545;
    border-left-width: 0;
    background: url(/images/backend/menu_item_content_bg.gif) repeat-x center;
    height: 22px;
    font-size: 11px;
}

Le hic c'est que le span n'est pas redimensionnable avec l'attribut height... Je pourrais jouer sur le padding, mais bon c'est pas très propre.

Bonjour,

Dans le code que tu donnes:
- il n'y a pas de code HTML (donc impossible de savoir ce que tu as tenté au juste);
- le premier sélecteur est erroné, car il vise p.menu_item img d'une part, et span (et non pas p.menu_item span) d'autre part.

Sinon, pour intégrer ce type de bouton... ben ça dépend.
L'icone n'est pas fixe, mais est-ce qu'elle illustre une information donnée par le texte, ou bien est-ce qu'elle est porteuse d'une information non disponible par ailleurs?
Suivant le cas, on pourra passer par une image de fond ou bien on devra utiliser un élément img avec texte alternatif qui va bien. Dans le premier cas, on pourra aussi utiliser un élément img avec texte alternatif vide, si ça aide.

Niveau code HTML, on pourrait donc avoir:

<span><img alt=""> Texte</span>

Bordure en CSS, fond dégradé et filet (trait noir de séparation) sur une image de fond, image positionnée correctement avec vertical-align et un peu de margin sur les côtés.

Salut,

Merci pour ta réponse.
Pour le premier sélecteur, je l'ai repris d'un vieux topic (trouvé ici) tel quel. C'est une astuce pour aligner du texte et une image verticalement.
Je veux effectivement qu'il s'applique à img et à span...

Je suis désolé de pas avoir mis le code HTML utilisé, je pensais que le CSS serait suffisamment éloquent.
Il s'agit d'un paragraphe dans lequel j'ajoute simplement une image et un span:

<p>
    <img src="img.gif" alt="" /><span>Mon texte avec fond de bouton</span>
</p>

Mais le problème c'est que le span garde la taille du texte...
Ta solution permet d'agrandir le span à la taille de l'image c'est bien ça ? Je n'ai pas encore essayé mais ça a l'air d'être une voie à suivre...

Sinon pour répondre à ta question, l'image illustrera bien une information donnée par le texte, mais je veux conserver un maximum de souplesse parce que ça peut varier selon les cas.