[HTML 4.01] conflit avec le DOCTYPE

**jbss** · 27/10/2006, 11h17

Voilà un casse tête bien intéressant...

mon code html :
<html>
<head>
<title>Page test</title>
</head>
<body>
<table style="height: 100%;BACKGROUND-COLOR: #ffddcf" width="100%">
<tr>
<td style="height: 100%;text-align: center;vertical-align: bottom;">
texte en bas de la page
</td>
</tr>
</table>
</body>
</html>

Comme vous pouvez le constater, le code est très basique.
Maintenant je veux être compliant html4.01 et valider ma page. Pour cela j'ajoute le Doctype en haut de mon code html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Page test</title>
</head>
<body>
<table style="height: 100%;BACKGROUND-COLOR: #ffddcf" width="100%">
<tr>
<td style="height: 100%;text-align: center;vertical-align: bottom;">
texte en bas de la page
</td>
</tr>
</table>
</body>
</html>

Résultat sur le validateur du W3c : "This Page Is Valid HTML 4.01 Transitional!" hourra !!! ma page passe le test de conformité
Problème, ma page avec le doctype ne rend plus le même résultat à l'affichage ... étrange !!!

Mes Contraintes, faire du html4.01 transitional, passer le test du w3c et obtenir la mise forme d'origine.

Y'a t-il une explication à ce phénomène ?
Y'a t-il une solution de contournement (pas trop lourde) qui respecterait mes contraintes ?

**trotters213** · 27/10/2006, 12h21

tu es obligé ou tu préfères utilisé HTML 4.01 parce que ça fait un petit moment que ça a été remplacé par le XHTML 1.0 Transitional :

Code HTML :

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

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

du coup ça supprime ton problème, par contre il faut que tu mettes toutes tes balises et attributs en minuscule.

**jbss** · 27/10/2006, 13h58

Envoyé par trotters213

tu es obligé ou tu préfères utilisé HTML 4.01 parce que ça fait un petit moment que ça a été remplacé par le XHTML 1.0 Transitional :

Code HTML :

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

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

du coup ça supprime ton problème, par contre il faut que tu mettes toutes tes balises et attributs en minuscule.

Je suis obligé d'utiliser Html 4.01.
De plus j'ai essayer avec XHTML 1.0 Transitional et ça ne résout pas mon problème !

**trotters213** · 27/10/2006, 14h31

Envoyé par jbss

De plus j'ai essayer avec XHTML 1.0 Transitional et ça ne résout pas mon problème !

Bizarre j'ai essayé et ça fonctionnais mais là n'est pas le problème

.

**Candygirl** · 27/10/2006, 13h29

Envoyé par jbss

Y'a t-il une explication à ce phénomène ?
Y'a t-il une solution de contournement (pas trop lourde) qui respecterait mes contraintes ?

1)Oui, il y a une explication. En mettant un doctype correcte au haut de tes pages, tu forces le navigateur à passer en mode standard et donc tenter d'interpréter ton code selon les recommandationsdes du w3c. Sans le doctype, ton navigateur passe en monde quirk et va interprêter ton code "à sa sauce".

Tu devrais trouver plus d'infos sur le net en fesant une recherche sur les termes "Doctype Switching" ou "mode quirk"

2) Si tes contraintes sont de mettre un texte tout au bas de la fenêtre, tu peux le faire, par exemple, de la manière suivante:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
* {margin:0;padding:0;}
 
html,body {
  height:100%;
}
 
p {
  position:absolute; bottom:0; left:0;
        width:100%;
        text-align:center;
}
-->
</style>
</head>
 
<body>
<p>texte en bas de la page</p>
</body>
</html>

**jbss** · 27/10/2006, 14h11

Envoyé par Candygirl

2) Si tes contraintes sont de mettre un texte tout au bas de la fenêtre, tu peux le faire, par exemple, de la manière suivante:

Mes contraintes ne sont pas de mettre un texte en bas de page, mais d'avoir ma troisième cellule ajustée à 100% du reste de la hauteur de la page.

La solution avec une position absolue n'est pas viable dans mon cas de figure (position de la dernière cellule).

**Candygirl** · 27/10/2006, 14h41

Envoyé par jbss

Mes contraintes ne sont pas de mettre un texte en bas de page, mais d'avoir ma troisième cellule ajustée à 100% du reste de la hauteur de la page.

La solution avec une position absolue n'est pas viable dans mon cas de figure (position de la dernière cellule).

Tu parles de cellules; tu dois présenter des données tabulaires ? ou c'est pour la mise en forme d'un design? Si tu donnais un peu plus de précisions ça serait plus facile de te proposer quelque chose qui correponde à tes besoins.

Autrement un simple html, body avec height 100% dans le css devrait te permettre de faire ce que tu veux avec ton tableau.

**jbss** · 27/10/2006, 17h05

Envoyé par Candygirl

Autrement un simple html, body avec height 100% dans le css devrait te permettre de faire ce que tu veux avec ton tableau.

Merci, c'est ça qu'il me fallait : un html et un body avec height 100%.
Avec mon table avec height 100% je peux jouer sur la hauteur de mes cellules dont la dernière.

merci pour tout

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>
		</title>                                  
		<style type="text/css">
                html {
                        height: 100%;
                }
                body {
                        height: 100%;                   
                }
                </style>		
	</head>
	<body>	
		<table style="height: 100%;BACKGROUND-COLOR: #000000; width: 100%">
			<tr>
				<td style="background-color: #ffddcf">ligne 1</td>
 
			</tr>	
			<tr>
				<td style="background-color: #ffffff">ligne 2</td>
 
			</tr>					
			<tr>
				<td style="background-color: #8fddcf;height: 100%">ligne 3</td>
 
			</tr>		
		</table>
	</body>
</html>

Il me reste juste à ajuster la hauteur pour éviter d'avoir a barre de scrolling verticale ( le height à 100% du <HTML> dépasse la zone visible, à étudier)

**jbss** · 27/10/2006, 17h29

Envoyé par jbss

Il me reste juste à ajuster la hauteur pour éviter d'avoir a barre de scrolling verticale ( le height à 100% du <HTML> dépasse la zone visible, à étudier)

Voilà, c'est tout bon, pour éviter d'avoir l'ascenseur vertical j'ai ajouté
margin: 0; pour le tag <html> et le tag <body>

[HTML 4.01] conflit avec le DOCTYPE

HTML

Vue hybride

Discussions similaires

Partager

Partager