probleme de gestion de hauteur d'un div

**pop_up** · 08/01/2008, 12h54

Bonjour,

je cherche à ce que mon menu droit occupe toute la hauteur de la page. Du coup, étant donné qu'il y a un motif de fond, j'avais mis une image de fond qui se repetait pour donner l'illusion que le div fait toute la hauteur.

Le problème c'est que si l'on passe en résolution 800x600, le menu de droite doit passer en dessous à gauche. La solution de mettre une image de fond ne marche donc plus puisque je me retrouve avec mon image de fond qui se repete à droite et le menu droit logiquement à gauche.

Auriez vous une solution à me proposer et qui fonctionne sous IE et FF ?

merci

**BnA** · 08/01/2008, 15h10

Salut!

Sans code, difficile de voir ce qui pose problème... Un petit effort s'il-vous-plaît! Tous les jours je me répète!

Sinon, une supposition comme ça, vite fait: en jouant avec des tailles en % ou en em, ça ne règlerait-il pas le problème?

Et puis, entre nous, voici le classement des résolutions employées par les visiteurs du site pour lequel je bosse (startup orientée e-learning).

1.
1024x768
48,68 %
2.
1280x800
18,12 %
3.
1280x1024
12,29 %
4.
1440x900
7,38 %
5.
1152x864
3,15 %
6.
800x600
2,97 %
7.
1680x1050
2,04 %
8.
1280x960
1,08 %
9.
1400x1050
1,03 %
10.
1280x768
0,84 %

Comme tu peut le voir, le 800x600 n'est plus utilisé que marginalement. A ta place, je ne m'en préoccuperais pas. Mais encore une fois, tout dépend de tes besoins.

J'attends ton code!

**pop_up** · 08/01/2008, 15h47

désolé de ne pas avoir mis de code mais je ne pensais pas qu'il était utile d'en mettre car je voulai faire appel à vos connaissance et non pas vous faire debugger un code.

Pour ce qui est de la resolution 800x600, j'aimerai ne pas la prendre en compte mais c'est ce qu'on appelle les contraintes clientelle.

Voici un code qui illustre le pb

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Maquette</title>
	<style>
	body {margin: 0px;padding: 0px; font-family:Verdana,Arial, Helvetica, sans-serif;}
img{ border:none}
hr{ margin:5px 0 0 0; padding:0; color:#000000; height:1px; background-color:#000000; border: 0;}
a{ color:#000000;}
 
div#container-wrap{ margin:0px auto 0px auto; text-align:left; max-width:1024px; min-width:800px; background-image:url("image-illusion.gif"); background-position:right; background-repeat:repeat-y;}
div#container{ margin:0px; padding:0px; }
 
 
DIV#conteneur{margin:0; padding:0; }
 
DIV#header {margin:0; padding:0 0 0.5em 0; background-color:#155478;}
 
DIV#menu_gauche{ margin:0; padding:0; width:200px; float:left; clear:both; background-color:#9999CC;}
DIV#menu_gauche ul{list-style: none; margin:0; padding:0 0 20px 0;}
DIV#menu_gauche li{margin:0; padding:8px 0 0 35px; list-style:none; font-size:0.6em; line-height:1em;}
DIV#menu_gauche li a{ margin:0; padding:0; text-decoration:none;}
 
 
DIV#menu_droite{margin:0 0 0 0px; padding:0; float:left; width:201px; background-image:url("image.gif"); background-position:left; background-repeat:repeat-y; background-color:#FFCC00;}
DIV#menu_droite P.texte{ margin:0; padding:0 0 20px 30px; font-size:0.8em;}
DIV#menu_droite ul{ margin:0; padding:0 0 20px 0; list-style:none;}
DIV#menu_droite li{ margin:0; padding:10px 0 0 40px; list-style:none; font-size:0.8em;}
DIV#menu_droite li a{margin:0; padding:0; text-decoration:none;}
 
DIV#contenu{margin:0; padding:0 15px 0 10px; float:left; width:575px;}
	</style>
</head>
 
<body>
<div id="container-wrap">
	<div id="container">
		<div id="header">
			entete de page
		</div>
		<div id="menu_gauche">
 
			<p class="titre1">qsdfsdsdf</p>
 
			<ul>
				<li><a href="#">qsdfsdsdf</a></li>
				<li><a href="#">qsdfsdsdf</a></li>
				<li><a href="#">qsdfsdsdf</a></li>
				<li><a href="#">qsdfsdsdf</a></li>
			</ul>
 
			<p class="titre2">qsdfsdsdf</p>	
			<ul>
				<li><a href="#">qsdfsdsdf</a></li>
				<li><a href="#">qsdfsdsdf</a></li>
				<li><a href="#">qsdfsdsdf</a></li>
				<li><a href="#">qsdfsdsdf</a></li>
			</ul>
 
			<p class="titre3">qsdfsdsdf</p>			
			<ul>
				<li><a href="#">qsdfsdsdf</a></li>
 
			</ul>
		</div>
		<div id="contenu">
			fdssdfsdfsdfsdffs dsf df <br/>
			<h1>sdfsdfsdf</h1>
 
			bla bla ...<br />bla bla ...<br />bla bla ...<br />bla bla ...<br />bla bla ...<br />bla bla ...<br />bla bla ...<br />bla bla ...<br />bla bla ...<br />bla bla ...<br />bla bla ...<br />bla bla ...<br />bla bla ...<br />bla bla ...<br />bla bla ...<br />bla bla ...<br />bla bla ...<br />bla bla ...<br />bla bla ...<br />bla bla ...<br />bla bla ...<br />	
 
		</div>
		<div id="menu_droite">		
			<p class="titre1">qsdfsdsdf</p>
 
			<ul>
				<li><a href="#">qsdfsdsdf</a></li>
				<li><a href="#">qsdfsdsdf</a></li>
				<li><a href="#">qsdfsdsdf</a></li>
				<li><a href="#">qsdfsdsdf</a></li>
			</ul>
 
			<p class="titre2">qsdfsdsdf</p>	
			<ul>
				<li><a href="#">qsdfsdsdf</a></li>
				<li><a href="#">qsdfsdsdf</a></li>
				<li><a href="#">qsdfsdsdf</a></li>
				<li><a href="#">qsdfsdsdf</a></li>
			</ul>
		</div>
 
 
	</div>
 
</div>
</body>
</html>

Pour comprendre le probleme il faudra creer deux images:
image-illusion.gif qui sert a faire croire que le menu droit ira jusqu'en bas
image.gif image de fond du menu droit.

tu peux creer une image d'un pixel de hauteur et de 100px de large avec un pixel noir au milieu ce qui te fera une bande verticale grace a la repetition.

mais, ce que je voulais montrer dans mon premier discours, c'etait justement que cette technique d'image de fond qui donne l'illision que le div "menu-droit" va jusqu'en bas n'est pas applicable ici.

**BnA** · 08/01/2008, 16h16

OK, je me doutais bien qu'il y avait des contraintes derrière le 800x600!

Saleté de clients!!

Pour ce qui est de ton code, tu dis que tu ne nous demande pas de débugguer. OK, mais un problème peut avoir différentes origines, selon le contexte dans lequel il se trouve.

Tiens bon!

probleme de gestion de hauteur d'un div

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager