Un block qui prend la taille de son élément fils ?

Bonjour,

Je voudrais obtenir une div qui prend la taille du texte qu'il contient.

Concrètement c'est pour obtenir en résultat le titre "Le Dubai Café"
http://bougetoi.com/autres/screen.png

Pour cela voici ce que je fais :

			<div id="zoom_sur">
				<table align="left" summary="Le Bagdad Café" id="tab_zoom" cellpadding="0" cellspacing="0">
					<tr>
						<td rowspan="3" class="photo" valign="middle" align="center"><img src="img/cafe_zoom.jpg" alt="Café le Bagdad" /></td>
						<td class="nom"> <div class="truc_gris">Le Bagdad Café</div> </td>
					</tr>
					<tr>
						<td class="desc">text</td>
					</tr>
					<tr>
						<td class="champs">champs</td>
					</tr>
				</table>
			</div>	

et le css :

.truc_gris{
	background-color: #c7c7c8;
	height: 16px;
	font-weight: bold;	
	padding: 0;
	margin: 0;
	white-space: nowrap;
	background-position: right;
	background-image: url(../img/tab_zoom_titre_droite.png);
	background-repeat: no-repeat;
	padding-right: 40px;
	padding-left: 5px;
}

Evidemment comme le contenu du titre est dynamique, je ne peux pas fixer la taille en pixel.

Avec un width:0%, sur firefox, la partie grise ne s'adapte pas à la taille du texte et avec un span, la hauteur (16 px) n'est pas plus respectée (puisque ce n'est pas un block).

Avez-vous une idée ?

Merci d'avance

albataur a écrit :
Avec un width:0%, sur firefox, la partie grise ne s'adapte pas à la taille du texte

C'est effectivement le comportement standard : tu demandes une largeur, et le navigateur te la donne. Pas de demi-mesure.

albataur a écrit :
et avec un span, la hauteur (16 px) n'est pas plus respectée

Question : faut-il absolument avoir un bloc de 16px de haut ? Ça peut poser problème, par exemple si le texte est long et passe sur deux lignes, ou encore si on agrandit la taille de texte ou pour un utilisateur qui aurait une taille de texte par défaut importante.

Est-ce qu'il ne serait pas plus simple d'utiliser un peu de padding pour avoir un rendu correct, et d'aligner en bas à droite l'image pour le coin arrondi ?

albataur a écrit :
Avez-vous une idée ?

Si tu as vraiment besoin d'un bloc, ça peut fonctionner ainsi :

HTML :
<h2>Le Dubai Café</h2>
<p class="premier">Duis felis. Vestibulum etc.</p>

CSS :
#zoom_sur h2 {
	float: left;
	background: bla bla;
}
#zoom_sur .premier {
	clear: left;
}

Ici j'ai utilisé un h2, mais suivant l'organisation de page ça peut être un autre niveau (h3, h4...).

Petite remarque en passant : le texte de ton titre, en blanc sur fond pale, est moyennement lisible. Ça n'attirera pas l'oeil, et ça pourra poser de gros problèmes de lisibilité, et pas uniquement à des malvoyants...

Merci pour cette réponse bien détaillée.

J'ai donc utilisé les padding sur ton conseil (c'est vrai que je n'y avais même pas pensé).
Seul petit soucis maintenant, un écart de 1 px entre IE et firefox
Mais je vais me débrouiller

a+

albataur a écrit :
Seul petit soucis maintenant, un écart de 1 px entre IE et firefox

En quoi est-ce un souci ?

C'est au niveau de l'arrondi, c'est pas très propre :

http://bougetoi.com/autres/screen2.png

albataur a écrit :
C'est au niveau de l'arrondi, c'est pas très propre

As-tu aligné l'image en bas à droite, comme je le suggérais ?
Tu peux utiliser pour cela la propriété CSS background-position.