28173 sujets

CSS et mise en forme, CSS3

Défit XHTML 1.1 - Est-ce impossible?

Bonjour à tous,

Ca fait un moment que je lutte avec ces div !!! Impossible d'arriver à un résultat équivalent entre IE et firefox !!
Que je mette la DTD ET/OU le prologue XML OU rien du tout, rien ne fonctionne comme je voudrais...
Soit... : des divs imbriqués avec des padding pour espacer les bordures du texte, un tableau de 2 cellules à l'intérieur qui prends 100% du div (moins le padding et les bordures) avec un cellpadding pour espacer également les 2 champs text, et donc ces 2 champs texte qui prennent toute la taille du tableau (moins le cellpadding).
Bizarement, le résultat que je voudrais, j'arrive à l'obtenir seulement dans le quirkmode de firefox (sans aucune DTD)... même le quirkmode de IE déconne... Et je parle même pas de lorsque je met une DTD...

Donc voici le défit si quelqu'un est capable de me faire une page XHTML 1.1 compatible tout navigateur, de ce pauvre code :


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <title>Test</title>
    <style type="text/css">
		html, body, form { width: 100%; height: 100%; margin: 0px; padding: 0px; }
    </style>
</head>
<body>
    <form id="aspnetForm">
		<div style="border: dashed 2px #ff0000; margin: 0px; padding: 10px;">
			<div style="border: dashed 2px #ff0000; padding: 2px;">
				<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
					<tr>
						<td style="width: 50%;">
							Titre 1
						</td>
						<td style="width: 50%;">
							Titre 2
						</td>
					</tr>
				</table>
			</div>
			<div style="padding: 2px; border-bottom: dashed 2px #ff0000; border-left: dashed 2px #ff0000; border-right: dashed 2px #ff0000;">
				<table border="0" cellpadding="0" cellspacing="2" style="width: 100%;">
					<tr>
						<td>
							<input type="text" style="width: 100%;" />				
						</td>
						<td>
							<input type="text" style="width: 100%;" />				
						</td>
					</tr>
				</table>
			</div>
		</div>
    </form>
</body>
</html>


Je précise que je suis obligé d'utiliser des tableaux à 100% en taille à l'intérieur des divs...

Bon courage, j'ai essayé des milliers de possibilités sans jamais arriver à un code compatible XHTML 1.1 sur Firefox ET Internet Explorer sas avoir les champs text tronqués ou qui dépassent du tableau ou des divs, sans que le div de base prenne plus de 100% de la page, ect... !

Celui qui réussit, je m'inclinerai devant lui car j'ai vraiment tout essayé et ça fait déjà 10 ans que je développe des sites Internet...

J'éspère que quelqu'un trouvera car je désespère...

Merci d'avance et bonne chance !
Hopla,

comme précisé dans ce message dans un autre de tes topics (n'oublie pas de t'en occuper) :

Width="100%" height="100%" plus une bordure ou un

Es-tu certain d'utiliser correctement xHTML1.1 et d'en avoir besoin ?

Je ne pense pas du tout.

Par ailleurs, en xHTML strict, les attributs de mise en forme sont proscris, toute la mise en forme doit se trouver au niveau des styles CSS.

Le problème que tu soulèves dans ce sujet me semble être le même ou au moins être connexe avec celui de l'autre topic, pourquoi en ouvrir un second dans ce cas ?

Pour terminer, ce forum n'est pas un fast-food, et ton pseudo-défi "qui pourra me faire ça sans que je ne fasse rien de mon côté" n'est pas tellement apprécié ici. Nous apportons notre aide aux autres mais en retour des efforts doivent être faits et un travail réalisé. C'est une communauté d'entre aide, pas de travail à votre place.
Modifié par Igor (05 Sep 2006 - 12:13)
Merci pour ta réponse,

