Tableau Hauteur Adapté au contenu

muby · Décembre 10, 2007, 5:36

Bonjour,

Voila je vais essayer d’être clair.

et je voudrai ca :
http://muby53.free.fr/Aide/temp.jpg

Explication :

J’ai un tableau et j’aimerai que quand je rempli ma case principale (CONTENU) Que la cellules (LISTE) s’agrandisse pour completer, mais que les 2 autres cellules au dessus reste avec une hauteur Fixe.

Je cherche depuis un moment. J’ai essayé des tas de choses avec des height=“100%” ou height="*", mais rien n’y fait.

Quelqu’un aurait il une idée.

Merci d’avance

vyger · Décembre 10, 2007, 7:26

Dans ton code: balise

height tu mets "auto "au lieu de donner un valeur

a+

muby · Décembre 10, 2007, 9:26

Merci pour ta réponse, mais je la trouve un peu succinte.

J’ai essayer de mettre des div, des span, mais sans obtenir le résultat voulu.

Pourrai tu me dire concrétement ou je dois mettre des div et des span et quelles sont leur roles, car en faite je ne comprend pas pourquoi je suis obligé d’en mettre, pourquoi en définissant la taille des TD, cela ne fonctionne pas.

Merci encore

vyger · Décembre 10, 2007, 9:28

tu dois avoir au moins la variable Height

remplace les valeures en pixels par auto

a+
Edité le 10/12/2007 à 21:28

muby · Décembre 10, 2007, 9:42

Merci de m’avoir éclairer un peu.

J’ai réussit à obtenir ce que je voulais sous Firefox, mais sous Internet explorer le problème reste le même. Aurais tu une idée suplémentaire.

Merci d’avance


<table cellpadding="0" cellspacing="0" style="width: 938px;">
	<tr>
		<td rowspan="3" class="style2" style="width: 22px"></td>
		<td class="style5" style="height: 35px; width: 253px;"><div style="height: auto;"> Sous menu</div></td>
		<td rowspan="3" class="style3" style="width: 4px"><div style="width: 4px"></div></td>
		<td class="style1" rowspan="3">Contenu<br />
Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />
		</td>
		<td style="width:36px" rowspan="3" class="style4"> </td>
	</tr>
	<tr>
		<td class="style3" style="height: 4px"><div style="height: 4px"></div></td>
	</tr>
	<tr>
		<td class="style1" style="height:auto"><div style="height:auto">Liste<br/><br/></div></td>
	</tr>
</table>

Edité le 10/12/2007 à 21:42

vyger · Décembre 10, 2007, 9:47

eh bien dans ton extrait
tu as style 5,3 et1

en regard de tes lignes, et style qui correspondent aux lignes à modifier
tu change la valeur height:xxxpx par height:auto

a+
a ton service

muby · Décembre 10, 2007, 10:00

Je suis desoler, mais j’ai mis height:auto aux différentes lignes que tu m’a dis, mais voila le résultat :

http://muby53.free.fr/Aide/

vyger · Décembre 10, 2007, 10:04

pas normal… essai de reprendre et de changer (je connais pas le style de tes lignes) un par une.

muby · Décembre 10, 2007, 10:06

Ok je reverrai ca demain, mais encore merci.

Je te redirai

muby · Décembre 11, 2007, 10:18

Je me permets de revenir vers toi pour avoir une explication suplémentaire ou une aide plus concrete.

En effet la j’obtiens le résultat sous FF nikel, mais sous ie j’ai essayer un peu toute les combinaisons possible et rien n’y fais :s


<table cellpadding="0" cellspacing="0" style="width: 938px; height: 100%;">
	<tr>
		<td  rowspan="3" style="width: 22px;background-image: url('Back_Left.jpg')"></td>
		<td style="height: 35px; width: 253px;border: 1px solid #000000;background-image:url('SubMenu.jpg');" >Sous menu</td>
		<td style="width: 4px;	background-color: #869AB3;" rowspan="3" ></td>
		<td style="border: 1px solid #000000;background-color: #DCE1E7;" rowspan="3">Contenu<br />
Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />
		</td>
		<td style="width:36px;background-image: url('Back_Right.jpg');" rowspan="3" > </td>
	</tr>
	<tr>
		<td style="height: 4px;background-color: #869AB3;"></td>
	</tr>
	<tr>
		<td  style="height: auto;border: 1px solid #000000;background-color: #DCE1E7;" >Liste<br/><br/></td>
	</tr>
</table>

Merci d’avance

megatom_sk · Décembre 11, 2007, 6:21

SAlut

je viens de regarder un peu ton truc
alors déjà il faut savoir que IE et les TABLE c’est pas trop la fête…
encore + si tu utilises un DOCTYPE particulier (je vois que tu as en début de page :


<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

ça peut provoquer des problèmes d’affichage surtout tout ce qui concerne les tables

bref déjà pour pouvoir spécifier correctement une hauteur fixe pour le sous-menu, j’ai un peu remanié le tableau (justement à cause de IE qui gère mal les hauteurs) : en fait si tu ne spécifies pas une hauteur fixe à la cellule du dessous (‘Liste’) alors il gère pas correctement la hauteur du dessus… même si tu la mets en dur…

donc ce que j’ai fait, plutôt que ta table possède 3 lignes et 5 colonnes, je l’ai transformé en 1 ligne et 5 colonnes + une autre table dans la seconde colonne


<table cellpadding="0" cellspacing="0" style="width: 938px;">
	<tr>
		<td  class="style2" style="width: 22px"></td>
		<td style="width:200px; height:100%;">
		    <table cellpadding="0" cellspacing="0" style="height:100%;">
    		    <tr>
    		        <td class="style5" style="height:15px; width:200px;">Sous menu</td>
    		    </tr><tr>
    		        <td class="style1" style="width:200px;">Liste<br/><br/></td>
    		    </tr>
		    </table>
		</td>
		<td class="style3" style="width: 4px"><div style="width: 4px"></div></td>
		<td class="style1">Contenu<br />
Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />Contenu<br />
		</td>
		<td style="width:36px" class="style4"> </td>
	</tr>
</table>

En revanche, tant que tu conserves :


<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

la table ajoutée ne s’affichera pas convenablement dans IE (aucun soucis pour firefox)

J’ai mis ta page remaniée sur mon serveur :
www.megatom.info…

J’espère t’avoir dépanné
a+

Encore moi

voila un second exemple avec des DIV à la place de la seconde table :
www.megatom.info…

muby · Décembre 12, 2007, 8:38

Merci bcp megatom.sk pour ton aide je vais voir ca en debut de matiné.

Encore merci de ton aide

muby · Décembre 12, 2007, 10:40

Je tenais a te remercier MegaTom… car j’ai pu grâce a ton aide, faire ce que je voulais et cela fonctionne tres bien.

Merci encore

megatom_sk · Décembre 12, 2007, 1:04

De rien
ravi de t’avoir aidé