Pb de taille de cellules avec rowspan :'(

29 oct. 2005, 15:30

Bonjout tlm,

voilà j'ai un petit problème, je vais d'abord vous donner un exemple de code et puis vous expliquer.

Prenez par exemple le code

Code : Tout sélectionner

<table width="100%" border="1">

<tr>
<td rowspan="2">LEFT<br><br><br><br><br><br><br><br><br><br><br></td>
<td height="15">UP</td>
</tr>

<tr>
<td>DOWN</td>
</tr>

</table>

Mon but: fusionner les cellules haut et bas de la partie de gauche du tableau ('LEFT'), et pour les 2 cellules à droites, avoir celle du dessus ('UP') qui fasse une hauteur de 15, et celle du dessous ('DOWN') qui s'étende en fonction de la cellule de gauche 'LEFT'...

Résultat: le tableau ne tient pas compte de mon height de la cellule 'UP', et force les cellules 'UP' et 'DOWN' à avoir une hauteur égale, ayant chacune la motié de la hauteur de 'LEFT'...

Quelqu'un a-t-il une solution à proposer pour que les 2 hauteurs ne soient pas forcées à être égales ?
Merci à tous !
Ciao
Pierre

29 oct. 2005, 23:18

A ma connaissance ce n'est pas possible côté tableau html. L'astuce que tu peux faire serait de faire un tableau général de 2 colonnes gauche et droite. Dans la cellule de droite, tu rajoutes un tableau avec 2 lignes et là tu pourras fixer la première ligne et laisser la deuxième telle quelle.

Code : Tout sélectionner

<table width="100%" border="1"> 
<tr> 
	<td>LEFT<br><br><br><br><br><br><br><br><br><br><br></td> 
	<td valign="top">
	
	<table width="100%" border="1">
	<tr>
		<td>UP</td>
	</tr>
	<tr>
		<td>DOWN</td>
	</tr>
	</table>
	
	</td> 
</tr>
</table>

29 oct. 2005, 23:27

Autre option : virer les tableaux qui ne sont pas fait pour faire de la mise en page et utiliser un style CSS : voir notament un tuto alsacreation

29 oct. 2005, 23:35

J'aurais pu en effet le préciser... :-" Mais bon j'ai mis "côté tableau html" c'est déjà ça

30 oct. 2005, 00:30

mais en fait, je t'explique, je refais un design assez complexe, et dans le solution que tu m'as donnée (charabia), si tu veux à la base si le "<table height="100%">" existait je n'aurais aucun problème...

Mais comme cela n'existe pas, je dois trouver une solution pour faire que le bas de la partie de gauche (mes menus) soient à la même hauteur que le bas de la partie de droite (mon contenu), et vice versa...

En fait, si le contenu est plus longue que les menus, le bas des menus doit s'étendre jusqu'à la hauteur du bas du contenu, et si les menus sont plus longs que la page, le cadre contenant le contenu doit s'étendre verticalement pour arriver à hauteur du bas des menus...
(oui je suis compliqué je sais, mais j'ai besoin que mon design s'adapte facilement en fonction du contenu...

)

Merci pour vos réponses
Pierre

30 oct. 2005, 12:53

lol pfiouuuu j'ai un peu de mal à suivre. Tu as un exemple où on pourrait jeter un oeil à ton problème ?

A la base, le height=100% d'une tableau existe mais ne fonctionne que sur le tableau externe (le premier). Dès lors que tu imbriques des tableaux dans des tableaux, le height des tableaux internes n'est plus pris en compte.

30 oct. 2005, 15:03

height="100%" existe même en parent ? ^o) mais alors avec html et body {height:100%;} paske <table height="100%"> ça fonctionne pas :p

Bon tu m'a demandé un exemple, jvais essayer de l'expliquer par 3 exemples...

Exemple 1: les menus et le contenu ont plus ou mois la même taille:
ça c'est la structure mais ça foire déjà au niveau des tailles.

Code : Tout sélectionner

<font size="1">
<table width="100%" border="1" style="font-size: 10px;">

