Hauteur de ligne de tableau non respectee sous ie

Question

chagam

30 Jun 2006 à 02:13

tout est dans le titre...

http://www.gaiaservice.fr/bug.html

cette page passe tres bien dans ff mais pas dans ie. c'est ou que je me plante svp ? parce que la, franchement, je ne vois pas... Smiley decu

l'idee etant d'avoir 2 colonnes.

Dans celle de gauche, je met un entete de menu (une image de 20px de haut) dans la premiere cellule, le menu (extensible donc) dans la seconde et un pied de menu dans la 3eme (une image de 20px de haut)

Dans la colonne de droite, je met le contenu du site.

Bien sur, je bosse avec une graphiste qui m'a mis des background dans tous les elements (menus et contenu) avec des degradés, des liserés, etc. donc, je ne peux pas vraiment ruser pour faire tout en calques de meme hauteur (comme j'ai vu ici)

Chag

ilhooq

30 Jun 2006 à 03:04

Salut,
Pour ce type de mise en page je te conseille de le faire en CSS.
Il y'a d'excellents tutoriaux sur ce site qui te permettrons de venir à bout des tableaux pour la mise en page.
Sinon si tu tiens vraiment à ton tableau essaye :


<table border="1" cellpadding="0" cellspacing="0" height="500">
    <tr>
        <td height="20">h = 20</td>
        <td rowspan=3>hauteur=500</td>
    </tr>
    <tr>
        <td>h = *</td>
    </tr>
    <tr>
        <td height="20">h = 20</td>
    </tr>
</table>

sinon pour une mise en page css:


<div style="height:500px; width:20%; float:left; background: url(../images/exemple.gif) no-repeat 0% 100%"; >
    <div style="height:20px; background-color:#3399FF">h = 20</div>
    <div style="height:460px;background-color:#6666FF">
	<ul style="margin:0; padding:0">
        <li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
    </ul>
	</div>
    <div style="height:20px; background-color:#3399FF">h = 20</div>
</div>

Bien sûr il vaut mieux mettre le style en dehors du html..
Bon codage. Smiley cligne

chagam

30 Jun 2006 à 10:24

Yop,

Merci pour ta reponse mais ca ne resout pas mon probleme en fait Smiley smile

Si je fixe la hauteur de la table, je ne controle pas la hauteur du contenu de la cellule de droite. Or, j'ai besoin d'avoir un calque d'une certaine hauteur dans la cellule de gauche. en fait, mon tableau doit faire une hauteur minimum mais min-height ne fonctionne pas avec IE. enfin bref...

2eme solution, au debut, j'etais parti pour faire tout en css mais je me heurte au probleme classique : les 2 colonnes doivent avoir la meme hauteur. J'ai bien vu la solution sur le site d'alsacreations mais soit je n'ai pas tout compris soit je ne peux pas utiliser cette solution du fait des contraintes graphiques.

Chag

ilhooq

30 Jun 2006 à 13:44

a écrit :

J'ai bien vu la solution sur le site d'alsacreations mais soit je n'ai pas tout compris soit je ne peux pas utiliser cette solution du fait des contraintes graphiques.

En fait l'astuce consiste à "tricher" en jouant sur la position des images en background. C'est peut être un peu déconcertant, mais d'un autre côté, ça rend le code plus propre, plus léger et aussi plus accessible par rapport aux tableaux.

chagam

30 Jun 2006 à 15:29

Jai bien re-regardé cet article http://css.alsacreations.com/Tutoriels-et-articles-divers/Des-blocs-de-meme-hauteur-sans-tableaux mais sincerement, je ne vois pas comment l'adapter à mes besoins.

J'ai besoin que la colonne de gauche (le menu) soit de meme hauteur que celle de droite. Donc, ca, c'est faisable avec un container. Mais j'ai egalement besoin qu'en bas du menu, soit presents : un logo, 2 liens et une petite image.