J'utilise XHTML 1.1 pour utiliser les dernière technologies, mais que j'utilise le doctype du XHTML 1.1 ou XHTML 1.0 transitional et même HTML 4.01, les résultats sont les mêmes. J'arrive à me rapprocher du résultat voulu que sans aucune DTD. Je veux bien utiliser n'importe quel DTD, il n'y a pas de problèmes. J'ai mis les styles en ligne histoire d'afficher un code simple en un seul fichier html, d'habitude je met tout dans une feuille de style séparée.

Sinon, j'ai créé ce message avec le Titre "Défit XHTML 1.1", pour inciter les gens à me répondre car justement, j'ai passé des jours et des jours à tester toutes les dtd, tous les hacks possibles, vraiment tout pour faire fonctionner ces quelques lignes de codes sur tous les navigateurs en vain. Je cherche pas à faire bosser les autres sans rien faire ! Je développe un CMS en asp.net 2.0 / SQL Server 2005, je maitrise assez mon domaine, mais c'est juste que j'ai TOUT essayé avec ces divs, mais j'ai jamais réussi. Donc, je souhaitais juste que quelqu'un qui a pu rencontrer ce problème transforme mon simple bout de code incompatible en un code compatible, si c'est possible.

Désolé de m'être mal exprimé et d'avoir voulu une réponse que je cherche depuis des jours entiers, si ce n'est des mois ! Mais j'adore votre site, j'ai lu tous les articles concernant XHTML, les css, les dtd, le quirkmode etc... avant de poster ces messages... Et si je peux aider en répondant à des questions sur le forum, je suis près à le faire.

Voila, je demandais juste de l'aide, quelqu'un peut-il transformer ce code en code compatible tout navigateur et au résultat souhaité?
Modifié par Anksunamon (05 Sep 2006 - 11:05)
"utiliser XHTML 1.1 pour utiliser les dernières technologies" n'est pas une bonne raison. Ce que voulait dire Olivier, c'est que déclarer du XHTML 1.1, c'est faire le choix conscient de n'être, finalement, pas supporté par la majorité des utilisateurs de navigateurs graphiques. Il sera plus sage de revenir au 1.0...
Pas de problème, je veux bien utiliser du xhtml 1.0 transitional si il faut. Encore faut-il pouvoir avoir le résultat désiré compatible tout navigateur...
Personne ne peut vraiment transformer ce code en version compatbile tout navigateur et ayant le même rendu?

Cela voudrait-il dire que les div ou xhtml ou les navigateurs ne pourront jamais bien tous interprêter ce code? Donc on est obliger d'utiliser des talbeaux pour que ça marche?
Anksunamon a écrit :
Personne ne peut vraiment transformer ce code en version compatbile tout navigateur et ayant le même rendu?

Cela voudrait-il dire que les div ou xhtml ou les navigateurs ne pourront jamais bien tous interprêter ce code? Donc on est obliger d'utiliser des talbeaux pour que ça marche?



Et allons-y pour que ça troll ! Youhhhouuu, on arrête pas le progrès !!

T'as pas capté ou t'es un peu en retard ?
Je t'ai dis que c'était pas le genre de la maison de faire du truc tout cuit dans le bec. Personne ne va te pondre un truc comme ça pouf pouf s

ans que t'en glande pas une, c'est clair là ?

Par contre, tu as des masses de tutoriels, de points de FAQ, de billets de blog, de messages sur le forum (qui, mais oui mais oui, comble du progrès contient une fonction recherche) pour t'aider.

Une fois que tu auras avancé (ou non) avec ces éléments d'aides, tu pourras quérir de l'aide complémentaire sur un problème spécifique pour lequel tu n'as pas trouvé de solution parmi la masse de ressource disponible ici ou ailleurs, là n'importe qui sera là pour t'aider, te conseiller, te guider, te corriger.


Ce sujet reste ouvert si ça ne dévie pas plus et si tu comprends ce que je viens de *re*dire, sinon il sera fermé et point barre car je vois mal comment ça pourrait devenir constructif en partant dans ce sens.

