Discussion :

[philippef]

Bonjour

Ben oui j'ai cliqué sur créer au lieu de prévisualiser
Comme je disais j'ai créer un site http://fonphil.club.fr/index.php qui fonctionne mais j'ai un problème avec les div.
En fonction de la résolution des écrans, le div contenu glisse sous le div menu.

Donc j'essaie de refaire ma page index et voila mon code css puisque ce sont les div qui posent problème

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
<style type="text/css">
<!--
body {
	postion: relative;
	padding:0;
	margin:0;
	font-size : 12px;
	color: black;
	background-color: red;
	font-family: tahoma;
}
/*mise en forme bandeau haut*/
div#bandeau {
	width: 1000px;
	margin-left: 10%;
	background-color: white;
}
/*mise en forme menu gauche*/
div#menu {
	float: left;
	margin-left: 10%;
	width: 153px;
	height: 370px;
	background-color: yellow;
}
/*mise en forme du contenu*/
div#contenu {
	width: 847px;
	margin-left: 22.2%;
	margin-top: 0px;
	height: 300px;
	background-color: green;
	font-size: 12px;
}
/*mise en forme du pied de page*/
div#piedpage {
	margin-left: 22.2%;
	width: 847px;
	height:auto;
	background-color: gray;
	text-align: center;
	font-size: 11px;
}

Ca marche un peu mieux mais si je prends les poignées et que rétréssis la largeur de l'écran mon div contenu et pied de page se retrouve non pas sous le div menu mais après.
Les couleurs c'est seulement pour voir comment ça se passe
Voilà j'espère que c'est clair et vous pourrez m'aider à résoudre mon problème.

Merci d'avance

[trotters213]

Déjà tu peux remplacer ton code par celui-ci (il résoud presque ton problème) :

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
* {
padding:0;
margin:0;
}
 
body {
font-size:100%;
color:#000;
width:100%;
margin:0 auto;
background-color:#F5F5DC;
font-family:tahoma;
}
 
/*mise en forme des div*/
#bandeau {
background-color:#F5F5DC;
}
 
#contenu {
float:right;
width:80%;
background-color:#fff;
font-size: 12px;
}
 
#menu {
float:left;
width:15%;
background-color: #fff;
}
 
#piedpage {
clear:both;
width:67.7%;
margin:0 auto;
background-color:#F5F5DC;
text-align:center;
font-size:11px;
}

Et supprime ceci :

Code :

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

1
2
3
4
5
#menu {
position: relative;
width: 10.05px;
font-family:"Tahoma";
}

(tu redéfinis le style de ton menu après l'avoir défini une première fois donc ça peut pas fonctionner.

Le souci c'est que tu utilise l'id menu 2 fois or un id est unique (tu l'utilise sur un div et sur un dl. Supprime un des 2 menus et joue ensuite sur la largeur de ton menu et tu n'auras plus de problème je pense (hormis le fait que tu utilises des images pour ton menu donc on ne voit pas les bordures si tu rétrécis la résolution).

[philippef]

Merci pour la réponse.

Peut-être une dernière question : J'ai des pages qui n'occupent pas toute la hauteur de l'écran donc je voudrais mettre quelque chose comme height-min : xx%;
est ce que c'est possible?

[trotters213]

height-min n'existe pas mais min-height oui par contre
Pense que min-height n'est pas reconnu par IE donc il faut que tu utilises des hacks.