ScrollBar verticale sur menu et remplissage de la page

**andrebernard** · 14/06/2012, 16h48

Bonjour,

J'ai éssayé tant bien que mal de créer un menu qui se loge sur la gauche de ma page, cela marche tres bien

Seulement je viens de m'apercevoir qu'en changeant d'ordinateur avec une resolution plus petite, mon menu est en partie tronquée.

Et la scrollBar verticale ne sert qu'au deplacement de chaque page a droite du menu, je n'ai pas de moyens de descendre dans le menu.

Ma premiere question : est il possible de faire apparaitre une seconde scrollbar sur le menu de gauche, seulement si il n'apparait pas completement comme sur la photo au dessus ??

Et ma seconde question est : comment pourrais-je faire pour centrer les pages dans le cas ou la resolution est cette fois plus grande comme ci dessous

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
 
	<head>
		<title>Accueil</title>
	 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
		<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
 
		<style type="text/css">
                
                html, body {
                        margin:0;
                        padding:0;
                        border:0;
                        width:100%;
                        overflow-X:hidden;
                }
                
                #menu {
                        position:fixed;
                        top:0px;
                        left:3px;
                        width:180px;
                        height:2000px;
                        border:none;
                        z-index:500;
                        background-image: url(photos/texture.gif);
                }
        
                #menug {
                position:fixed;
                        top:0px;
                        left:0px;
                        width:15px;
                        height:100%;
                        border:none;
                        background-image: url(photos/chainedefile.gif);
                        z-index:511;
                        
                }
        
                #menud {
                        position:fixed;
                        top:0px;
                        left:175px;
                        width:15px;
                        height:100%;
                        border:none;
                        background-image: url(photos/chainedefile.gif);
                        z-index:511;
                }
                                
                #content {
                        position:absolute;
                        top:0px;
                        left:187px;
                        right:0;
                        background:#CCC;
                        display:block;
                        width: 1493px;
                        height:2000px;
                }
                
                        #header {
                         position:fixed;
                                display:block;
                                height:25px;
                                color:#FFF;
                                padding:10px;
                                text-transform:uppercase;
                        }
 
                        /* Le menu */
                
                        ul, li.niveau1 a{ /* Balise de tout les LI, les UL et les boutons  */
                                margin-left:10px; /* Left de tout le menu */
                        }
        
                        li{ /* Balise de tout les LI */
                                position:relative;
                                padding-top:20px; 
                                padding-bottom:0px; /* Espacement vertical entre les boutons */
                                padding-left:0px; /* Left des boutons */
                                padding-right:0px; /* Right des boutons */
                                margin:0px
                                z-index:1;
                        }
                        
   li.niveau1 a{
          border:3px solid #AD735A; /* Cadre epaisseur autour des boutons */
                        }
                                
   li.niveau2 a{
                         margin-left:8px; /* Left de tout le menu */
                                margin-bottom:0px;
                                pading-bottom:0px;
    border:3px solid gray; /* Cadre epaisseur autour des boutons */
                }       
                                                                        
                        a{ /* Concerne les boutons */
                        padding:1px; /* Ecartement du cadre autour bouton */
                                margin:0px; /* Left de tout le menu */          
                        }
                                                                        
                        /* Survol */
                                        
                        li.niveau1 a:hover {
                                border-color:red;
                }
                
          ul ul { /* Referme si pas de passage pour les sous menus */
                        display:none;
                }
                
                        li:hover ul, li:hover li:hover ul { /* Ecarte au passage pour les sous menus */
                                display:block;
                        }
                                
                                #content{
                                background-image: url(photos/fond.jpg);
                                height:1001px;
                        }
        </style>
 
</head>
 