La journée du troll bien gras et bien velu, c'est le vendredi sur ce forum, donc t'attend vendredi pour faire du discours sans queue ni tête et complétement stéril sur un sujet que tu ne maîtrise pas.

<edit>je ne suis pas particulierement courtois dans ce message, mais tu le cherches bien à ne pas lire ce qui t'es dis et conseillé et à continuer dans une voie qui ne te menera nulle part. Je retrouverais un ton courtois si tu changes de comportement et n'hésiterais pas à t'apporter mon aide si tu y met du tient, mais là personne n'aura envie de t'aider.</edit>



Par ailleurs, ton titre de sujet ne veut strictement rien dire et n'apporte aucune information sur le problème que tu rencontres, c'est un point supplémentaire qui n'incite pas les autres membres à t'apporter leur aide.
C'est une règle de ce forum (que tu as lue (???) et acceptée (!!!) en t'inscrivant ici).
Modifié par Olivier (06 Sep 2006 - 11:32)
J'ai déjà dit que j'avais vraiment tout essayé pour rendre mon code compatible tout navigateur, vraiment! Mais j'ai jamais réussis !

J'ai lu tous les tutoriaux de ce site ! tous ! Aucun ne me permet de faire ce que je souhaite faire !

Ca fait 10 ans que je développe des sites internet ! Je développe actuellement en asp.net 2.0 / sql server 2005 / ajax ! Je maitrise mon sujet !

Le seul truc que je ne maitrise pas, et que je cherche à résoudre depuis de nombreuses année, c'est cette histoire de div qui ne me permettent pas de faire ce que je veux par rapport aux tables et qui ont un affichage différent suivant le navigateur, le DTD, le prologue XML que j'ajoute. J'ai vraiment tout essayé avant de créer un topic sur ce forum !!!

C'est pour ça que je cherche de l'aide pour qu'on me prouve qu'il est possible de faire avec des div ce que je fais facilement avec des tableaux et qui est 100% compatible tout navigateur, avec une taille de 100% en largeur et/ou en hauteur ! Mais personne pour l'instant n'a pu ni su me répondre, donc je considère donc, après ces mois voir années de recherches et test entre tableaux et divs qu'il est impossible d'avoir le rendu correcte en utilisant les div à cause de leur limitations et spécifications.

Maintenant, si quelqu'un arrive à rendre mon code qui est au-dessus compatible avec tous les navigateurs, alors on m'aura donné l'aide que je demandais, peut-être mal exprimé j'en suis désolé, mais pour l'instant, à part me dire qu'il faut que je cherche plus (super comme aide) et je l'ai déjà fait, personne n'est capable de me donner l'aide que je demande...

Je suis courtoi, je souhaite juste avoir de l'aide, j'ai donné un mauvais titre au topic, désolé. Si ça fait des années que je cherche une réponse à mon problème c'est que je n'ai pas trouvé de solution, j'ai cherché partout, alors aidez-moi s'il vous plait.
Modérateur
Bonjour,

IE passe en mode Quirk dès lors que tu mets quelquechose avant la DTD alors qu'avec Firefox, par exemple, tu n'as pas ce problème.

Il est donc préférable d'éviter XHTML 1.1 sur IE autrement qu'en UTF-8.

Je crois d'ailleurs que ce n'est pas le seul problème mais je n'ai pas le temps de vérifier. Bref, encore une fois, évite le XHTML 1.1.
Modifié par koala64 (06 Sep 2006 - 13:53)
Pour une mise en page compatible tous navigateurs modernes (IE6 compris), dans les cas où c'est possible (c'est à dire où on se base sur des propriétés qui sont implémentées par tous les navigateurs modernes), il faut :
- être en mode standard et non pas en mode Quircks, donc avec une DTD valide et SANS prologue XML ;
- utiliser HTML 4.01 (de préférence) ou XHTML 1.0 servi avec le type MIME "text/html", en Transitional ou en Strict ;
- savoir gérer le modèle de boîte standard et ses possibilités/limitations.