<tr>
<td width="171" height="1" rowspan="2" colspan="2">Partie des menus<br>(je met height=1 car la<br>partie en dessous<br>doit s'étendre)<br><br>
rowspan=2</td>
<td width="16" height="17">coin 1</td>
<td height="17">----- dessus du cadre du contenu. extensible à l'horiz. ----- height=17</td>
<td width="16" height="17">coin 2</td>
</tr>

<tr>
<!-- la première partie est déjà contenue dans le <td rowspan="2"> -->
<td width="16" rowspan="2">g<br>a<br>u<br>c<br>h<br>e</td>
<td rowspan="2">Texte du contenu de la page...<br>Doit s'étendre horizontalement,<br>et verticalement aussi en fonction de la hauteur des menus.</td>
<td width="16" rowspan="2">d<br>r<br>o<br>i<br>t<br>e</td>
</tr>

<tr>
<td width="170" rowspan="2">Partie qui doit s'étendre<br>horizontalement en fonction<br>de la hauteur du texte<br>de contenu de la page.</td>
<td width="1" rowspan="2">|<br>e<br>x<br>t<br>e<br>n<br>s<br>.<br>|</td>
<!-- la partie contenu est déjà précisée avec <td rowspan="2"> -->
</tr>

<tr>
<!-- la partie en dessous des menus est déjà précisée avec <td rowspan="2"> -->
<td width="16" height="17">coin 3</td>
<td height="17">----- Dessous du cadre du contenu de la page. Extensible horiz. ----- height=17</td>
<td width="16" height="17">coin 4</td>
</tr>

</table><br>
Chaque coin est censé faire 16 en width, et 17 en height.<br>
Les bords de gauche et de droite du cadre du contenu sont censés faire 16 en width et être extensibles verticalement.<br>
Les bords du haut et du bas du cadre du contenu sont censés faire 17 en height.<br><br>

Le "cadre du contenu" est le cadre qui contient les "coins 1,2,3,4", pas le tableau général...
</font>

Bon maintenant un exemple où les menus sont plus longs que le texte du contenu:

Code : Tout sélectionner

<font size="1">
<table width="100%" border="1" style="font-size: 10px;">

<tr>
<td width="171" height="1" rowspan="2" colspan="2">Partie des menus<br>(je met height=1 car la<br>partie en dessous<br>doit s'étendre)<br><br>
rowspan=2<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></td>
<td width="16" height="17">coin 1</td>
<td height="17">----- dessus du cadre du contenu. extensible à l'horiz. ----- height=17</td>
<td width="16" height="17">coin 2</td>
</tr>

<tr>
<!-- la première partie est déjà contenue dans le <td rowspan="2"> -->
<td width="16" rowspan="2">g<br>a<br>u<br>c<br>h<br>e</td>
<td rowspan="2">Texte du contenu de la page...<br>Doit s'étendre horizontalement,<br>et verticalement aussi en fonction de la hauteur des menus.</td>
<td width="16" rowspan="2">d<br>r<br>o<br>i<br>t<br>e</td>
</tr>

<tr>
<td width="170" rowspan="2">Partie qui doit s'étendre<br>horizontalement en fonction<br>de la hauteur du texte<br>de contenu de la page.</td>
<td width="1" rowspan="2">|<br>e<br>x<br>t<br>e<br>n<br>s<br>.<br>|</td>
<!-- la partie contenu est déjà précisée avec <td rowspan="2"> -->
</tr>

<tr>
<!-- la partie en dessous des menus est déjà précisée avec <td rowspan="2"> -->
<td width="16" height="17">coin 3</td>
<td height="17">----- Dessous du cadre du contenu de la page. Extensible horiz. ----- height=17</td>
<td width="16" height="17">coin 4</td>
</tr>

</table><br>
Chaque coin est censé faire 16 en width, et 17 en height.<br>
Les bords de gauche et de droite du cadre du contenu sont censés faire 16 en width et être extensibles verticalement.<br>
Les bords du haut et du bas du cadre du contenu sont censés faire 17 en height.<br><br>

Le "cadre du contenu" est le cadre qui contient les "coins 1,2,3,4", pas le tableau général...
</font>

Et maintenant un exemple où le contenu est plus long que les menus:

Code : Tout sélectionner

<font size="1">
<table width="100%" border="1" style="font-size: 10px;">

<tr>
<td width="171" height="1" rowspan="2" colspan="2">Partie des menus<br>(je met height=1 car la<br>partie en dessous<br>doit s'étendre)<br><br>
rowspan=2<br><font color="#FF0000">Les menus ne sont pas longs!</font></td>
<td width="16" height="17">coin 1</td>
<td height="17">----- dessus du cadre du contenu. extensible à l'horiz. ----- height=17</td>
<td width="16" height="17">coin 2</td>
</tr>

<tr>
<!-- la première partie est déjà contenue dans le <td rowspan="2"> -->
<td width="16" rowspan="2">g<br>a<br>u<br>c<br>h<br>e</td>
<td rowspan="2">Texte du contenu de la page...<br>Doit s'étendre horizontalement,<br>et verticalement aussi en fonction de la hauteur des menus.
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></td>
<td width="16" rowspan="2">d<br>r<br>o<br>i<br>t<br>e</td>
</tr>

<tr>
<td width="170" rowspan="2">Partie qui doit s'étendre<br>horizontalement en fonction<br>de la hauteur du texte<br>de contenu de la page.<br><br>
<font color="#FF0000">C'est cette partie-ci<br>qui doit s'étendre!</font></td>
<td width="1" rowspan="2">|<br>e<br>x<br>t<br>e<br>n<br>s<br>.<br>|</td>
<!-- la partie contenu est déjà précisée avec <td rowspan="2"> -->
</tr>

<tr>
<!-- la partie en dessous des menus est déjà précisée avec <td rowspan="2"> -->
<td width="16" height="17">coin 3</td>
<td height="17">----- Dessous du cadre du contenu de la page. Extensible horiz. ----- height=17</td>
<td width="16" height="17">coin 4</td>
</tr>

</table><br>
Chaque coin est censé faire 16 en width, et 17 en height.<br>
Les bords de gauche et de droite du cadre du contenu sont censés faire 16 en width et être extensibles verticalement.<br>
Les bords du haut et du bas du cadre du contenu sont censés faire 17 en height.<br><br>

Le "cadre du contenu" est le cadre qui contient les "coins 1,2,3,4", pas le tableau général...
</font>

Voilà comme ça tu peux te faire une idée de mon problème...

Une idée ? :p

Merci à tous !
Bye
Pierre

31 oct. 2005, 01:22

Utilises la CSS :

Code : Tout sélectionner

<style>
#tabcent {
height: 100%;
width: 100%;
}
</style>

Et tu appelles ton tableau

Code : Tout sélectionner

<table id="tabcent">

ça fonctionnera pour ton design compliqué

31 oct. 2005, 11:42

hmm

Code : Tout sélectionner

<head>
<style>
#tabcent {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<table width="100%" border="1">
<tr><td height="400">h=400</td>
<td>

<table id="tabcent" border="1">
<tr><td height="15">up</td></tr>
<tr><td>middle<br>(partie extensible... :s)</td></tr>
<tr><td height="15">down</td></tr>
</table>

</td></tr></table>
</body>

fonctionne pas chez moi :S

Enfin c-à-d que le tableau tabcent se centre au milieu de sa cellule, mais il s'étend pas verticalement... *-)

Merci
Bye
Pierre

31 oct. 2005, 12:35

Tu es sur quel navigateur ? Je viens de tester sur IE ça marche très bien, le tableau tabcent prend bien le 100% en hauteur. Je n'ai pas testé sur firefox...

31 oct. 2005, 17:43

euuuh, non c'est avec IE6...

Avec le code que je t'ai donné tel quel sur le message précédent... :S

31 oct. 2005, 17:45

Mmmmhhh c'est louche moi aussi c'est sur IE6 et là je viens de retester....ça fonctionne.

Copies le code entier de ta page ici que je teste.

31 oct. 2005, 19:37

hmm, voilà un code:

Code : Tout sélectionner

<!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>Test</title>
<style> 
#tabcent { 
height: 100%; 
width: 100%; 
} 
</style> 
</head> 
<body> 
<table width="100%" border="1"> 
<tr><td height="400">h=400</td> 
<td> 

<table id="tabcent" border="1"> 
<tr><td height="15">up</td></tr> 
<tr><td>middle<br>(partie extensible... :s)</td></tr> 
<tr><td height="15">down</td></tr> 
</table> 

</td></tr></table> 
</body> 
</html>

et cela donné ça chez moi:

:S

Ciao
Pierre

(PS: Je pars en vacances jusqu'à vendredi, donc c'est normal si je ne donne pas de nouvelles jusque là...)

31 oct. 2005, 22:25

C'est ton doctype qui te cause ce soucis. Remplaces le par celui ci :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Et ça marchera

07 nov. 2005, 20:00

rhalalala c dingue cqu'une ligne de code à laquelle on accorde peu d'importance peut tout changer :p

Au fait, j'ai une autre question:

Qu'est-ce qu'il vaut mieux entre mettre
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
ou bien rien ?

Que se passe-t-il en fait quand on ne met rien ? Il met quoi par défaut ?

Merci en tout cas !
Ciao
Pierre

Pb de taille de cellules avec rowspan :'(

Qui est en ligne