Positionnement de blocs

**aemilia26** · 23/12/2008, 17h22

Bonjour !

Je suis en train de créer un site Internet. J'ai divisé ma page en quatre blocs (div) : une en-tête, un menu, un corps de page et enfin le bas de la page. J'ai réussi à tout dimensionner et positionner, sauf le bas de page qui fait de la résistance oO

Voici le CSS du menu pour montrer comment j'ai fait :

Code css :

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

1
2
3
4
5
6
7
8
#menu{
	font-size: 18px;
	color: #992277; 
	background-color: #330066;
->	position: absolute; top: 150px;
->	max-width: 200px;
	padding: 6px;
	}

Par contre pour le pied de page :

Code css :

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

1
2
3
4
#footer{
	text-align: center;
	position: absolute; top: 500px;
	}

Je suis consciente que ça tient assez de la bidouille mais je n'ai pas trouvé de manières plus propres de le faire ... Et bref, pour une raison que j'ignore, le bas de page ne se met pas au milieu ... J'ai pensé que le "absolute" devait gêner mais je ne vois pas comment faire autrement =/

Merci d'avance !

**Macmillenium** · 23/12/2008, 17h48

Bonjour,

Envoyé par aemilia26

J'ai pensé que le "absolute" devait gêner mais je ne vois pas comment faire autrement =/

Sa dépend aussi comment tu as positionné les autres éléments de ta page !
Avec un peu de chance tu peut tenter un bottom:0 sur ton footer ...
Sinon merci de poster tes codes html et css en entier pour tester

**aemilia26** · 23/12/2008, 17h59

Urf ok ... C'est vous qui l'avez demandé hein

Zou ... Le code html :

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
<html>
	<head>
		<link rel=stylesheet type="text/css" href="style_page_principale.css"/>
	</head>
 
	<body bgcolor=#333399 >
		<div id="header"> <!--en tête-->Logo (avec texte) </div>
 
		<div id="menu"> <!--menu-->
			Login :<br />
			<input type="text" name="Login" /><br />
			Mot de passe :<br />
			<input type="password" name="MdP" /><br />
			<input type="submit" value="Connexion" /><br />
			<small><small><a class="type2" href="formulaire.html" title="Inscription"><i> S'inscrire</i></a></small></small>
			<small><small><a class="type2" href="" " title="Recup"><i>Mot de passe oublié ?</i></a></small></small><br /><br />
			<u>Liste des cours :</u><br />
			<ul>
				<li><a class="type1" href="" title="Java" color="#992277">Java</a></li><br />
				<li><a class="type1" href="" title="C#">C#</a></li><br />
				<li><a class="type1" href="" title="XHTML">XHTML</a></li><br />
				<li><a class="type1" href="" title="JS">JavaScript</a></li><br />
				<li><a class="type1"href="" title="XML">XML</li></a><br />
			</ul>
		</div>
 
		<div id="corps"> <!--corps de la page-->L'entreprise eTech a été fondée en 2000. Elle s'est spécialisée dans la vente en ligne de cours électroniques à des prix défiant toute concurrence.<br />
		Pour avoir accès à ces cours, inscrivez-vous puis passez commande et blabla.
		</div>
 
		<div id="footer"> <!--bas de page-->blaaaaaaaaaaaaaaa4 </div>
		<!--Placer lien vers partie admin, contacts etc ...-->
	</body>
 
</html>

Et le code CSS :

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
 
	#header{
	font-size: 40px;
	text-align: center;
	font-family: "Comic Sans MS";
	color: #990066;
	background-color: #333399;
	}
 
	#menu{
	font-size: 18px;
	color: #992277;
	background-color: #330066;
	position: absolute; top: 150px;
	max-width: 200px;
	padding: 6px;
	}
 
	#corps{
	text-align: center;
	text-indent: 18px;
	font-family: "Times new roman";
	background-color: #660077;
	font-size: 20px;
	position: absolute; top: 150px; left: 196px;
	padding: 6px;
	}
 
	#footer{
	text-align: center;
	position: absolute; top: 700px;
	}
 
	a.type1 { color: #992277; text-decoration:none }
	a.type1:hover { color:red }
 
	a.type2 { color: #992277; text-decoration:underline }
	a.type1:hover { color:red }

Le site est encore incomplet bien sûr mais si vous voyez des petites choses susceptibles d'énerver un webmaster, vous pouvez me le signaler bien sûr, bien que ce ne soit pas le but de ce topic

Je précise aussi que les couleurs ne vont pas rester telles quelles, je vais faire des dégradés ^^ Histoire de ne détruire les yeux des internautes ...

**12monkeys** · 23/12/2008, 20h10

Bonsoir

Je commencerais à dire d'utiliser un DOCTYPE valide, pourquoi et lequel.

Dans cette partie de code :

Code :

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

<a class="type2" href="" " title="Recup">

il y a une petite erreur, tu as un guillemet en trop... Dans ce même code doubler les éléments <small> ne me parait pas être une bonne idée, gère alors plutôt la taille de la police en css...

Pour ton problème de positionnement la première chose qui manque c'est de nous indiquer ce que tu veux faire exactement par une petite esquisse...

Le positionnement en absolute ne me parait pas non plus être une bonne idée ici... Si tu veux centrer ton site, utilises plutôt un bloc conteneur avec des marges auto. Bref un bon tutoriel vaut mieux qu'un long discour, regarde celui ci : http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/ et plus généralement la rubrique css pour les bonnes pratiques...

Bonne lecture

**aemilia26** · 24/12/2008, 09h54

En très gros, je voulais cette structure :

En-tête
Menu || Corps
Pied de page

Merci pour tes tutos, mon problème est réglé

J'en avais cherché pourtant ...

**Macmillenium** · 24/12/2008, 11h09

Bonjour,

Essai ce code, position floattante (c'est ce qui est courant et facile à maintenir d'ailleur) au lieu d'absolute (qui est a consommé avec modération).

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
 
body {
background:##333399;
}
 
#header{
font-size: 40px;
text-align: center;
font-family: "Comic Sans MS";
color: #990066;
background: #333399;
margin-bottom:50px;
}
 
#menu{
font-size: 18px;
color: #992277;
background: #330066;
max-width: 200px;
padding: 6px;
float:left;
}
 
#corps{
text-align: center;
text-indent: 18px;
font-family: "Times new roman";
background: #660077;
font-size: 20px;
float:left;
padding: 6px;
}
 
#footer{
text-align: center;
clear:both;
}
 
a.type1 { color: #992277; text-decoration:none }
a.type1:hover { color:red }
 
a.type2 { color: #992277; text-decoration:underline }
a.type1:hover { color:red }

Attention à la DTD et à ton code html qui contient plusieurs erreurs !