Les feuilles de style CSS sont des outils puissants, mais pas parfait (aussi bien à cause des défauts d'implémentations que de certaines limitations des CSS). Elles ne font donc pas tomber la pluie, et ne font pas le café. Par contre, on peut réaliser pas mal de mal de choses assez bluffantes. En résumé, il y a des type de mise en page classiques avec les tableaux qui deviennent impossibles à faire en CSS (sauf à bidouiller des solutions souvent peu convaincantes), mais également un certain nombre de mises en pages qui étaient compliquées à faire en tableaux, et qui s'avèrent plus simple en CSS.
Si on rajoute dans la balance les gains sur l'accessibilité et la maintenance des sites, ça penche furieusement du côté des CSS (mais ça n'est que mon avis, je n'ai pas de benchmark à présenter...).

La principale limitation des mises en page en CSS se trouve dans la gestion de la hauteur et du positionnement vertical. Le web étant un média très fluide dans sa hauteur (quantité de contenu variable, taille des caractères variable), il devient parfois difficile de gérer des demandes comme : « je veux que le site prenne systématiquement au moins 100% de la hauteur visible » (difficile pour un débutant, mais avec un poil de rigueur et de connaissances en CSS ça passe tout seul), ou « je veux centrer mon texte (variable) verticalement dans un conteneur dont la hauteur est fixe » (pas de solution vraiment satisfaisante).


Maintenant, on reprend dans le calme
Anksunamon, tu fournis un code que tu souhaites « compatible », et une brève description de la mise en page voulue. Le truc, c'est que :
1. je ne sais pas si le rendu que mon navigateur me donne de ton code est le rendu souhaité ;
2. je ne sais pas si certains éléments de ce rendu sont de simples indications, ou si ils doivent faire partie du rendu final (des choses comme des bordures et des padding superflus peuvent jouer sur la mise en page) ;
3. je n'ai au final aucune idée du rendu souhaité.

Je propose donc que tu nous fasse un petit schéma, parce que là je me demande dans quelle direction chercher...
Ok, merci pour cette réponse convainquante !

Voici le rendu que je souhaite rendre compatible tout navigateur :

- je veux utiliser des divs qui prennent 100% de la largeur visible.
- pouvoir mettre des bordures et des padding à ces divs
- pouvoir mettre dans ces divs des champs texts qui prennent 100% de la largeur de son conteneur qui a une bordure et un padding sans que ce champs n'empiètre justement sur cette bordure et/ou padding
- et si possible pouvoir utiliser des div qui ont une hauteur de 100% de la hauteur visible, mais la c'est encore plus chaud.
- je veux bien utiliser n'importe quel dtd, prologue ou même le quirksmode si quelqu'un trouve un code compatible avec la plupart des navigateurs

Ce code fonctionne bien sur firefox et c'est le rendu que j'attends, mais en quirksmode car pas de DTD, et ne marche pas sur IE car il n'y a pas de taille pour les divs (il y a les ascenceurs horizontaux et verticaux) :


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <title>Test</title>
    <style type="text/css">
		html, body, form { width: 100%; height: 100%; margin: 0px; padding: 0px; }
    </style>
</head>
<body>
    <form id="aspnetForm">
		<div style="border: dashed 2px #ff0000; margin: 0px; padding: 10px;">
			<div style="border: dashed 2px #ff0000; padding: 2px;">
				<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
					<tr>
						<td style="width: 50%;">
							Titre 1
						</td>
						<td style="width: 50%;">
							Titre 2
						</td>
					</tr>
				</table>
			</div>
			<div style="padding: 2px; border-bottom: dashed 2px #ff0000; border-left: dashed 2px #ff0000; border-right: dashed 2px #ff0000;">
				<table border="0" cellpadding="0" cellspacing="2" style="width: 100%;">
					<tr>
						<td>
							<input type="text" style="width: 100%;" />				
						</td>
						<td>
							<input type="text" style="width: 100%;" />				
						</td>
					</tr>
				</table>
			</div>
		</div>
    </form>
</body>
</html>


Si j'ajoute le DTD html 4.01 (Strict ou transitional), XHTML 1.0 (Strict ou transitional) ou XHTML 1.1 à ce code, les padding des divs ne sont plus respectée, les champs texts sont tronqués, et ce sur IE ET Firefox.

---------------

Ce code fonctionne sur IE mais pas sur Firefox car il y a une taille pour les divs. (il y a les ascenceurs horizontaux et verticaux). Toujours en quirksmode :


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <title>Test</title>
    <style type="text/css">
		html, body, form { width: 100%; height: 100%; margin: 0px; padding: 0px; }
		div { width: 100%; }
    </style>
</head>
<body>
    <form id="aspnetForm">
		<div style="border: dashed 2px #ff0000; margin: 0px; padding: 10px;">
			<div style="border: dashed 2px #ff0000; padding: 2px;">
				<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
					<tr>
						<td style="width: 50%;">
							Titre 1
						</td>
						<td style="width: 50%;">
							Titre 2
						</td>
					</tr>
				</table>
			</div>
			<div style="padding: 2px; border-bottom: dashed 2px #ff0000; border-left: dashed 2px #ff0000; border-right: dashed 2px #ff0000;">
				<table border="0" cellpadding="0" cellspacing="2" style="width: 100%;">
					<tr>
						<td>
							<input type="text" style="width: 100%;" />				
						</td>
						<td>
							<input type="text" style="width: 100%;" />				
						</td>
					</tr>
				</table>
			</div>
		</div>
    </form>
</body>
</html>


Si j'ajoute n'importe quel DTD à ce code, alors c'est encore pire, ya les ascenceurs H et V sur IE ET Firefox, et les paddings ne sont pas respectés non plus.

Quand je vous dit que j'ai tout essayé...

Que faire de plus?
Modifié par Anksunamon (06 Sep 2006 - 15:28)
Anksunamon a écrit :
- je veux utiliser des divs qui prennent 100% de la largeur visible.
- pouvoir mettre des bordures et des padding à ces divs

Le comportement normal d'un élément de type bloc est de prendre toute la largeur disponible. Il suffit de ne pas préciser de width: 100%; superflu, afin de garder une certaine souplesse (sinon, selon le modèle de boîte standard, les bordures et padding se rajoute à cette largeur de 100%, et forcément plus de 100% c'est trop large.

a écrit :
- pouvoir mettre dans ces divs des champs texts qui prennent 100% de la largeur de son conteneur qui a une bordure et un padding sans que ce champs n'empiètre justement sur cette bordure et/ou padding

Pas sûr d'avoir saisi ce bout là, mais ça devrait être jouable.

a écrit :
- et si possible pouvoir utiliser des div qui ont une hauteur de 100% de la hauteur visible, mais la c'est encore plus chaud.

C'est effectivement plus difficile à négocier, voire impossible dans certains cas. Je propose donc de s'en occuper dans un second temps, pour voir ce qu'il est possible de faire. Mais d'abord, partir sur une base correcte.

En voici une, de base correcte, à partir du code que tu donnes et qui marche sous Firefox. J'ai supprimé pour l'instant l'élément form (il sera toujours possible de le rajouter à un endroit peut-être plus stratégique, comme enfant direct de la div#page, par exemple), et surtout les histoires de width: 100% superflux (seuls ceux des tableaux restent, car les tableaux ne prennent pas automatiquement toute la largeur disponible).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <title>Test</title>
    <style type="text/css">
		html, body {
			margin: 0;
			padding: 0;
		}
		div#page {
			padding: 10px;
			border: dashed 2px red;
		}
		div.bloc {
			padding: 2px;
			border: dashed 2px red;
		}
		div.deuxieme {border-top: none;}
    </style>
