[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

**chillansky** · 11/06/2006, 21h59

Pour résoudre le problème j'ai fixer la taille dans le body(css) à la taille que je voulais et tout c'est arranger.

Maintenant j'aimerais savoir comment faire pour mettre des bordure imagée pour le menu de gauche.

Pour vous donner une idée, c'est faire passer ce site: http://www.outremondes.com/web_beta/outremondes.php
aux CSS (la version que je suis en train de développer est www.outremondes.com/dvlp )

Et comme ces plein de tableau dans l'ancienne version, je ne sais pas comment faire pour garder le même style.

**psychoBob** · 12/06/2006, 02h48

J'ai pas suivi la discussion mais pour la dernière question, je dirais background-image (chemin); background-position: du coté de la bordure.

Si je vise à coté soyons indulgent je vais dormir là.

ouiil a pas la placepourse

J'ai relu ci5unq fois pour comprendre

**chillansky** · 12/06/2006, 09h19

Bah ça marche maintenant.

Pour le background-image j'explique:
mon cadre est composé d'un fond (logique), un d'une bordure haut gauche bas droite (à chaque fois une image séparée

)
Je cherche donc à obtenir la même chose que sur l'ancien site. A la limite je pourrais creer une nouvelle image (pour le background) avec les bordure incorporée.
Mais comment je fais pour le haut et le bas ?
(mais je vais faire des recherches du coté du "border-image" que j'ai trouvé sur le site du w3)

[CSS][xHTML] Mise en page

CSS

Discussions similaires

Partager

Partager