Position du footer

**dhanikenne** · 02/09/2016, 19h57

Bonjour,

J'ai un Body composé d'un Header, d'une Section et d'un Footer,
Le problème est que le footer se positionne juste sous le header au lieu d'être juste sous la section.
Pouvez-vous m'aider svp
Merci

Code html :

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<link rel="stylesheet" href="test.css" />
		<title>Solfège - Académie</title>
	</head>
	<body>
		<div id="bloc_page">
			<header>
				<h1>Solfège Académie</h1>
			</header>
			<section>
				<h1>Les cours de solfège comme à l'académie</h1><br/>
			</section>
			<footer>
				<h1>Liens</h1>
			</footer>
		</div>
	</body>
</html>

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
	*
	{
		margin: 0px;
	}
	/*---------*/
	/* En-tête */
	/*---------*/
	header
	{
		background: green;
	}
	/*--------------*/
	/* Bloc central */
	/*--------------*/
	section
	{
		position: absolute;
		left: 0px;
		right: 0px;
		border: 1px solid black;
		padding: 0px;
		background-color: yellow;
	}
	/*--------------*/
	/* Pied de page */
	/*--------------*/
	footer
	{
		position: absolute;
		width: 100%;
		/*top: 200px;*/
		background: red;
	}

Invité · 03/09/2016, 08h22

Bonjour,

Pourquoi diable mettre en position:absolute; ??

Pas glop.

**miss_socrates** · 24/09/2016, 17h21

Il suffit d'ajouter le code clear:both; pour faire descendre le footer

Code :

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

1
2
3
4
5
6
7
8
footer
	{
		clear:both;
                position: absolute;
		width: 100%;
		/*top: 200px;*/
		background: red;
	}

Position du footer

Positionnement en CSS

Discussions similaires

Partager

Partager