</head>
<body>
<div id="page">
	<div class="bloc premier">
		<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
			<tr>
				<td style="width: 50%;">
					Titre 1
				</td>
				<td style="width: 50%;">
					Titre 2
				</td>
			</tr>
		</table>
	</div>
	<div class="bloc deuxieme">
		<table border="0" cellpadding="0" cellspacing="2" style="width: 100%;">
			<tr>
				<td>
					<input type="text" style="width: 100%;" />
				</td>
				<td>
					<input type="text" style="width: 100%;" />
				</td>
			</tr>
		</table>
	</div>
</div>
</body>
</html>

XHTML 1.0 Strict, compatible IE6 et Firefox 1.5 (a priori également pour les autres navigateurs modernes, et une partie des versions anciennes). On peut mettre un doctype Transitional si besoin, ou rester en HTML 4.01 si on le souhaite.

Petite nuance sur les CSS : j'ai déplacé un certain nombre de déclarations de mise en forme dans la feuille de style interne (exit une bonne partie des attributs HTML style). Dans un cas, j'ai utilisé plusieurs classes pour un même élément, sous la forme class="classe1 classe2".

Donc, comme je le disais, pour la compatiblité entre les navigateurs :
- code valide ;
- mode de rendu standard (pas de Quircks mode sauf pour des besoins très précis).

