[XHTML] Tableau et dimension minimale

Version imprimable

21/05/2007, 11h22
amestoche

[XHTML] Tableau et dimension minimale

Bonjour à tous !
Alors voilà, je crée actuellement une nouvelle fonctionnalité dans un site web et ma mise en page est en tableau. Je sais, c'est vraiment pas le top mais pour le coup je n'ai pas le choix, on m'a donné ca tout fait à ne pas toucher ou du moins, presque pas. En fait, je voudrais que la taille d'une case dépende de la taille de la fenetre.
En gros, j'ai une en-tête, un pied de page et au milieu une ligne (contenant 2 <td>) et je voudrais que le tout prenne au minimum la taille de la fenetre. Comment faire ?
Merci d'avance pour votre aide.
21/05/2007, 13h00
Deallyra

ton table est en 100% pour height et width?
21/05/2007, 13h55
amestoche

Euh ben en largeur non mais ca, peu importe. Et en longueur oui, j'ai taille minimale de 100%, mais... rien ! lol (enfin non c'est pas vraiment drôle !)
21/05/2007, 14h01
Deallyra

:)

tu peux donner le code de ton tableau

Euh voilà le code source d'une page c'est plus simple étant donné que dans mon tableau tout est généré en PHP, ca ferait trop de fichiers !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
 
<!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>Essai</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="javascript.js" type="text/javascript"></script>
 
<script type="text/javascript">
function coche(bouton){
        if (bouton.checked){
                document.getElementById('retrait').style.display = "block";
        }
        else{
                document.getElementById('retrait').style.display = "none";
        }
}
</script>
</head>
 
 
<body>
 
<div id="bulle" style="position: absolute; z-index:11;display:none;"></div>
 
<script type="text/javascript" src="javascript.js"></script>
 
<div id="fond">
 
<form method="post" action="recup/recupRaisons.php" name="raisons">
 
<table id="conteneur" summary="main table" cellpadding="0" cellspacing="0">
	<tr>
		<td id="logo"><a href="../default.html"><img src="images/logo.png" alt="logo" /></a></td>
 
 		<td id="titre">SIMULATION D'ETUDE TERAWATT</td>
 
  </tr>
  <tr>
  	<td id="recommtd">
		<div id="recomm">
			<a href="index.php">Recommencer</a>
		</div>
	</td>
 
<td>
 
	<div id="etapes">
		<ul>
			<li id="etapeDebut"></li>
<li class="etapeFaite"><a href="index.php" onmouseover="pop0('Vos caract&eacute;ristiques essentielles')" onmouseout="disparaitre0()">Etape 1</a></li><li id="etapeEncours">Etape 2</li><li class="etapeAfaire">Etape 3</li><li class="etapeAfaire">Etape 4</li><li class="etapeAfaire">Etape 5</li><li class="etapeAfaire">Etape 6</li><li id="etapeFin"></li>			</ul>
		</div>
	</td>
 
</tr>
 
<tr>
	<td id="tdgauche">
 
    	<div id="bulleIdees">
			<div class="BItete">
				<div>
					Trop de listes ? Sélectionnez "Autres problèmes techniques" dans celles-ci				</div>
			</div>
 
			<div class="BIpied"></div>
    	</div>
 
		<br />
    	<br />
    	<br />
 
		<div id="mascotte">
			<img src="mascottes/teraman.png" alt="mascotte" />		</div>
	</td>		
	<td id="tddroit">
 
		<div id="contenu">
 
			<div id="texteQuestion" align="center">
	Optimisation : objectifs</div>		
		<div id="reponse">
				<input type="checkbox" name="raison0" value="prix" checked="checked" />
						<span id="opt" onmouseover="pop0('L'optimiseur synapse peut vous permettre de réduire votre contrat de 30 à 40%')" onmouseout="disparaitre0()">Je souhaite pouvoir r&eacute;duire ma facture d'&eacute;nergie &eacute;lectrique et je choisis <strong>l'optimisation tarifaire</strong></span>
 
						<br/><br/><br/><input  type="checkbox" name="raison1" value="technique" onclick="coche(this)" />
							<span id="pb" onmouseover="pop0('Mettre le texte approprié !')" onmouseout="disparaitre0()">Mon installation rencontre des difficult&eacute;s d'acc&egrave;s à l'&eacute;nergie, je ne peux disposer de le puissance souhait&eacute;e, mon infrastructure d'alimentation et/ou distribution <strong>sature</strong>.</span>	
 
 
			</div>
 
		</div>
	</td>
