[CSS][xHTML] Mise en page

**chillansky** · 11/06/2006, 13h49

Bonjour,

J'essaie de gérer mon futur site avec css/xhtml.
Le problème c'est que mon footer se positione en fonction de la balise "centre" et pas celle du menu de gauche (gauche). Ce qui fait j'ai du texte du pied de page dans mon menu.

En gros c'est pour avoir qqch comme: un header, un menu à gauche et le contenu a coté, et un footer.

Voici mon 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
32
33
34
35
36
37
38
39
40
/*
Outremondes
*/
 
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	margin: 0;
	padding: 0;
	background-color:black;
	color: #FFFF99;
}
 
#content {
	position: absolute;
}
 
#header {
	height: 130px;
}
 
#footer {
	clear:both
}
 
#gauche {
	position: absolute;
	left:0;
	width: 150px;
}
 
.menugauche {
	list-style-type: none;
	margin: 0;
	padding:0;
}
 
#centre {
	margin-left: 150px;
}

Et ma feuille xhtml pour terminer:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<!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>
	<title>Outremondes</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" type="text/css" href="include/OMfixe.css" media="screen" />
</head>
<body>
 
<div id="content">
	<div id="header">
 
		<img src="img/banniere.png" alt="Banniere Outremondes" />
		<br/>
	</div>
	<p>
		<a href="#"><img src="img/b_contactez_nous_off.png" alt="Contactez-nous" /></a>
		<a href="#"><img src="img/b_crieurs_publics_off.png" alt="Crieurs public" /></a>
		<a href="#"><img src="img/b_salle_des_etats_off.png" alt="Salles des etats" /></a>
		<a href="#"><img src="img/b_forum_off.png" alt="Forum" /></a>
		<a href="#"><img src="img/b_infos_serveur_off.png" alt="Infos serveur" /></a>
 
		<a href="#"><img src="img/b_telechargez_jeu_off.png" alt="Telecharger le jeu" /></a>
	</p>
	<div>
<div id="gauche">
	<ul class="menugauche">
		<li>
			Menu 1
			<ol>
				<li>numero1</li>
 
				<li>numero2</li>
				<li>numero3</li>
			</ol>
		</li>
		<li>Menu 2</li>
		<li>Menu 3</li>
		<li>Menu 4</li>
 
	</ul>
</div>
<div id="centre">
	<h1>WELCOME</h1>
	Hello World
	<br/>proutprout
</div>
</div>
	<div id="footer">
		JE SUIS UN PIED DE PAGE
	</div>
 
</div>
</body>
</html>

Voila, si qqun a une idée ou qqch à me proposer je suis toute ouïe

J'aimerais que le footer se décale vers le bas en fonction du centre et du menu gauche.

Merci!

**<romain/>** · 11/06/2006, 14h30

c'est normal ton menu de gauche est positionner en absloute.

Code :

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

1
2
3
4
5
 
#header{float:left;}
#gauche{clear:both; float:left;}
#centre{float:left;}
#footer{clear:both; float:left;}

Avec ca tu auras ce que tu voudras au niveau du placement a toi de rajouter ce qu'il te manque ensuite

**chillansky** · 11/06/2006, 15h05

Bon après les correction citée précedement, j'ai simplifier tout ça:

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
32
33
34
35
/*
Outremondes
*/
 
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	margin: 0;
	padding: 0;
	background-color:black;
	color: #FFFF99;
}
 
#header {
	float:left;
}
 
#gauche {
	clear:both; 
	float:left;
}
 
#centre {
	margin-left: 150px;
	float:left;
}
 
#footer {
	clear :both
	float:left;
}
 
.menugauche {
	list-style-type: none;
}

Et

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!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>
	<title>Outremondes</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" type="text/css" href="include/OMfixe.css" media="screen" />
</head>
<body>
	<div id="header">
		<img src="img/banniere.png" alt="Banniere Outremondes" />
 
		<br/>
			<p>
		<a href="#"><img src="img/b_contactez_nous_off.png" alt="Contactez-nous" /></a>
		<a href="#"><img src="img/b_crieurs_publics_off.png" alt="Crieurs public" /></a>
		<a href="#"><img src="img/b_salle_des_etats_off.png" alt="Salles des etats" /></a>
		<a href="#"><img src="img/b_forum_off.png" alt="Forum" /></a>
		<a href="#"><img src="img/b_infos_serveur_off.png" alt="Infos serveur" /></a>
		<a href="#"><img src="img/b_telechargez_jeu_off.png" alt="Telecharger le jeu" /></a>
	</p>
 
	</div>
	<div id="gauche">
	<ul class="menugauche">
		<li>
			Menu 1
			<ol>
				<li>numero1</li>
				<li>numero2</li>
 
				<li>numero3</li>
			</ol>
		</li>
		<li>Menu 2</li>
		<li>Menu 3</li>
		<li>Menu 4</li>
	</ul>
 
</div>
<div id="centre">
	<h1>WELCOME</h1>
	Hello World
	<br/>proutprout
</div>
	<div id="footer">
		JE SUIS UN PIED DE PAGE
	</div>
</body>
</html>

MAIS maintenant le footer se met complètement à en haut droite (a coté du header en fait) ce qui ne m'arrange évidement pas de tout :=)

C'est pour obtenir qqch de pareil:

|--------------------------------------------------------|
| H E A D E R |
|--------------------------------------------------------|
|............|.................................................................|
|gauche...|............................ centre............................|
|............|.................................................................|
|............|.................................................................|
|--------------------------------------------------------|
|...................F O O T E R............................................|
|--------------------------------------------------------|

Et que la taille de gauche (menu) et le centre s'adaptent l'un par rapport à l'autre. Et le footer en bas.
A noter que j'aimerais éviter fixer la taille de tout ça.

**<romain/>** · 11/06/2006, 16h44

en haut a droite????

la virgule apres le both peut-être...

je testerais plus en detail ce soir si ce n'est pas ca..

**chillansky** · 11/06/2006, 16h51

Bien vu pour la virgule ! Le footer est bien placé désormais.

Mais (encore un mais)

**<romain/>** · 11/06/2006, 17h01

oui il a pas la place pour se mettre tu lui dis de se placer a gauche et en plus d'avoir une marge!!!

Vire la marge ca devrait fonctionner

edit : dsl pour les espaces, je crois que j'ai un probleme avec la touche espace de mon clavier, je me relirais la prochaine fois

[CSS][xHTML] Mise en page

CSS

Vue hybride

Discussions similaires

Partager

Partager