Mauvaise mise en page avec <Doctype> [Fermé]

Signaler
Messages postés
5
Date d'inscription
jeudi 20 août 2009
Statut
Membre
Dernière intervention
20 août 2009
-
Messages postés
5
Date d'inscription
jeudi 20 août 2009
Statut
Membre
Dernière intervention
20 août 2009
-
Bonjour,

J'ai commencé la réalisation d'un site pour un ami, et il veux que le pied de page du site suive le bord bas de la fenêtre, c'est à dire que si j'agrandis la fenêtre au-delà de la taille du site, le corps du site prend la hauteur de la fenêtre. J'ai réussi à faire cela, ça fonctionne bien sur Firefox, sur IE et sur Chrome. Le problème est que pour que ca fonctionne je dois désactiver la balise <DOCTYPE> et ça m'embête car du coup mon site n'est plus valide au W3C.

L'adresse du site en question est g.monard.free.fr

Quelqu'un a une idée ?

10 réponses

Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
C'est normal,

l'utilisation des table pour faire le design du site est INTERDIT en xhtml.

Donc soit il faut refaire le site en xhtml/css avec des div et sans table, soit il faut mettre un doctype plus vieux, genre... html4.0 XD

En xHTML, les tableaux ne doivent être utilisés que pour des données liées entre elles par les lignes et les colonnes.
De plus, aussi en xHTML, la propriété height:100%; est inopérante.
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 85385 internautes nous ont dit merci ce mois-ci

Messages postés
1002
Date d'inscription
vendredi 7 août 2009
Statut
Membre
Dernière intervention
21 mars 2010
187
A partir du moment ou c'est le doctype qui gène, c'est qu'il faut revoir ton CSS points par points.

Je te conseille donc de retirer ta feuille de style, d'en faire une copie de sauvegarde, et de copier les éléments un par un pour voir là ou ça foire... parce que la solution de retirer le doctype n'en est pas une !

Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
Si tu dois enlever le doctype pour que ça marche, c'est que tu ne t'y prends pas de la bonne manière.

Qu'utilises-tu pour faire ton pied de page?

Quel doctype utilises-tu également? Peut-être qu'en en mettant un autre ça marcherait.

Note: Quand on enlève le doctype, on laisse le soin au navigateur de choisir le doctype qu'il veut pour la page. C'est du free for all et ça s'appelle le quirks mode.
Utilises-tu un tableau pour la mise en forme de ta page?

Si oui tu met la propriété width=100 % non ?
Messages postés
5
Date d'inscription
jeudi 20 août 2009
Statut
Membre
Dernière intervention
20 août 2009

Merci de vos réponses rapides, oui j'utilise des tableaux pour ma mise en page avec "height: 100%", car c'est la hauteur qui doit prendre toute la page, pas la largeur.
Sinon ca vient pas de mon css car même sans css, en mettant juste un height=100% sur mon <body> et mon <table> ca marche sans le <doctype> mais pas avec.
Le <doctype> que j'utilise est le suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Messages postés
5
Date d'inscription
jeudi 20 août 2009
Statut
Membre
Dernière intervention
20 août 2009

OK je vais voir pour corriger ça en utilisant des <div> et non des <table>.
Dommage j'ai plus qu'à tout recommencer lol.
En tout cas merci pour cette info M@dien.
Messages postés
5
Date d'inscription
jeudi 20 août 2009
Statut
Membre
Dernière intervention
20 août 2009

Bon alors j'ai testé avec une page toute simple, avec des <div> et pas de <table> et le résultat est le même:
- si je mets le <DOCTYPE> en commentaire j'ai la mise en page souhaitée
- si je réactive le <DOCTYPE> ma page ne fait plus la hauteur de la fenetre

voici le code de ma page de test, essayez et dites moi :

<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head><title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body style="background-color: #dddddd; text-align: center">
<div style="width: 760px; margin: auto; background-color: #ffffff; text-align: center; height: 100%">
test
</div>
</body>
</html>
Messages postés
1579
Date d'inscription
mercredi 3 octobre 2007
Statut
Membre
Dernière intervention
23 mars 2020
329
Bonjour,
j'ai exactement la même chose avec ou sans doctype sur cette page. Qu'est-ce qui change pour toi?
Cdt,
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
Toujours normal. comme je l'ai dit plus haut, en xhtml la propriété height:100%; est inopérante.
C'est d'ailleurs la plus grosse difficulté du xhtml je trouve =)

Il faut savoir que la philosophie des div est différente de celle des tableaux.
Ainsi, en xHTML, il est quasiment impossible de placer un pied de page qui puisse se placer en bas de page ET en bas de navigateur.

La question que je vais donc poser est : pourquoi faut-il absolument que le pied de page soit en bas de fenêtre?
Les grosses résolutions de certains vont faire que le pied de page sera totalement détaché du reste du contenu.

De plus, quelle importance accordes-tu au pied de page? s'il est très important j'ai une astuce pour toi: le laisser apparaître en bas de page tout le temps:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<title>titre</title>
		<style type="text/css">
			body{
				margin:0px;
				padding:0px;}
			div#contenu {
				margin:5px 5px 25px 5px;
				background:lightgrey;}
			div#footer {
				margin:0px;
				position:fixed;
				bottom:0px;
				width:100%;
				height:20px;
				background:grey;}
			p {
				margin:0px;}
		</style>
	</head>

	<body >
		<div id="contenu">
			<p>contenu
				<br/><br/><br/><br/><br/><br/><br/><br/>
				<br/><br/><br/><br/><br/><br/><br/>bla
				<br/><br/><br/><br/><br/><br/><br/><br/>
				<br/><br/><br/><br/><br/><br/><br/>bla
				<br/><br/><br/><br/><br/><br/><br/><br/>
				<br/><br/><br/><br/><br/><br/><br/>bla
			</p>
		</div>
		<div id="footer">
			pied de page
		</div>
	</body> 
</html>


Mais sache qu'à l'aire du xhtml, les pied de pages dissociés du contenu se fait de moins en moins, au profit d'un design unifié.
Messages postés
5
Date d'inscription
jeudi 20 août 2009
Statut
Membre
Dernière intervention
20 août 2009

En fait je suis d'accord avec toi M@dien, c'est juste que la personne qui m'a demandé de lui faire un site à vu ca sur un site et qu'il à trouvé ca bien, alors du coups j'ai repris la façon de faire de ce site en gérant tout avec des tables mais c'est vrai que ce n'est pas la bonne solution, de plus ce site n'a pas de balise <DOCTYPE>, c'est pour cela que le height="100%" fonctionne.
Donc finalement je vais refaire le site avec des <div> et une hauteur définie, et je mettrai un overflow="auto" au niveau du corps, et je lui expliquerai que ce n'est pas correct de faire comme le modèle qu'il m'a présenté.