Or, avec la solution préconisée dans l'article en question, si mon contenu est long, le menu ne s'allonge pas vraiment et mon 'pied de menu' ne se retrouvera pas aligné avec le bas du contenu.

De plus, j'ai, entre le menu et le contenu, une 'colonne' de 8px de large, vide ou apparait donc l'image de background de la page.

Je suis bien convaincu de l'utilité des css par rapport aux tableaux et je fais autant que possible mes sites en CSS (et j'en bave pour que ca marche avec ie, ff et safari)

Chag

fvsch

30 Jun 2006 à 16:18

chagam a écrit :
J'ai besoin que la colonne de gauche (le menu) soit de meme hauteur que celle de droite. Donc, ca, c'est faisable avec un container. Mais j'ai egalement besoin qu'en bas du menu, soit presents : un logo, 2 liens et une petite image.

Or, avec la solution préconisée dans l'article en question, si mon contenu est long, le menu ne s'allonge pas vraiment et mon 'pied de menu' ne se retrouvera pas aligné avec le bas du contenu.

C'est quelque chose de tout à fait gérable en utilisant le positionnement absolu pour le contenu qui doit venir se placer en bas. Voir cette page d'exemple : Positionnement absolu d'un bloc selon le positionnement du bloc conteneur.

Par contre, n'ayant pas d'aperçu détaillé de ce que tu veux faire, je ne peux pas te jurer que ça sera facile à adapter à ton cas.

Pour le problème rencontré avec IE, je tablerais sur la mauvaise implémentation par IE de la propriété height, interprétée comme un min-height. Les deux height: 20px ne fixent donc pas la hauteur de ces cellules, et en l'absence de hauteur définie pour la cellule du milieu, IE applique la répartition des hauteurs de cellules sur toute la hauteur du tableau.

Pas de solution à ma connaissance.
Modifié par mpop (30 Jun 2006 - 16:19)

chagam

30 Jun 2006 à 16:40

allez, je donne mon exemple en ligne comem le propose ta signature Smiley smile

http://82.228.47.85/projets/alantys

voila le projet sur lequel je travaille.
A la base, j'etais en tout CSS mais je ne vois pas comment faire pour obtenir le meme resultat. Alors je suis passé aux tableaux. (honte sur moi, je le reconnais)

mais si il y a ne solution pour que je remette tout en css, je suis preneur Smiley smile

Chag

fvsch

1 Jul 2006 à 01:44

chagam a écrit :
mais si il y a ne solution pour que je remette tout en css, je suis preneur

La solution que je suggérais un peu plus haut (avec un positionnement absolu pour le bloc juste en dessous du menu) est adaptée à ce genre de cas. Pour avoir le fond uni pour la colonne du menu, il faudra utiliser la technique des colonnes factices détaillée dans un des tutoriels d'Alsacréations (je te laisse retrouver la page exacte, il se fait tard).

Bon courage pour reprendre tout ça. Ça ne devrait pas être insurmontable, je pense. Smiley smile

chagam

6 Jul 2006 à 18:14

Yop,

Me revoici. Conquis par l'idée que finalement, c'etait tout faisable en css, j'ai repris mon code pour virer ces moches <table>.

effectivement, assez rapidement, j'ai reussi, en me basant sur l'article d'alsa à refaire des colonnes qui s'allongent.

dans les grandes lignes, tout marche impec. enfin presque.

http://82.228.47.85/projets/alantys/

pour comprendre, il faut le voir sous ie et sous ff. evidemment, sous ff, impec. sous ie, mon pied de menu n'apparait pas. Je ne veux pas dire qu'il est caché hein. il n'apparait pas du tout. comme si il etait hors de la page. je ne le visualise meme pas avec la barre webdeveloper de MS.

Zen, je me dis que j'ai fait un vilain caca dans mon code qqpart. Je soufflre, je reprend mon Kate et je refais une page vide avec juste des blocs et 2 lignes de texte. ca donne ca :

