5568 sujets

Sémantique web et HTML

Problème de tableaux avec le Dtd

Bonjour à tous,

Je suis nouveau ici, j'ai depuis peu essayé de me mettre "aux normes" avec l'utilisation du css, des normes w3c et la non-utilisation des tableaux html dans la concetpion.

Me voila donc parcourant ce site afin de trouver la solution (standard) à mon problème de disposition.

Ma disposition souhaitée :
1 - un premier bloc prenant toute la largeur de la page et sur 110px de hauteur
2 - un second bloc sur le coté gauche prenant le reste de la hauteur et 90px de large.
3 - un dernier bloc se mettant a coté de celui de gauche prenant le reste de la hauteur (comme a gauche) et le reste de la largeur.

Et Boom ! voila que je lis dans les différents articles et le forum que la mise en forme full css ne permet pas de combler le reste d'une hauteur de page en ayant un bloc de hauteur fixe au dessus. Je lis même qu'il faut utiliser cette bonne vieille mise en forme en tableau (que je ne devrais plus utiliser) afin de faire ce dont j'ai besoin.
Je m'empresse donc de faire un test de tableau 100% de partout (2 * 2 cellules) avec en entete de document la Dtd 4.01 transitional (je débute doucement). Voici donc mon problème un tableau 100% avec la Dtd ne prend que l'espace nécessaire pour afficher le contenu des 4 cellules et la je ne comprends pas vraiment pourquoi. Idem avec un div 100% il ne le fait que sur la largeur. Voici un exemple du test

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>test</title>	
</head>
<body>
<table border="1" width="100%" height="100%">
<tr>
	<td>toto</td><td>toto2</td><td>toto3</td>
</tr>
<tr>
	<td>toto</td><td>toto2</td><td>toto3</td>
</tr>
</table>
</body>
</html>


J'aimerais comprendre pourquoi on peut faire du 100% (via tableau) en mode quirks mais pas en utilisant une Dtd, alors qu'il est "conseillé" sur un article de faire un tableau pour la mise en page full 100% avec élément fixe sur le haut.
Exite-t-il un moyen pour réaliser mon beaoin en respectant les normes (même sans tableau, si par hasard une technique est sortie).

Merci à tous pour vos futures lumières.

ps: désolé pour les fautes d'orthographe, je ne suis pas un adepte du sms mais tout simplement une bille ne ortho....
Bonjour,

1. Avec un tableau: il faut que le height:100% appliqué au tableau (en CSS, tant qu'à faire...) ait une hauteur de référence. 100% de quoi, va demander le navigateur? Comme il l'ignore, eh bien il ne fera rien. La solution est donc de s'assurer que le parent du tableau a lui-même une hauteur fixe.

Concrètement, pour une hauteur de 100% du viewport (zone de visualisation du navigateur), il faudra donner une hauteur de 100% à tous les éléments depuis l'élément souhaité (le tableau) en remontant vers la racine (élément html). Ce qui donne:
html {height: 100%;}
body {height: 100%; margin: 0; padding: 0;}
body > table {height: 100%;}


2. Sans tableau, en utilisant display:table.

En gros, il s'agit de donner un affichage de type tableau à des éléments tels que BODY et deux conteneurs DIV, par exemple.

3. Sans tableau, en utilisant le positionnement absolu.

Il s'agit d'utiliser le positionnement absolu en précisant les données top et bottom des éléments ainsi positionnés (à priori les deux blocs sous le header). Pas besoin d'utiliser de hauteur (sauf pour le header) dans ce cas.

4. Sans tableau, en utilisant le positionnement fixe.

Même solution que ci-dessus, mais avec des éléments en position:fixed. Plutôt déconseillé car casse-gueule si on ne maitrise pas (voire casse-gueule tout court).

a écrit :
je lis dans les différents articles et le forum que la mise en forme full css ne permet pas de combler le reste d'une hauteur de page en ayant un bloc de hauteur fixe au dessus

Il y a beaucoup de contenus erronés dans les articles et sur le forum, alors.
Sujet clos
Aller à