l'ajout du DocType perturbe les style height [Résolu]

cortex024 · 23/03/2011, 22h03

Bonjour,

j'ai des tableaux imbriqués pour un affichage.
voici le code pour l'exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

Nesmontou · 23/03/2011, 22h25

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 ?

cortex024 · 24/03/2011, 09h25

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.

cortex024 · 24/03/2011, 10h17

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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)

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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!

Bovino · 24/03/2011, 14h05

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...

Juste pour info, quand tu écris

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Selon toi, il s'agit de 100% de quoi ?

cortex024 · 24/03/2011, 14h26

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>

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

cortex024 · 24/03/2011, 14h38

Citation:

Envoyé par Bovino

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

Juste pour info, quand tu écris

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Selon toi, il s'agit de 100% de quoi ?

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!

23/03/2011, 22h25	#2
Nesmontou Modérateur Benjamin PREVOT Architecte de système d'information Inscription : septembre 2004 Messages : 1 568 Détails du profil Informations personnelles : Nom : Benjamin PREVOT Âge : 30 Localisation : France, Nord (Nord Pas de Calais) Informations professionnelles : Activité : Architecte de système d'information Secteur : Finance Informations forums : Inscription : septembre 2004 Messages : 1 568 Points : 2 493 Points : 2 493	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 ? __________________ Si vous ne pouvez expliquer un concept à un enfant de six ans, c'est que vous ne le comprenez pas complètement. Albert EINSTEIN F.A.Q. : Java, PHP, (X)HTML / CSS N'oubliez pas de cliquer sur le bouton Résolu en bas de page quand vous avez obtenu une solution à votre problème
	20

24/03/2011, 14h26	#6
cortex024 Membre extrêmement actif Inscription : avril 2005 Messages : 1 244 Détails du profil Informations forums : Inscription : avril 2005 Messages : 1 244 Points : 997 Points : 997	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> 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
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email