<div id="menumetal">
 
		<div id="menug"></div>
		<div id="menud"></div>
 
 </div>
 
	<div id="menu">
 
		<ul class="tablo" >
 
			<li class="niveau1"><a href="../page.php"><img src="photos/boutonrectanglegris.jpg" width="138" height="34" border="0"></a></li>		
 
			<li class="niveau1"><a href="../page.php"><img src="photos/boutonrectanglegris.jpg" width="138" height="34" border="0"></a>
				<ul class="ul1">
					<li class="niveau2" ><a href="../page.php"><img src="photos/boutonrectanglegris.jpg" width="138" height="34" border="0"></a></li>
					<li class="niveau2"><a href="../page.php"><img src="photos/boutonrectanglegris.jpg" width="138" height="34" border="0"></a></li>
					<li class="niveau2"><a href="../page.php"><img src="photos/boutonrectanglegris.jpg" width="138" height="34" border="0"></a></li>
				</ul>
			</li>
 
			<li class="niveau1"><a href="../page.php"><img src="photos/boutonrectanglegris.jpg" width="138" height="34" border="0"></a></li>
			<li class="niveau1"><a href="../page.php"><img src="photos/boutonrectanglegris.jpg" width="138" height="34" border="0"></a></li>
			<li class="niveau1"><a href="../page.php"><img src="photos/boutonrectanglegris.jpg" width="138" height="34" border="0"></a>
 
			<ul class="ul1">
				<li class="niveau2" ><a href="../page.php"><img src="photos/boutonrectanglegris.jpg" width="138" height="34" border="0"></a></li>
				<li class="niveau2"><a href="../page.php"><img src="photos/boutonrectanglegris.jpg" width="138" height="34" border="0"></a></li>
				<li class="niveau2"><a href="../page.php"><img src="photos/boutonrectanglegris.jpg" width="138" height="34" border="0"></a></li>
				</ul>
			</li>
 
			<li class="niveau1"><a href="../page.php"><img src="photos/boutonrectanglegris.jpg" width="138" height="34" border="0"></a></li>
			<li class="niveau1"><a href="../page.php"><img src="photos/boutonrectanglegris.jpg" width="138" height="34" border="0"></a></li>
			<li class="niveau1"><a href="../page.php"><img src="photos/boutonrectanglegris.jpg" width="138" height="34" border="0"></a></li>
			<li class="niveau1"><a href="../page.php"><img src="photos/boutonrectanglegris.jpg" width="138" height="34" border="0"></a></li>
			<li class="niveau1"><a href="../page.php"><img src="photos/boutonrectanglegris.jpg" width="138" height="34" border="0"></a></li>
			<li class="niveau1"><a href="../page.php"><img src="photos/boutonrectanglegris.jpg" width="138" height="34" border="0"></a></li>
 
	</ul>
 
</div>			
 
<body>
 
		<div id="content">
	 			<div id="Layer17" style="position:absolute; left:529px; top:183px; width:169px; height:52px; z-index:3"><img src="photos/Bienvenue.gif" width="174" height="72"></div>
  </div>
 
</body>
 
</html>

Je vous remercie et vous souhaite une bonne journée

**Meloooo** · 14/06/2012, 17h03

Bonjour,
J'ai lu ton post que très vite, mais à première vu, je dirais qu'il faut que tu fixes une hauteur minimal pour ton menu :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
#menu {
			position:fixed;
			top:0px;
			left:3px;
			width:180px;
			height:2000px;
			border:none;
			z-index:500;
			background-image: url(photos/texture.gif);
                        min-height:2000px; // valeur prise au hasard
		}

**andrebernard** · 14/06/2012, 18h44

Merci de cette réponse rapide, je ne suis plus devant ma machine, j'essaie ça au plus tard demain matin
Encore merci

**andrebernard** · 15/06/2012, 09h59

Je viens d'essayer de rajouter min-height:500px; dans les 3 menus pour voir l'effet, et rien ne se passe

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
#menu {
			position:fixed;
			top:0px;
			left:3px;
			width:180px;
			height:2000px;
			border:none;
			z-index:500;
			background-image: url(photos/texture.gif);
			min-height:500px;
		}
 
		#menug {
	 	position:fixed;
			top:0px;
			left:0px;
			width:15px;
			height:100%;
			border:none;
			background-image: url(photos/chainedefile.gif);
			z-index:511;
			min-height:500px;
		}
 
		#menud {
			position:fixed;
			top:0px;
			left:175px;
			width:15px;
			height:100%;
			border:none;
			background-image: url(photos/chainedefile.gif);
			z-index:511;
			min-height:500px;
		}

**NoSmoking** · 15/06/2012, 11h02

Bonjour,
pour ton menu de gauche essaies

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
#menu {
	position:fixed;
	top:0px;
	left:3px;
	width:180px;
	height:100%; /* 2000px;/**/
	border:none;
	z-index:500;
	background-image: url(photos/texture.gif);
	overflow:auto; /* AJOUT /**/
}