Div de largeur variable...

Bonjour,
après pas mal de recherche, je n'ai toujours pas trouvé de solutions à un problème pourtant assez simple :
- j'ai une <div> conteneur avec une image de fond
- je souhaite mettre des titres suivis de lignes horizontales dans cette <div>

au départ, j'avais inséré ma balise titre avec un fond blanc dans une <div> ayant pour image de fond la ligne horizontale, mais une fois l'image de fond du conteneur ajoutée, le résultat est très moche :
http://bmalaga.ovh.org/test.jpg
(j'ai augmenté le contraste pour faire ressortir le problème)

j'ai donc cherché une nouvelle solution, en alignant deux blocs :
- celui de gauche contenant le titre avec un fond transparent
- celui de droite contenant la ligne en image de fond

malheureusement en utilisant float ou display:inline, le bloc contenant la ligne n'est pas étiré jusqu'au bout...
je ne peux pourrais mettre une taille fixe à ce bloc, mais j'ai plusieurs titres et donc je devrais refaire cette opération pour chacun d'eux....

voilà, si quelqu'un à une solution miracle, je suis preneur

merci!

un peu de code au cas ou (celui de l'image):

<div class="ligne"><h1 class="titre_article">« Capitale européenne »</h1></div>

et le css :

.titre_article {
font-size:12px;
font-style:italic;
background-color:#FFFFFF;
display:inline;
padding-right:5px;
}

.ligne {
background-image:url(images_site/ligne.gif);
background-repeat:repeat-x;
margin-bottom:5px;
height:20px;
}

Un tableau à deux cellules, ou un peu de display: table-cell, ou encore l'utilisation d'un contexte de formatage.

Si on veut faire simple et rapide, le tableau à deux cellules sera très bien.
Si on veut découvrir les subtilités des CSS, un contexte de formatage sera intéressant.

Pour cette deuxième solution :

[b]HTML :[/b]
<div id="titre"><h1>Bla bla</h1><span></span></div>

[b]CSS :[/b]
div#titre h1 {
	float: left;
}
div#titre span {
	display: block;
	height: 10px;
	overflow: hidden;
	border-bottom: solid 1px gray;
}

Le overflow: hidden crée le contexte de formatage dans IE7, Firefox, Opera, Safari, etc. Pas dans IE6, mais le height: 10px confère le layout au span, qui est alors repoussé par le flottant, comme par un contexte de formatage.

La notion de contexte de formatage est abordée dans l'article suivant :
Un design fluide avec trois «colonnes», grâce au positionnement flottant

À noter que j'ai utilisé un span en display: block, mais qu'on aurait aussi bien pu utiliser un div, par exemple.
Modifié par Florent V. (28 Jun 2007 - 12:53)

merci pour la réponse, je test ça dès que possible et je reviens donner des nouvelles!

je viens de tester, ça à l'air de marcher (j'ai juste eu à corriger le "margin-bottom: solid 1px gray;" par "border-bottom: solid 1px gray;" )

je vais lire l'article pour mieux comprendre ce qui se passe!
merci beaucoup

Caribouuuu a écrit :
j'ai juste eu à corriger le "margin-bottom: solid 1px gray;" par "border-bottom: solid 1px gray;"

Tu as bien fait...

Ah oui : et si on a besoin d'un filet un peu complexe, une image de fond (alignée en bas) sur le span pourra être utile.
Modifié par Florent V. (28 Jun 2007 - 12:54)