Positionnement div xhtml strict 1.0

**climzerland** · 04/02/2007, 23h45

Bonjour a tous,

j'ai un petit probleme, j'aimerai placer mon footer au pied de ma page et que le contenu1 et contenu2 prenne le reste de la hauteur de ma page..

merci de votre aide.....

voici le code :

Code css :

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
47
48
49
html, body {
	height: 100%;
	margin: 0;
}
div#global {
	position: relative;
	width: 750px;
	height:100%;
	margin: auto;
	background-color:#3399FF;
}
div#header {
	position: relative;
	width: 750px;
	height: 150px;
	background-color:#339933;
}
div#menu {
	position: relative;
	float:left;
	height:80px;
	width: 750px;
	background-color: #ffff00;
}
div#corps {
	position: relative;
	float:left;
	height:auto;
	width: 750px;
  	background-color:#FF6633;
}
div#contenu1 {
	height:100%;
	float: left;
	width: 530px;
	background-color:#996600;
	}
div#contenu2 {
	float: right;
	width: 200px;
	background-color:#99FF33;
	}
div#footer {
	float:left;
	width: 750px;
	height: 30px;
	bottom:0px;
	background-color:#339933;
}

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
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XHTML strict 1.0 positionnement</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
	<div id="global">
		<div id="header">HEADER</div>
		<div id="menu">MENU</div>
		<div id="corps">
			<div id="contenu1">CONTENU 1</div>
			<div id="contenu2">CONTENU 2</div>
		</div>
		<div id="footer">FOOTER</div>
	</div>
</body>
</html>

**spidermang** · 05/02/2007, 00h09

Tu peux t'en sortir en utilisant du script:

body.scrollHeight - 30px (taille de ton footer)

**climzerland** · 05/02/2007, 13h23

peux tu me faire une micro-demo...parce que la je vois pas.
merci

**Emcy** · 05/02/2007, 15h26

c'est pas ça que tu voudrais faire ?
http://cjoint.com/?cfpybYWn1X

le footer se colle à la fin du corps

si tu veux que ta page fasse obligatoirement 100%, il me semble qu'il n'y a qu'une solution (sans utiliser de javascript) : mettre tout tes height en %

ex :
header = 10%
corps = 80%
footer = 10%

**climzerland** · 05/02/2007, 16h10

petit prob aussi car si je met mon header a 10% mon corps a 80% et mon footer a 10%, je ne peu plus donner une hauter fix a mon header(pour mettre une image par exemple)... en gros je veux juste que le corps qui enveloppe le conteur est une hauteur de 100% mais le prob c'est qu'il prend comme base la hauteur de ma page complete ( header+menu+contenu+footer)du coup ma page est beaucoup trop grande.
j'ai pensé a utiliser table-row et table-cell pour simuler un tableau mais le probleme c que ca marche pas sous IE....

Reprennons le prob depuis le debut....j'ai simplifié le tout.
alors, j'ai ca...(le tout en xhtml stict 1.0)

Code html :

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

1
2
3
4
5
6
7
8
<body>
	<div id="global">
		<div id="header">HEADER</div>
		<div id="menu">MENU</div>
		<div id="corps">CORPS</div>
		<div id="footer">FOOTER</div>
	</div>
</body>

Global : en bleu
Header : en rouge
Menu : en jaune
Corps : en orange
footer : en vert

et je veux que mon CORPS (orange) s'étire pour remplir ma page.

voici le CSS :

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
html, body {
	height: 100%;
	margin: 0;
}
 
#global {
	width: 750px;
	margin: auto;
	height:100%;
	background-color:#3399FF;
}
#header {
	width: 750px;
	height: 150px;
	background-color:#CC0000;
}
 
#menu {
	height:80px;
	width: 750px;
	background-color: #ffff00;
}
#corps {
	width: 750px;
  	background-color:#FF6633;
}
#footer {
	width: 750px;
	height: 30px;
	background-color:#339933;
}

si quelqu'un trouve la solution pour que ca marche sous ie et firefox...le tout au norme xhtml stric 1.0 c'est vraiment magique...

merci de votre aide

**Emcy** · 05/02/2007, 16h28

c'est bizarre de faire une page en fonction de la taille de l'ecran : tu n'auras jamais beaucoup de texte ? ... car si c'est le cas qu'est-ce qui te garantie que tout va rentrer sur un ecran (surtout sur les 15 pouces).

sinon, il te reste le javascript => tu recupères la place disponible dans ton navigateur et tu fixes la hauteur de tes di en fonction.. sachant que si l'utilisateur modifie la taille de la fenetre ou s'il rajoute/enleve des barres d'outils, ou s'il fait apparaitre des onglets, il faudra changer la taille de tes div
(je ne peux pas plus t'aider : je ne suis pas un specialiste de js)

sinon tu peux fixer la taille de tes div et dire que ton site est optimisé pour une résolution données

Positionnement div xhtml strict 1.0

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager