Positionner correctement mes div [Résolu]

YuGiOhJCJ · 24/09/2011, 16h18

Bonjour,

je souhaite disposer de 5 divisions sur une page web :

logo (en haut à gauche)
publicité (en haut à droite)
menu (à gauche)
contenu (à droite)
copyright (en bas)

J'utilise ce fichier 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
 
<!DOCTYPE html>
<html>
	<head>
		<title>Page exemple</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="index.css" type="text/css">
	</head>
	<body>
		<div class="logo">Mon logo</div>
		<div class="pub">Ma publicité</div>
		<div class="menu">Mon menu</div>
		<div class="contenu">
			Mon contenu
		</div>
		<div class="copyright">Mon copyright</div>
	</body>
</html>

J'utilise ce fichier 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
div.logo
{
	position: absolute;
	left: 0%;
	right: 80%;
	top: 0%;
	bottom: 80%;
	width: 20%;
	height: 20%;
	background-color: red;
}
div.pub
{
	position: absolute;
	left: 20%;
	right: 0%;
	top: 0%;
	bottom: 80%;
	width: 80%;
	height: 20%;
	background-color: green;
}
div.menu
{
	position: absolute;
	left: 0%;
	right: 80%;
	top: 20%;
	bottom: 10%;
	width: 20%;
	height: 70%;
	background-color: blue;
}
div.contenu
{
	position: absolute;
	left: 20%;
	right: 0%;
	top: 20%;
	bottom: 10%;
	width: 80%;
	height: 70%;
	background-color: orange;
}
div.copyright
{
	position: absolute;
	left: 0%;
	right: 0%;
	top: 90%;
	bottom: 0%;
	width: 100%;
	height: 10%;
	background-color: purple;
}

Tout va pour le mieux tant que le contenu de la division "contenu" n'est pas important (ou que l'on dispose d'une haute résolution graphique) :

Mais dès que ce contenu devient important (ou que l'on dispose d'une résolution graphique faible) il y a un problème :

Je souhaiterai que les zones "menu" et "contenu" puissent s'agrandir en fonction du contenu. La zone "copyright", quant à elle, doit descendre pour se retrouver plus bas.

Je n'y parviens pas. Je pense que l'idée c'est de ne plus préciser une hauteur fixe pour les zones "menu" et "contenu", et de ne pas forcer la zone "copyright" à être à 0% du bottom. J'ai essayé avec position : relative, absolute et fixed. J'ai aussi essayé display : block et inline. Bref... Je réclame votre aide.

Merci beaucoup.

jreaux62 · 24/09/2011, 16h51

Bonjour,
Tout est là -> Div et CSS : une mise en page rapide et facile

YuGiOhJCJ · 24/09/2011, 20h34

Merci pour le lien.

Grâce à cette page j'ai réussi à corriger le problème ci-dessus. J'utilise "float" et "clear" que je ne connais pas.

Mais de nouveaux problèmes apparaissent :

1. les hauteurs ne sont pas respectées (elles sont de taille minimales et s'adaptent au contenu) :

2. lorsque je rétrécie la fenêtre la position des divisions change :

Voici le nouveau 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
 
<!DOCTYPE html>
<html>
	<head>
		<title>Page exemple</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="index.css" type="text/css">
	</head>
	<body>
		<div class="logo">Mon logo</div>
		<div class="pub">Ma publicité</div>
		<div class="menu">Mon menu</div>
		<div class="contenu">Mon contenu</div>
		<div class="copyright">Mon copyright</div>
	</body>
</html>

Et mon nouveau code 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
 
div.logo
{
	float: left;
	width: 20%;
	height: 20%;
	background-color: red;
}
div.pub
{
	float: left;
	width: 80%;
	height: 20%;
	background-color: green;
}
div.menu
{
	float: left;
	width: 20%;
	height: 70%;
	background-color: blue;
}
div.contenu
{
	float: left;
	width: 80%;
	height: 70%;
	background-color: orange;
}
div.copyright
{
	clear: both;
	width: 100%;
	height: 10%;
	background-color: purple;
}

Du coup un problème résolu mais deux problèmes ajoutés... Je ne suis pas gagnant sur ce coup.

Est-ce que vous avez des autres idées svp?

jreaux62 · 24/09/2011, 21h42

Ajouter :

Code :

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

html, body { width:100%; height:100%; margin:0; padding:0; }

+ remplacer div. par #
+ remplacer class par id
(les id sont des identifiants uniques, alors que class peut s'appliquer à plusieurs éléments)

+ remplacer height:... par min-height:...
+ sur #contenu : overflow:auto; (scroll automatique sur le contenu)

YuGiOhJCJ · 25/09/2011, 09h30

Excellent!
Ce qui me manquait c'était :
-définir la taille des éléments "html" et "body" pour corriger le problème n°1
-définir la propriété "overflow: auto" sinon, j'avais à nouveau mon problème du début

En fait, je mets overflow: auto sur toutes mes divisions, ainsi je suis certain que si le contenu de ces divisions dépasse leur taille, l'utilisateur pourra utiliser l’ascenseur et rien ne lui sera caché.

De plus, ces changements semblent avoir résolu aussi mon problème n°2.

Enfin, un problème que je n'avais pas remarqué c'était les marges qui étaient apparues autour de la page web. C'est corrigé grâce à "padding" et "marging" positionnés à 0%.

Alors un grand merci à toi jreaux62. RÉSOLU! J'appuie sur le bouton.

Après, remplacer "height" par "min-height" ne m'a pas servit.
Aussi, utiliser des "class" (au lieu de "id" uniques) ne me pose pas de problème particulier. Si les "id" sont uniques tant mieux pour eux mais je ne vois pas de raison de les préférer aux "class".

Voici le nouveau code CSS (le HTML reste identique) :

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
html, body
{
	width: 100%;
	height: 100%;
	padding: 0%;
	margin: 0%;
}
div.logo
{
	float: left;
	width: 20%;
	height: 20%;
	background-color: red;
	overflow: auto;
}
div.pub
{
	float: left;
	width: 80%;
	height: 20%;
	background-color: green;
	overflow: auto;
}
div.menu
{
	float: left;
	width: 20%;
	height: 70%;
	background-color: blue;
	overflow: auto;
}
div.contenu
{
	float: left;
	width: 80%;
	height: 70%;
	background-color: orange;
	overflow: auto;
}
div.copyright
{
	clear: both;
	width: 100%;
	height: 10%;
	background-color: purple;
	overflow: auto;
}

24/09/2011, 16h51	#2
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 993 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 993 Points : 5 786 Points : 5 786	Bonjour, Tout est là -> Div et CSS : une mise en page rapide et facile __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

24/09/2011, 21h42	#4
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 993 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 993 Points : 5 786 Points : 5 786	Ajouter : Code : Sélectionner tout - Visualiser dans une fenêtre à part html, body { width:100%; height:100%; margin:0; padding:0; } + remplacer div. par # + remplacer class par id (les id sont des identifiants uniques, alors que class peut s'appliquer à plusieurs éléments) + remplacer height:... par min-height:... + sur #contenu : overflow:auto; (scroll automatique sur le contenu) __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email