</tr>
 
<tr>
  	<td id="boutong">
			</td>
  	<td id="boutond">
		<table id="navig" summary="navigation" width="100%" border="0">
 
			<tr>
				<td align="left"><div id="precedent"><a href="#" onclick="javascript: history.back();">Précédent</a></div></td>
 
			    <td align="center"><div id="aide"><a href="#" onclick="popupcentree('aideraisons.htm')">? Aide</a></div></td>
			    <td align="right"><div id="suite"><a href="#" onclick="document.forms.raisons.submit();">Suite</a></div></td>
			</tr>
      </table>
	</td>
 
</tr>
 
<tr>
	<td id="piedg"></td>
	<td id="piedd">
		<div id="pied"></div>
	</td>
</tr>
</table>
 
</form>
</div>
 
</body>
</html>

21/05/2007, 14h14
Deallyra

ton premier table n'a pas de valeur en hauteur
21/05/2007, 14h18
amestoche

Euh ouais d'accord alors j'essaye avec des valeurs fixes, tout va bien mais si j'écris 100%, il reste comme il était (bon peut etre que c'est normal je sais pas) mais moi je voudrais que ca se mette à la longueur de la fenetre ! snifou
22/05/2007, 09h09
amestoche

Je m'autorise à relancer le sujet si quelqu'un ce matin peut m'apporter son aide.
Merci d'avance !
22/05/2007, 10h54
DachMt

Tu veux un pied de page en fait ?

c'est à dire un tableau de la hauteur de la fenêtre (avec tout en haut ton titre et tout en bas suivant toutes les resolutions ton pied de page) ? ou de la largeur ?

Je vois pas très bien ce que tu veux faire exactement.
22/05/2007, 11h20
amestoche

(lol)
Ben en fait, ma page est faite en un tableau et je voudris que la ligne du milieu s'adapte à la hauteur de la fenetre.
J'ai 5 lignes dans mon tableau et donc si on parle de pied de page, je voudrais que les deux dernières lignes composent le pied de page !
Voilà j'espère avoir été assez claire cette fois !

En xHTML le pied de page pose pas mal de problème.
Donc pour cette page passe en html de base, pas de doctype etc.
Ensuite ton tableau doit avoir une hauteur de 100%. Pour fixer un pied de page et un haut de page, il faut donner une valeur aux lignes pour celles du milieu évoluent suivant la résolution du gars (extensibles).

Je t'ai fait un exemple de page, avec un haut de page fixé à 50px pour ton titre et ton logo, et un pied de page (composé de 2 lignes de 20px) de 40px. Les 2 lignes du milieu sont donc extensibles. Après adaptes suivant tes besoins.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Titre de la page</title>
</head>
 
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50%" height="50">&nbsp;</td>
    <td width="50%" height="50">SIMULATION D'ETUDE TERAWATT</td>
  </tr>
  <tr>
    <td width="50%" align="left" valign="top">&nbsp;</td>
    <td width="50%" align="left" valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td width="50%" align="left" valign="top">&nbsp;</td>
    <td width="50%" align="left" valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="20" colspan="2" align="center"><table id="navig" summary="navigation" width="100%" border="0">
      <tr>
        <td width="40%" align="right"><div id="precedent"><a href="#" onclick="javascript: history.back();">Pr&eacute;c&eacute;dent</a></div></td>
        <td width="20%" align="center"><div id="aide"><a href="#" onclick="popupcentree('aideraisons.htm')">Aide</a></div></td>
        <td width="40%" align="left"><div id="suite"><a href="#" onclick="document.forms.raisons.submit();">Suite</a></div></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td width="50%" height="20">&nbsp;</td>
    <td width="50%" height="20">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Tiens-moi au courant ::D