[ resolu ] Td width adaptable

Bonjour à tous,

un probleme bêta se pose à moi. J'ai un tableau à trois colonnes, je veux que la première colonne soit d'une largeur fixe (15% de la largueur totale du tableau), que la deuxième s'adapte en fonction de son contenu (en l'occurence un titre), et que la troisième prenne la place qui reste....

<table border="0" cellpadding="0" cellspacing="1" width="780">
<tr><td colspan="3"></td></tr>
<tr>
<td width="15%" background="layout/bandeau/fond_gris.gif"></td>
<td width="25%" class="contenu_titre">Madame Zola </td>
<td width="60%" background="layout/bandeau/fond_gris.gif"></td>
</tr>

Quelqu'un aurait-il la solution à ce petit souci ???

Merci encore à tous,
Aurélia.
Modifié par Fugugirl (15 Feb 2007 - 18:16)

<table border="0" cellpadding="0" cellspacing="1" style="width:780px">
<tr><td colspan="3"></td></tr>
<tr>
<td style="width:15%; background:url(layout/bandeau/fond_gris.gif);"></td>
<td class="contenu_titre">Madame Zola </td>
<td style="background:url(layout/bandeau/fond_gris.gif);"></td>
</tr>

Tout simplement devrait marcher, mais il est fort probable que les deux autres cellules se mettent d'accord en fonction de la place restante... Que va contenir la troisième cellule ?
Que va contenir le tableau ?

Salut Sylvain et merci de ta réponse.

Les autres cellules ne contiennent rien, c'est bien le problème. Je veux juste que le fond des td agisse comme un bandeau autour du titre.

Ta solution ne marche donc pas... je vais peut-être me tourner vers une solution css puisque j'ai lu quelque part qu'il y avait un exemple sur ce site de mise en page avec trois colonnes dont une adaptable... je verrai ça demain l'esprit reposé.

Bonne nuit !

Aurélia.

Coucou !
Le pense qu'il y a beaucoup beaucoup beaucoup plus simple pour faire ce que tu veux faire.
Tu veux bien me montrer une image, ou alors un exemple, de ce qui est recherché ?

Bon, alors, tu veux faire un titre avec un bandeau autour.

Rien de plus simple, déjà, un titre, c'est une balise <h1>, <h2>, etc (h1 pour le titre, h2 pour le sous-titre, h3 pour le sous-sous-titre, etc)

On va faire comme si c'était h1, dans notre cas.

Donc, code HTML sera:

<h1>Ton titre </h1>

Et en CSS, il suffit par exemple de mettre un fond à ce titre:

h1{
background:url(tonimage.png) repeat;
height:15px;
font-size:15px;
}

(avec 15px pour l'exemple)

Seul soucis, le fond de ton titre sera aussi sous le titre. La solution, mettre du blanc sous le titre:

On change le HTML:

<h1><span>Ton titre</span></h1>

Et on rajoute dans le css:

h1{
background:url(tonimage.png) repeat;
height:15px;
font-size:15px;
}
h1 span{
background:#FFF;
}

Ca marche parfaitement après test.

N'hésite pas à me demander si tu as un moindre soucis ou si tu ne comprends pas.

En fait, il faut faire attention de bien différencier le fond et la forme.
Tu veux un titre ? Il faut mettre la balise titre, et pas de tableaux !
Ensuite, pour la forme, les CSS doivent tout faire. Dans un monde parfait, ça serait aussi simple que ça, après, souvent, faut ruser...

Merci pour cette solution.

Il est vrai que je n'ai pas le réflexe d'utiliser les codes de titre, soustitre classique car souvent on a de mauvaises suprises pour les espaces entre les lignes. Mais c'est que sans doute je les utilisais mal encore.

Bonne soirée,
Aurélia.