Sujet Précédent Sujet Suivant

Mauvaise mise en page avec <Doctype>

Fermé
guigui_1983 Messages postés 5 Date d'inscription jeudi 20 août 2009 Statut Membre Dernière intervention 20 août 2009 - 20 août 2009 à 09:14
guigui_1983 Messages postés 5 Date d'inscription jeudi 20 août 2009 Statut Membre Dernière intervention 20 août 2009 - 20 août 2009 à 12:03
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 ?
A voir également:

10 réponses

Réponse 1 / 10
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
20 août 2009 à 09:35
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
Réponse 2 / 10
Utilisateur anonyme
20 août 2009 à 09:18
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 !

0
Réponse 3 / 10
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
20 août 2009 à 09:19
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.
0
Réponse 4 / 10
kiome
20 août 2009 à 09:19
Utilises-tu un tableau pour la mise en forme de ta page?

Si oui tu met la propriété width=100 % non ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 10
guigui_1983 Messages postés 5 Date d'inscription jeudi 20 août 2009 Statut Membre Dernière intervention 20 août 2009
20 août 2009 à 09:28
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">
0
Réponse 6 / 10
guigui_1983 Messages postés 5 Date d'inscription jeudi 20 août 2009 Statut Membre Dernière intervention 20 août 2009
20 août 2009 à 09:44
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.
0
Réponse 7 / 10
guigui_1983 Messages postés 5 Date d'inscription jeudi 20 août 2009 Statut Membre Dernière intervention 20 août 2009
20 août 2009 à 10:21
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>
0
Réponse 8 / 10
Archeus01 Messages postés 1567 Date d'inscription mercredi 3 octobre 2007 Statut Membre Dernière intervention 9 juin 2022 447
20 août 2009 à 10:44
Bonjour,
j'ai exactement la même chose avec ou sans doctype sur cette page. Qu'est-ce qui change pour toi?
Cdt,
0
Réponse 9 / 10
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
20 août 2009 à 10:52
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é.
0
Réponse 10 / 10
guigui_1983 Messages postés 5 Date d'inscription jeudi 20 août 2009 Statut Membre Dernière intervention 20 août 2009
20 août 2009 à 12:03
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é.
0

Discussions similaires

[PIX] Commencer chaque poème sur une nouvelle page
ETHAN -
Willzac -

19 réponses