http://82.228.47.85/projets/alantys/squelettes/test.html

difficile de faire plus simple non ? si qq1 a une idee, je suis preneur.

fvsch

6 Jul 2006 à 23:35

chagam a écrit :
http://82.228.47.85/projets/alantys/squelettes/test.html

difficile de faire plus simple non ? si qq1 a une idee, je suis preneur.

Deux idées :
– si tu rajoutes 4px à ton conteneur (ce qui fait donc 604px), le bloc s'affiche. Il semblerait qu'IE tente de l'afficher à droite du deuxième flottant, et que l'absence totale d'espace à cet endroit là (deux pixels sont insuffisants, mais avec trois ça passe) le fasse dérailler. Mouais, en fait j'ai aucune idée de la povenance de ce bug…
– si tu laisses ton bloc principal (classe "bloc_main") en flux, plutôt que de le mettre en flottant, le bug ne se produit plus. Par contre, on hérite du bug du Three Pixel Jog. Mais on peut le minimiser en évitant de conférer le layout au bloc en question.

Hop, un exemple de ce deuxième cas de figure, avec un code de page complet :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test</title>
	<style type="text/css">
	.conteneur {
	position: relative;
	overflow: hidden;
	background: red;
	width: 600px;
	}
	
	.bloc_menu {
	float: left;
	background: yellow;
	width: 200px;
	height: 100px;
	}
	
	.bloc_main {
	background: green;
	margin-left: 200px;
	}
		.bloc_main div {visibility: hidden; height: 380px;}
	
	.bloc_pied_menu {
	position: absolute;
	background: blue;
	bottom: 0;
	height: 100px;
	width: 200px;
	}	
	</style>
</head>

<body>
<div class="conteneur">
	<div class="bloc_menu">
		Ceci est le menu.
	</div>
	<div class="bloc_main">
		Ceci est le contenu.
		<div>Encore du contenu.</div>
	</div>
	<div class="bloc_pied_menu">
		Ceci est le pied du menu.
	</div>
</div>
</body>
</html>

Note en passant : pour réaliser des tests à minima, il faut au moins un doctype valide pour qu'IE fonctionne en mode strict… c'est un des rares cas où la volonté de ne pas fausser le test en rajoutant du code « inutile » fait le contraire de ce que l'on voulait…

– troisième possibilité (bon j'avais dit deux, mais jamais deux sans trois !) : en gardant le CSS de ton test, juste modifier l'emplacement dans le code du footer du menu pour le placer… dans le bloc du menu.

<div class="conteneur">
	<div class="bloc_menu">
		ceci est le menu
		<div class="bloc_pied_menu">
		ceci est le pied du menu
		</div>
	</div>
	<div class="bloc_main">
		ceci est le contenu
	</div>
</div>

Seule petite modification de la feuille de style :

.bloc_pied_menu {
	position: absolute;
	bottom: 0; [b]left: 0;[/b]
}

Pour finir, je signale juste qu'il aurait été plus logique, pour des éléments n'intervenant qu'une seule fois dans une page, d'utiliser des identifiants (attribut id) plutôt que des classes.

chagam

7 Jul 2006 à 15:07

merci, c'est de la bombe Smiley smile

j'ai repris ta derniere solution.

http://82.228.47.85/projets/alantys/

ca a l'air propre.

pour les class/id, j'ai effectivement vu un article a ce sujet sur alsa. je vais le relire.

perso, j'ai tendance a utiliser le "class" pour tout ce qui a trait au style et le "id" quand je dois attaquer un element en JS (pour faire un GetElementById)

Si je commence a faire des "id" quand l'objet n'est appelé qu'une fois, je vais me perdre vu qu'on ne doit pas avoir 2 objets avec le meme id dans une page si on veut etre conforme.

Chag

Sujet clos

Sémantique web et HTML

Hauteur de ligne de tableau non respectee sous ie