Bon, je pense que pour la largeur on y est.

Je n'ai pas touché aux tableaux, même s'il serait possible de faire sans, ou au pire d'unifier titres et champs dans un tableau unique (déjà plus compréhensible, je pense, avec un lecteur d'écran).
Merci pour ta réponse.

Malheureusement, le cellspacing de 2px (pareil si tu le met à 0 et que tu met un celpadding à 2px) ne s'affiche pas, car le champ texte passe par dessus. Le padding de droite du tableau en bas à droite contenant le dernier champ texte n'est pas respecté non plus car le champ texte est collé à la bordure.

C'est en fait pratiquement le même code que le mien sauf que j'avais mis les styles en ligne pour faire mes tests.

Donc y a t'il une solution pour le les champs texte prennent 100% de la largeur de son conteneur moins son éventuelle bordure ou padding? En sachant qu'en fait 100 % d'un champ text c'est 100% plus 1px de bodure de chaque côté...
Modifié par Anksunamon (06 Sep 2006 - 16:10)
Anksunamon a écrit :
C'est en fait pratiquement le même code que le mien sauf que j'avais mis les styles en ligne pour faire mes tests.

Vu que, comme je le précisais, c'est une légère modification de ton code, il est normal que ça ressemble. Smiley cligne

Anksunamon a écrit :
Donc y a t'il une solution pour le les champs texte prennent 100% de la largeur de son conteneur moins son éventuelle bordure ou padding? En sachant qu'en fait 100 % d'un champ text c'est 100% plus 1px de bodure de chaque côté...

Après, pour les détails de ce genre, on jouera sur les différents éléments, avec des margin, des padding, suivant les besoins.
Un petit exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <title>Test</title>
    <style type="text/css">
		html, body {
			margin: 0;
			padding: 0;
		}
		div#page {
			padding: 10px;
			border: dashed 2px red;
		}
		div.bloc {
			padding: 2px;
			border: dashed 2px red;
		}
		div.deuxieme {border-top: none;}
		
		.bloc table {border: none; border-collapse: collapse;}
		.deuxieme td {padding: 2px 4px;}
		.deuxieme input {border: solid 1px gray;}
    </style>
</head>
<body>
<div id="page">
	<div class="bloc premier">
		<table>
			<tr>
				<td style="width: 50%;">
					Titre 1
				</td>
				<td style="width: 50%;">
					Titre 2
				</td>
			</tr>
		</table>
	</div>
	<div class="bloc deuxieme">
		<table>
			<tr>
				<td>
					<input type="text" style="width: 100%;" />
				</td>
				<td>
					<input type="text" style="width: 100%;" />
				</td>
			</tr>
		</table>
	</div>
