height dans une table

Version imprimable

salut je fais un petit truc en XHTML avec une table mais a ma grande surprise !DOCTYPE me modifie mon tableau pas comme je le souhaiterais
je sais tout le monde va me sauter dessus en criant d'utiliser un div, mais la je dois utiliser une table pour ce que je veux faire, mon code c est ca :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<style type="text/css" media="screen">@import "mafeuille.css";</style>
<table class="main">
	<tbody>
		<tr><td class="main">
			<table class="sec">
				<tbody>
					<tr><td>
						<img src=pouet.bmp>
					</td></tr>
					<tr><td>
						<p>ATTAQUE DE KIKOU LOL</p>
					</td></tr>
					<tr><td style="sec">
						<p>re bablalba</p>
						<p>blabla</p>
					</td></tr>
				</tbody>
			</table>
		</td><td class="main">
			<table class="sec">
				<tbody>
					<tr><td>
						<img src=pouet.bmp>
					</td></tr>
					<tr><td>
						<p>ATTAQUE DE KIKOU LOL</p>
					</td></tr>
					<tr><td style="sec">
						<p>re bablalba</p>
					</td></tr>
				</tbody>
			</table>
		</td></tr>
	</tbody>
</table>

avec

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.main {
	width: 700px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #000000;
	background: #ff0000;
	padding: 0;
}
 
.sec {
	width:100%;
	height:100%;
	border:1px solid #0000ff;
	background:#00ff00;
	padding:0;
}
 
td{
	vertical-align: top;
 
}
 
.sec{
	height: 100%;
}

si vous lancer ce code vous verez que la cellule de droite ne prend pas 100% de la hauteur que l'on lui attribut, je ne sais pas pourquoi DOCTYPE me fait ca, pourriez vous m'aider :)

13/07/2007, 09h31
Bisûnûrs
Oulah ..
1. Comment se fait-il que tu n'aies pas de balise <head> et <body> ?
2. Tu vas vraiment laisser des images BMP sur un site ..?
3. Une recherche rapide sur le forum t'aurait donné la réponse : pour qu'un élément ait une hauteur en pourcentage il faut que son élément parent ait une hauteur définie, sachant que l'élement le plus haut dans la hierarchie est l'élément html.
13/07/2007, 09h59
yvesall
lol non je suis pas un fou les BMP c'est pour les testes en offline, ensuite j'ai pas mis les balise head et body parce que la ca n'influe pas sur le comportement de cette page a l'heure actuelle mais je les mettrais lors de l'edition ;)

ensuite j'ai vu de tout partout en effet qu'il fallait que le parent soit definie donc :
Code:

1 2 3 html { height: 100%; }
mais mais ca ne change rien de rien :/ donc je suis septiquement PERDUUUUUUU :'(
13/07/2007, 10h07
Bisûnûrs
Code:

1 2 3 html, body, .main{ height:100%; }
13/07/2007, 10h15
yvesall

ouai en effet juste en rajoutant body ca marche mais je ne saisis pas pourquoi :/ mais merci pour cette precision : ))))))
13/07/2007, 10h19
Bisûnûrs

Parce ton tableau main a pour élément parent body et non html.

html est l'élément parent de body.

Donc il faut que l'élément parent de main (=> body) ait une hauteur définie, et si tu la définie en pourcentage aussi, il faut que l'élément parent de body (=> html) ait une hateur définie aussi.