Tableau et hauteur à 100% [Résolu]

Bonjour,

Je sais que le sujet a été traité pas mal de fois déja, mais ca ne correspond pas vraiment à ce que je veux.

Je voudrais faire un tableau qui prend 100% de la hauteur de son conteneur (une cellule d'un tableau). Le problème c'est que son conteneur n'a pas de hauteur.
En gros : un tableau avec 2 cellules. La 1ere contient du texte, la 2eme contient un autre tableau. Ce tableau je voudrais qu'il s'adapte à la hauteur de cellule qui dépend de la hauteur du texte de la 1ere cellule.

Peut être ne faut il pas passer par des tableaux ?
Je voudrais faire la même chose avec une image qui prendrait 100% de la hauteur d'une cellule sans passer par un background, une solution ?


Voici le code :
css :

#centpourcent {
height: 100%;
width: 100%;
}

html :

<table border="1" cellspacing="0" cellpadding="2">
<tr>
<td>bla<br>
bla<br>
bla<br>
<br>
.<br>
<br>
.
<br>
bla<br>
bla</td>
<td><table border="0" cellpadding="2" cellspacing="0" id="centpourcent">
<tr>
<td bgcolor="#FF00FF">&nbsp;</td>
</tr>

</table></td>
</tr>
</table>

Modifié par vincent pique (06 Sep 2007 - 17:00)

Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Bonjour,

vincent pique a écrit :
Je voudrais faire un tableau qui prend 100% de la hauteur de son conteneur (une cellule d'un tableau). Le problème c'est que son conteneur n'a pas de hauteur.

C'est pour faire quoi exactement?

vincent pique a écrit :
Peut être ne faut il pas passer par des tableaux ?

Peut-être, oui.
Quel est le design à intégrer?

Oups, désolé pour Raphael, ca y'est, c'est corrigé.

Je cherche à faire quelque chose de très simple.
Un tableau avec 2 cellules, la premiere contient du texte, la deuxieme contient un tableau avec des images. Comme la 1ere cellule contient du texte, la hauteur du tableau va se redimensionné en fonction du texte qu'il y a dedans. Je voudrais que le tableau qui est contenu dans la cellule de droite soit à 100% de la hauteur de la cellule.

Je voudrais d'une maniere générale savoir comment mettre un tableau, une image (...) à 100% de la hauteur de son conteneur, qui lui n'a pas de hauteur fixe. Je sais pas si je suis bien clair.

Comme un exemple vaut mieux que de longs discours, voici ce que je veux faire :
http://serveur-startup.com/tableau_cent_pour_cent.gif

Merci pour l'aide

Ben pour faire ça il te faut très exactement zéro tableau.

[b]HTML:[/b]
<div class="bloc-texte">
<p>Bla bla mon texte</p>
<p>Et la suite du texte...</p>

<span class="coin-droit"></span>
</div><!-- fin de div.bloc-texte -->

[b]CSS:[/b]
div.bloc-texte {
	position: relative;
	width: 310px;
	padding: 5px 30px 5px 10px;
	border: solid 1px gray;
	background: white url(images/fond-bloc-texte.png) no-repeat right top;
}
div.bloc-texte span.coin-droit {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 20px;
	height: 20px;
	background: url(images/coin-droit.png) no-repeat right bottom;
}

On dessine la partie de droite avec une image de fond du bloc (contenant l'image du haut et du milieu), et l'image du bas est placée en image de fond sur un élément vide positionné en absolu par rapport au bloc.

Si le bloc est censé s'allonger en hauteur jusqu'à des hauteurs importantes, on pourra remplacer l'image de fond de div.bloc-texte par une image de fond ne contenant que la partie centrale de l'image (répétée en hauteur), et on placera un deuxième span pour dessiner l'image du coin haut-droite.

OK, merci beaucoup, ca marche.

Je crois qu'il va falloir que je prennes des cours de css car c'est pas super simple.

Par contre, imaginons une page avec pas mal de petites choses graphiques comme celle que je viens de faire, ca fera des css à n'en plus finir, dur dur de s'y retrouver, non ?
Je crois que je vais avoir du mal à décrocher de mes tableaux.

Merci encore

vincent pique a écrit :
Par contre, imaginons une page avec pas mal de petites choses graphiques comme celle que je viens de faire, ca fera des css à n'en plus finir, dur dur de s'y retrouver, non ?

Pas mal de petites choses à chaque fois différentes, ou pas mal de blocs reprennant un ou plusieurs styles? Parce que l'avantage des CSS, c'est justement de pouvoir styler plusieurs éléments avec un seul jeu de déclarations. On utilisera alors les classes, ou le sélecteur de descendants, par exemple.

Maintenant, si chaque élément d'une page a un style unique et si on ne peut rien «factoriser», là oui, utiliser les CSS ne servira pas à grand chose.

Bon, il va falloir que je prennes un cours de css, ca fait des années que je programme avec des tableaux et je n'ai pas encore eu le temps de vraiment m'y mettre, mais là je crois qu'il va être temps si je ne veux pas être dépassé.

Le soucis c'est qu'avec dreamweaver 8, je ne vois rien du tout. Il place ma span "coin droite bas" en haut à droite. Est ce normal que ca ne ce place plas comme il faut dans dreamweaver 8 ?

div.bloc-texte span.coin-droite-bas {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 14px;
	height: 20px;
	background-image: url(images_communes/groupes/circuits_sep_03.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
}

vincent pique a écrit :
Le soucis c'est qu'avec dreamweaver 8, je ne vois rien du tout. Il place ma span "coin droite bas" en haut à droite. Est ce normal que ca ne ce place plas comme il faut dans dreamweaver 8 ?

Pour dire les choses clairement: le moteur de rendu de Dreamweaver, c'est de la merde. Il ne faut pas s'y fier une seule seconde. La seule visualisation fiable c'est dans les navigateurs.

Pour ma part, j'utilise Komodo Edit comme éditeur de code. Il intègre un moteur de rendu Gecko (Firefox), mais je l'utilise peu, vu que j'ai souvent un ou deux navigateurs ouverts sur la page sur laquelle je suis en train de travailler.

Pour se mettre aux CSS: bonne idée, surtout que cette technologie aura 11 ans à la fin de l'année.