</div>
</body>
</html>

En n'oubliant pas qu'on peut préciser des padding et margin pour un côté seulement d'un élément, ou avec des valeurs différentes pour chacun des quatre côtés, etc.

Se référer pour cela à la syntaxe CSS et aux propriétés margin et padding.
Bonjour à tous,

J'arrive peut-être comme un cheveu sur la soupe, et sans réponses au problème posé, mais pourquoi ces deux tableaux ?
Merci beaucoup pour avoir cherché une solution pour ce problème.

Ca s'améliore, mais le résultat n'est pas le même entre firefox et IE, à quelques pixels près...
Je considère quand même que c'est du bidouillage pour ne pas avoir un rendu identique avec tous les navigateurs, alors qu'avec des tableau en quirks mode, ba il n'y a absolument rien a faire tout est correcte et avec un rendu compatible tout navigateur.

En tout cas s'est sympas de s'être penché sur mon pb... mais je pense vraiment que si on a pas envi de galérer et qu'on veut que tout soit compatible et avoir un rendu identique avec tous les navigateurs, le meilleurs moyen, c'est de banir les divs !!! et de ne pas mettre de dtd... Surtout si après on veut utiliser une hauteur de 100% par la suite...

Véro, les tableaux c'était juste en example pour faire 2 cellules... Et j'ai de toutes façons besoin d'utiliser des tableaux avec des champs textes dedans à cause de asp.net 2.0 et des formview qui génère par défaut des tableaux.

Encore merci pour votre aide, même si finalement aucune astuce n'est 100% compatible avec un rendu 100% identique avec tous les navigateurs...

Table and quirksmode RULES!!!
Modifié par Anksunamon (06 Sep 2006 - 18:27)
Anksunamon a écrit :
Table and quirksmode RULES!!!

Libre à toi de voir les choses ainsi.

Pour conclure ce sujet, que je vais par ailleurs fermer pour éviter des polémiques inutiles, je voudrais faire le point sur les solutions alternatives :

- utiliser une mise en page en tableaux, dans un site sans déclaration de type de document (rendu en mode Quircks), avec une accessibilité mise à mal ou carrément nulle, ce qui permet (plus ou moins) d'avoir une mise en page « au pixel près », et une gestion peut-être plus souple du positionnement et dimmensionnement vertical grâce aux tableaux ;
- utiliser une mise en page sans tableaux (avec des conteneurs div ou d'autres éléments, suivant le contenu de la page et sa structuration), qui permet une meilleure accessibilité[1], avec des possibilités de mise en forme graphique (et de positionnement des éléments) riches bien que ne garantissant pas une mise en page identique « au pixel près », et permettant une meilleure maintenance du code, voire une refonte graphique complète en modifiant uniquement la feuille de style.

Chacun, dans la mesure où il sera libre de ses choix techniques[2], fera son propre choix.

À titre personnel, l'importance d'une maîtrise « au pixel près » d'un design est toute relative. Même s'il est tout à fait possible de maîtriser « au pixel près » un certain nombre d'aspects d'une mise en page (ce qui permet généralement de garantir une mise en page sans « trous » dans le graphisme, ou sans écarts imprévus), on ne peut effectivement pas tout contrôler, en particulier dans le sens de la hauteur -- le sens dans lequel s'étend le contenu.

Mais les gains d'un design au pixel près me semblent relativement faibles, du moment que les éléments du design qui doivent garder leur cohérence sont rendus correctement.

--
1 - Mais ne la garantit pas pour autant !
2 - À noter que les mises en page en tableaux imbriqués, peu accessibles, risquent fortement d'être proscrites sur les sites des services publics et des collectivités territoriales, selon ce qui est prévu par la loi sur l'égalité des chances.
Sujet clos
Aller à