Discussion :

[cesar33]

Bonjour,
J'ai un petit problème avec mon css, ce que je souhaite c'est d'avoir, une en-tête d'une hauteur de 98px, d'un pied de page d'une hauteur de 30px et entre l'en-tête et le pied de page le contenu qui prend le reste avec un scroll si besoin. Mon css suivant fonction aléatoirement avec diffèrent navigateur . la plupart du temps j'ai le contenu qui passe sous le pied de page et je perds le scroll

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
BODY {
	MARGIN: 0px; 
	OVERFLOW: hidden;
}
 
 
#bandeau {
	POSITION: absolute; 
	WIDTH:100%; 
	FLOAT: right; 
	HEIGHT: 98px; 
	TOP: 0px
}
#contenu {
	POSITION: absolute; 
	TEXT-ALIGN: center; 
	MIN-HEIGHT: auto; 
	WIDTH: 100%; BOTTOM: 16px; 
	BACKGROUND: url(../images/fond.png); 
	HEIGHT: auto !important; 
	OVERFLOW: scroll; 
	TOP: 98px;
}
#pied_page {
	BACKGROUND-IMAGE: url(skin/images/bhdorange.png); 
	POSITION: absolute; 
	WIDTH: 100%; 
	BOTTOM: 0px; 
	HEIGHT: 30px
}

Merci d'avance pour votre aide,

Cordialement,
Mathieu

[ornitho13]

Salut,

il te manque quelques propriétés dans le "#contenu".

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
#contenu {
	position: absolute; 
	text-align: center; 
	min-height: auto; 
	width: 100%; bottom: 16px; 
	background:#333 url(../images/fond.png); 
	height: auto !important; 
	overflow-y: scroll;
	overflow-x:hidden; 
	top: 98px;
	bottom:30px;
}

j'ai testé sous FF, Chrome, Safari, Opera et IE7, 8 et 9