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
Version imprimable
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
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. :mrgreen:
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... ;)
Je suis si vieux ?
Copiez cet exemple dans un fichier texte, enregistrez-le sous test.htm puis double cliquez dessus. Ca illustrera ce que je veux faire.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 <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>
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
en haut du document.Code:
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">
Lorsque l'on voit le résultat on comprend immédiatement là ou je veux en venir...
D'avance merci
Laurent
Quelque chose comme ça ? (j'ai mis le css directement dans les balises):
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.Code:
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>
Tu as besoin de ce type de construction pour faire quoi exactement ?
Salut,
Je ne comprends pas ta réponse.
Merci de reformuler
@+
Laurent
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.
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
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:
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.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 <!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>
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 :)
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