Equivalent de height="*" (dans table)

CUCARACHA · 27/01/2007, 09h14

Salut,

Pourriez-vous me dire quel est l'équivalent de height=* ou width=* en css lorsque l'on travaille en XHTML 1.1 Transitional

D'avance merci

Laurent Jordi
http://www.ezlogic.mc

**Bisûnûrs** · 27/01/2007, 10h35

Je n'ai jamais utilisé le * dans une table, mais je suppose que l'équivalent doit être auto.
Si ce n'est pas ça, je n'en ai aucune idée.

**Candygirl** · 27/01/2007, 10h41

Il ne me semble pas qu'il soit possible de déclarer un document transitionnel en xhtml 1.1 ? Du moins il n'apparaît pas dans la liste des doctypes recommandés par le w3c

Enfin peut-être t'es-tu juste trompé et tu utilises un xhtml 1.0 transitionnel?

Pour répondre à ta question les propriété css sont, tout simplement, width et height

Dans le cas d'un height en %, il faut être attentif que le height du conteneur doit être alors clairement spécifié sans quoi c'est la valeur auto qui sera appliquée.

EDIT: oups, j'ai probablement mal interprêté la question; j'ai pris le * pour n'importe quel nombre...

CUCARACHA · 27/01/2007, 11h10

Je suis si vieux ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<html>
<head>
    <style>
        html,body{
        /*Ceci me donne 100% de l'espace dispo à l'écran*/
        height:100%;
        width:100%;
        margin:0
        }
    </style>
</head>
<body>
<!--Ancienne façon-->
<table border="1" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr>
    <td height="25px" BGColor="#bbbbbb">Ligne de titre fixée à 25px de haut</td>
</tr>
<tr>
    <td height="*" valign="top" BGColor="#bbffff">Ligne conteneur utilisant tout l espace restant</td>
</tr>
</table>
</body>
</html>

Copiez cet exemple dans un fichier texte, enregistrez-le sous test.htm puis double cliquez dessus. Ca illustrera ce que je veux faire.

Je ne suis pas un grand fanatique des normes en particulier lorsque ces dernières nous font régresser cependant j'ai noté que c'était très rarement le cas. J'aimerais donc normaliser cette pratique et obtenir le même résultat en ajoutant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--remplace <html>-->
<html xmlns="http://www.w3.org/1999/xhtml">

en haut du document.

Lorsque l'on voit le résultat on comprend immédiatement là ou je veux en venir...

D'avance merci

Laurent

**Candygirl** · 27/01/2007, 11h26

Quelque chose comme ça ? (j'ai mis le css directement dans les balises):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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><title>Untitled Document</title>
    <style type="text/css">
        html,body{
        /*Ceci me donne 100% de l'espace dispo à l'écran*/
        height:100%;
        width:100%;
        margin:0
        }
    </style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
<body>
<table style="width:100%;height:100%;border-collapse:collapse;" >
<tr>
    <td style="height:25px;background-color:#bbb;">Ligne de titre fixée à 25px de haut</td>
</tr>
<tr>
    <td style="vertical-align:top; background-color:#bff;">Ligne conteneur utilisant tout l espace restant</td>
</tr>
</table>
</body>
</html>

Edit: Cela ne fonctionne pas sous IE

Par contre, effectivement, en mode quirk il l'interprète bien correctement. Je laisse mon exemple en css au cas où quelqu'un veut tester et a une solution compatible IE.

Tu as besoin de ce type de construction pour faire quoi exactement ?

CUCARACHA · 27/01/2007, 11h34

Salut,

Je ne comprends pas ta réponse.

Merci de reformuler

@+
Laurent

**Candygirl** · 27/01/2007, 12h01

Oui, toutes mes excuses, j'avais passé ton tableau en définissant les dimensions, etc.. en css puisque j'avais compris que c'était le but de la question. Ce code fonctionnait correctement sous FF et Opera et j'ai posté avant de testé sous IE

J'ai réédité mon message ci-dessus en remettant mon code pour une meilleure compréhension. En fait ton problème n'est pas vraiment de passer en css mais plutôt que ton doctype modifie l'interprétation de ton tableau sur IE, c'est bien ça?

Je n'ai perso pas de solution à te proposer par contre, je te demande dans quel but tu veux obtenir ce résultat parce que si ce n'est pas pour présenter des données tabulaires, il y a moyen d'obtenir ce résultat autrement.

CUCARACHA · 27/01/2007, 12h36

Re,

Merci de ta patience. En fait je fais de la programmation Ajax. Le tableau de fond me sert de cadre de définition des zones dans lesquelles (et notamment dans la zone à taille dynamique) j'insère une Iframe.

Jusqu'à présent j'utilisais des cadres à base de frameset, malheureusement c'est pas très pratiques en asp.net 2.0.

Je voulais donc opter pour une définition des zones à base de tables (que je maîtrise assez bien en html 4.01).

Je crois que je vais revenir à ma bonne vielle programmation à base de frameset qui est super fiable et ce, quelque soit le navigateur.

Au cas ou mon cms EZ Sites avec lequel est fait http://www.ezlogic.mc est basé sur ce principe.

Je me suis même amusé à créer un fichier Frameset entièrement coté serveur avec C#2.0 et ça marche super bien mais, en l'occurrence, je voulais me rapprocher de la programmation conventionnelle.

Bien à toi

Laurent

**Candygirl** · 27/01/2007, 13h11

ok, si j'ai bien compris, voici un petit exemple vite fait (je dois partir

) d'une mise en page dans le style de la tienne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!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>Document sans nom</title>
<style type="text/css">
<!--
html,body {height:100%;}
 
* {margin:0;padding:0;}
 
#top {
  height:100px;
  background-color:#F63;
}
 
#content {
 position:absolute;top:100px; bottom:0;
 width:100%;
 background-color:#ccc;
 overflow:auto;
}
-->
</style>
<!--[if lte IE 6]>
  <style>
	  #content {
		  height: expression(document.body.clientHeight-100+"px" )
		}
	</style>
<![endif]-->
</head>
<body>
<div id="top">top</div>
<div id="content">
  <p>contenu</p>
  <p>contenu</p>
  <p>contenu</p>
  <p>contenu</p>
  <p>contenu</p>
  <p>contenu</p>
  <p>contenu</p>
  <p>contenu</p>
</div>
</body>
</html>

Tu remarqueras qu'on est obligé de passer par du javascript pour IE6, mais avec le javascript désactivé le site reste consultable avec une présentation différente.

Le overflow fait apparaître la scrollbar lorsque le contenu est plus long que la hauteur de la fenêtre.

En espérant t'avoir donné des idées à défaut d'avoir résolu ton problème

CUCARACHA · 27/01/2007, 13h41

Re,

Merci pour ces détails. Concernant le javascript désactivé, je ne ferais pas de commentaires mais je suis contre, en plus l'application définitive sera probablement destinée à des développeurs qui disposent, en général, d'environnements débridés.

Reconnais quand même que c'était plus simple avant et vu que ça marche, je me demande dans quelle mesure je ne vais pas garder mon bon vieux DHTML 4.01 qui me permet de faire des mises en page parfaites...

D'ailleur, au passage j'en profire pour râler un peu car je n'apprécie pas lorsque l'on retire des fonctionnalités qui sont déjà crossplatform a une norme...

Bien à toi

Laurent

Equivalent de height="*" (dans table)

Tableau en CSS

Discussions similaires

Partager

Partager