Page 1 sur 2
Pb de taille de cellules avec rowspan :'(
Posté : 29 oct. 2005, 15:30
par Pidj24
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
Posté : 29 oct. 2005, 23:18
par charabia
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>
Posté : 29 oct. 2005, 23:27
par Cyrano
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
Posté : 29 oct. 2005, 23:35
par charabia
J'aurais pu en effet le préciser... :-" Mais bon j'ai mis "côté tableau html" c'est déjà ça
Posté : 30 oct. 2005, 00:30
par Pidj24
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
Posté : 30 oct. 2005, 12:53
par charabia
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.
Posté : 30 oct. 2005, 15:03
par Pidj24
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
Posté : 31 oct. 2005, 01:22
par charabia
Utilises la CSS :
Et tu appelles ton tableau
ça fonctionnera pour ton design compliqué
Posté : 31 oct. 2005, 11:42
par Pidj24
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
Posté : 31 oct. 2005, 12:35
par charabia
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...
Posté : 31 oct. 2005, 17:43
par Pidj24
euuuh, non c'est avec IE6...
Avec le code que je t'ai donné tel quel sur le message précédent... :S
Posté : 31 oct. 2005, 17:45
par charabia
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.
Posté : 31 oct. 2005, 19:37
par Pidj24
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à...)
Posté : 31 oct. 2005, 22:25
par charabia
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
Posté : 07 nov. 2005, 20:00
par Pidj24
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