Je veux que mon background fasse la taille du texte

Salut tout le monde,
je rencontre un petit problème avec un background récalcitrant.

En effet, je veux que celui-ci ne soit pas plus long que le texte, mais comme vous pouvez le voir ici, le background pour le titre de la news fait toute la taille du bloc.

Voilà, si vous avez une solution je suis preneur .

Merci.
Modifié par koskoz (02 Dec 2006 - 15:08)

Salut

h2.title {display:inline}

Ou encore :

<h2><span>Mon titre</span></h2>

Et l'image de fond sur le span, pas sur le h2.

Enfin, si on veut conserver certaines possibilités de mise en forme sans passer par un élément de type en-ligne ou par un display: inline (pas si limité que ça par ailleurs : on peut utiliser les padding pour faire quelque chose de sympa), on peut utiliser un flottant :

h2.title {float: left;}

Ce qui demandera d'avoir un élément en clear: left juste après le titre.

Edit : Ralfman, joli l'habillage de Noël de ton avatar.
Modifié par mpop (02 Dec 2006 - 16:19)

Le display inline ne change rien à la chose, c'est encore pire même.

Le background étant appliqué sur un div et non le h2.

De plus, quand je met le background au h2 avec le display inline, certe la longueur est la bonne, mais pas moyen de mettre 34 pixels de hauteur au background

Soit tu essaies une solution proposée par Mpop, soit tu peux jouer avec la propriété line-height sur le h2 pour moduler la hauteur.

Mpop => Merci pour la remarque , d'ailleurs à propos d'avatar, je me suis toujours demandé quel était donc cet étrange turban que tu avais sur la tête ?
Modifié par Ralfman68 (02 Dec 2006 - 16:34)

Le line-height ne fait que décaller le bloc h2 vers le bas.

Pour l'instant j'ai ça :

<h2 class="title"><span class="title">Mon titre</span></h2>

span.title {
background: url(news_title_bg.gif) repeat-x;
height: 34px;
position: relative;
}
h2.title {
background: url(news_title.jpg) no-repeat;
height: 34px;
color: #fff;
font-size: 12px;
margin: auto 0 auto 0;
padding: 9px 10px 0 60px;
}

koskoz a écrit :
Le display inline ne change rien à la chose, c'est encore pire même.

Le background étant appliqué sur un div et non le h2.

C'eût été bien de le dire dès le départ...

koskoz a écrit :
De plus, quand je met le background au h2 avec le display inline, certe la longueur est la bonne, mais pas moyen de mettre 34 pixels de hauteur au background

Euh... et les 34 pixels de hauteur, ils servent à quelque chose à part à jouer à « je contrôle mon design au pixel près » ?
Parce que s'il n'y a pas de besoin particulier, il n'y a pas de problème.

Je conseille donc :

HTML :
<h2 class="title"><span>Mon titre</span></h2>

CSS :
h2.title {
	background: url(news_title.jpg) no-repeat;
	font-size: 1em;
	margin: 0;
	padding: 0 10px 0 60px;
}
h2.title span {
	color: #fff;
	background: black url(news_title_bg.gif) repeat-x;
	padding: 9px 0;
}

Ça devrait largement faire l'affaire.

Au fait, comme j'ai cru croiser une taille de texte en pixels (mais j'ai dû mal voir...), je te conseille un peu de lecture :
http://css.alsacreations.com/Tutoriels-et-articles-divers/gerer-la-taille-du-texte-avec-les-em

Ralfman68 a écrit :
Mpop => Merci pour la remarque , d'ailleurs à propos d'avatar, je me suis toujours demandé quel était donc cet étrange turban que tu avais sur la tête ?

La tête est celle de Philip K. Dick (pour ma part je suis un poil plus jeune...), et le turban a été ajouté par un forumeur (de même que le qualificatif de « gourou ») suite à un substantiel coup de main de ma part, si je me souviens bien. J'ai trouvé ça sympa, donc je l'ai gardé.

Salut,
ta solution ne fonctionne pas comme tu peux le voir ici.

Les 34 pixels de haut sont obligatoire puisque mon background fait 34px de haut.

Bonjour,

Ben, il ne te reste plus qu'à lui donner un width...

Ce n'est pas possible puisque le width dépend de la longueur de mon texte.

Re
Alors tu fixes la police en px et tu bidouilles avec les paddings (mpop va rugir ...)

Nan mais c'est toujours pas faisable hein.
Le texte changeant en fonction du titre de la news...

En fait, après une petite reflexion, est-ce possible ?

Ce que je veux dire, c'est que j'ai été obligé de passer mon bloc en display inline pour que sa longueur s'adapte à celle du texte contenu dans ce même bloque.

Est-il possible d'appliquer une hauteur prédéfinie à un bloc avec la propriété inline ?

Salut a tous !
Je pense que la meilleur solution aurait été de definir ton bloc en inline-block et non en inline. Neanmoins firefox ne gere pas cette option... Dommage parceque je suis face au meme probleme : definir la hauteur d'un bloc en "inline".

Reste plus qu'à trouver une autre solution...

Needle

Perso j'en ai pas trouvé.

Moi non plus mais je ne desespère pas !
En tout cas vivement que les navigateur respectent les normes w3c ! ( je me demande si je ne suis pas trop utopiste des fois ...)

Je te tient au courant si je trouve quelque chose. En tout cas je pense qu'il faut oublier le inline...

J'ai pas attendu tout ce temps, j'ai trouvé une autre solution (je ne sais plus laquelle).