l'ajout du DocType perturbe les style height

Version imprimable

Bonjour,

j'ai des tableaux imbriqués pour un affichage.
voici le code pour l'exemple:
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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style type="text/css"> html,body{ margin:0; padding:0; height:100%; border:none } .generaltable{ background-color:#BBBBBB; width:100%; height:100%; } .centraltable{ width:100%; height:100%; background-color:#DDDDDD; } .border{ width:150px; background-color:#555555; } .banner,.footer{ height:150px; } .txtcentral{ height:100%; } </style> </head> <body> <table border=1 class="generaltable"> <tr> <td class="border"> bordure </td> <td> <table border=1 class="centraltable"> <tr> <td class="banner"> banner </td> </tr> <tr> <td class="txtcentral"> texte central </td> </tr> <tr> <td class="footer"> footer </td> </tr> </table> </td> <td class="border"> bordure </td> </tr> </table> </body> </html>
Avec un DocType, sous FF mon tableau central prend bien toute la hauteur du tableau général. Sous IE, il reste au milieu sans remplir tout.
Après avoir cherché bien longtemps dans mes css, je me suis aperçu que lorsque je vire le DocType de ma page, l'affichage de mon tableau sous IE prend enfin toute la hauteur!

j'ai essayé plusieurs doctype, je n'en trouve pas qui donne un affichage correct sous IE (mon tableau "central" reste systématiquement sur le milieu de mon tableau "général")

Lequel dois-je utiliser? :?

23/03/2011, 22h25
Nesmontou

Bonsoir,

Utiliser les tableaux pour faire une mise en page, c'est mal ;)

Voici une très bonne façon de faire : http://plambert.developpez.com/tutor...nnes-full-css/

Sinon, quelle version de IE est en cause ?
24/03/2011, 09h25
cortex024

Citation:

Envoyé par Nesmontou

Bonsoir,

Utiliser les tableaux pour faire une mise en page, c'est mal ;)

Voici une très bonne façon de faire : http://plambert.developpez.com/tutor...nnes-full-css/

Sinon, quelle version de IE est en cause ?

c'est pour un ptit site amateur, et j'étais en effet resté sur la mise en page par tableau car à l'époque de mon dernier site du genre c'est ce qui était préconisé (l'article le répète d'ailleurs).

je vais regarder pour changer ma mise en page et passer par des css en lisant l'article, il faut toujours se mettre à jour ;)

j'ai IE7, je ne sais pas ce que ca donne avec les autres versions.

c'est encore pire, ou je m'y prends mal:

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
39
40
41
42
43
44
45
46
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	
<html>
<head>
<style type="text/css">
html,body{
margin:0;
padding:0;
height:100%;
border:none
}
#generaltableleft{
background-color:#BBBBBB;
width:150px;
height:100%;
float:left;
}
#generaltableright{
background-color:#BBBBBB;
width:150px;
float:right;
height:100%;
}
#generaltablecenter {
height:100%;
}
#centraltablebanner,#centraltablefooter{
height:150px;
}
#centraltablecenter{
height:100%;
background-color:#DDDDDD;
}
</style>
</head>
<body>
<div id="generaltableleft">gauche</div>
<div id="generaltablecenter">
<div id="centraltablebanner">banner</div>
<div id="centraltablecenter">texte central</div>
<div id="centraltablefooter">footer</div>
</div>
<div id="generaltableright">droite</div>
</body>
</html>

les div se superposent (hors de question pour moi!)
donc gère n'importe comment les 100% (width ou height)

de plus, ils ne se mettent pas en 3 colonnes comme je veux (avec différents div en hauteur dans la colonne centrale)

:help:

EDIT: ceci correspond plus à ce que je veux (un tableau 3 colonnes centré, avec des marges auto gauche et droite)

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	
<html>
<head>
<style type="text/css">
html,body{
margin:0;
padding:0;
height:100%;
border:none
}
#generaltableleft{
background-color:#BBBBBB;
width:150px;
height:100%;
float:left;
}
#generaltableright{
background-color:#BBBBBB;
width:150px;
float:right;
height:100%;
}
#generaltablecenter {
height:100%;
width:600px;
}
#centraltablebanner,#centraltablefooter{
height:150px;
}
#centraltablecenter{
height:100%;
background-color:#DDDDDD;
}
#mycontent{
margin-left:auto;
margin-right:auto;
width:900px;
height:100%;
}
</style>
</head>
<body>
<div id="mycontent">
<div id="generaltableleft">gauche</div>
<div id="generaltableright">droite</div>
<div id="generaltablecenter">
<div id="centraltablebanner">banner</div>
<div id="centraltablecenter">texte central</div>
<div id="centraltablefooter">footer</div>
</div>
</div>
</body>
</html>

je n'ai plus de superposition, par contre il ne comprend rien aux height:100% je ne veux pas qu'il prenne 100% de la totalité, juste qu'il comble tout l'espace dispo dans son centeneur!

24/03/2011, 14h05
Bovino
Citation:

donc gère n'importe comment les 100%

Oui, bien sûr... rien à voir avec le fait que tu ne sache pas l'utiliser... :whistle:

Juste pour info, quand tu écris
Code:

1 2 3 html,body{ height:100%; }
Selon toi, il s'agit de 100% de quoi ? :koi:
24/03/2011, 14h26
cortex024

après avoir chipoté et lu des dizaines de tutos bidons (ca ne marche jamais) sur la toile ou ce forum, une lecture m'a orienté vers une solution de contournement: forcer le footer à descendre en bas de mon conteneur (ici en bas de "generaltablecenter")

j'ai donc maintenant la mise en page voulue, tout en ayant appris le positionnement en div/css en remplacement des feu <table> 8-)

merci Nesmontou pour ton orientation vers cette solution propre, bien qu'ayant chipoté pas mal pour arriver à qqch dès que l'imbrication colonnes/lignes n'est pas si simple :ccool:
24/03/2011, 14h38
cortex024
Citation:
Envoyé par Bovino

Oui, bien sûr... rien à voir avec le fait que tu ne sache pas l'utiliser... :whistle:

Juste pour info, quand tu écris

Code:

1 2 3 html,body{ height:100%; }

Selon toi, il s'agit de 100% de quoi ? :koi:
en fait, après plusieurs lectures sur tout cela, effectivement ca peut paraître logique, en théorie uniquement!

Mais vu que depuis toujours et encore actuellement une taille 100% est encore interprétée par les navigateurs pour certains éléments comme étant "100% et au max ce qui reste dans le conteneur" et non "100% de la valeur de la taille du conteneur et donc dépassement si d'autres éléments s'y trouvent" est trompeur car la théorie et la pratique sont très éloignées malheureusement, sans parler des différences d'interprétations des différents navigateurs!