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 /**/
}

mise de la hauteur à 100% et un overflow:auto

**andrebernard** · 15/06/2012, 15h04

Waooouhh !!! ça marche nickel, une barre apparait effectivement a coté du menu quand la taille se reduit

T'es peut etre Sans Smoking...mais tu as quand meme la classe

Milles merci NoSmoking

Et pour centrer la page, quelle direction dois je prendre, par le CSS ou bien créer des bandes de chaque coté qui compensent ??

**NoSmoking** · 15/06/2012, 18h18

Et pour centrer la page, quelle direction dois je prendre, par le CSS ou bien créer des bandes de chaque coté qui compensent ??

indéniablement le CSS

On commence par appliquer une height:100% au BODY et par supprimer le overflow-X qui nuira au scroll horizontal en cas de retrécissement de fenêtre

Code css :

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

1
2
3
4
5
6
7
8
html,body {
  margin:0;
  padding:0;
  border:0;
  width:100%;
  height:100%; /* AJOUT */
/*  overflow-X:hidden; /* SUPPRESSION */
}

On englobe la page dans une DIV, exemple

Code html :

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

1
2
3
4
5
<body>
<div id="page">
  <!-- le contenu de la page -->
</div>
</body>

cette DIV sera en position:relative, autorisant ainsi le positionnement par rapport à celle ci.
cette DIV aura une largeur "fixe", tenant compte des d'imensions des contenus.
cette DIV aura des margin-left et margin-right auto assurant le centrage de celle ci.

Code css :

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

1
2
3
4
5
6
#page{
  position:relative;
  width:1200px; /* par exemple */
  margin:auto;
  height:100%;
}

Passons à la DIV id="content", on supprimes la largeur qui par défaut fait 100% du conteneur, il te suffiras d'augmenter la taille de la DIV id="page" pour qu'elle s'élargisse.
Concernant la position left:187px, je penses qu'il est préférable de mettre un padding-left:187px, et en indiquant left:0, ce qui positionnera mieux les éléments contenus dans la DIV, mais bon!

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
#content {
  position:absolute;
  top:0px;
  right:0;
/*  left:187px; /* SUPPRESSION */
  left:0;  /* AJOUT */
  padding-left:187px; /* AJOUT */
  background:#CCC;
  display:block;
/*  width:1493px; /* SUPPRESSION */
  height:2000px;
  background-image:url(photos/fond.jpg);
  height: 1001px;
}

Quelques remarques en vrac:

Dans ta source la balise BODY est mal placée

Dans le menu on retrouve à chaque menu

Code html :

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

<a href="../page.php"><img src="photos/boutonrectanglegris.jpg" width="138" height="34" border="0">

passes plutôt par des class

Attention à l'orthographe des propriétés padding et non pading

Toujours mettre un ; après la valeur d'une propriété, cela évite les surprises.

**andrebernard** · 15/06/2012, 21h38

Merci beaucoup NoSmoking, je vais essayer ça et te tiendrais au courant.
Quand je te lis, je me dis que developpeur WEB c'est vraiment un metier

Bonne soirée

**andrebernard** · 16/06/2012, 20h25

J'ai essayé d'appliquer toutes les modifications que tu m'as donné, mais j'ai pas pu faire les essais car j'ai un problème de compréhension pour la partie du body

On englobe la page dans une DIV, exemple

<body>
<div id="page">

</div>
</body>

J'ai pas bien compris, car dans mon code :

Code :

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

1
2
3
4
5
6
<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>

J'ai deja une balise "content", dois je la remplacer ???
Dois je l'englober dans la div "page" ??

Car en fait c'est la div "content" que j'aimerais centrer et adapter a la résolution de la page

**BPiero** · 16/06/2012, 21h19

Envoyé par andrebernard

J'ai essayé d'appliquer toutes les modifications que tu m'as donné, mais j'ai pas pu faire les essais car j'ai un problème de compréhension pour la partie du body

Salut,

C'est simple, NoSmoking te dis que ton body est mal placé, c'est à dire qu'il doit englober tout ce qui est dans les balises html et qui n'es pas head. ainsi on a toujours:

Code :

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

1
2
3
4
5
6
7
8
9
 
<html>
    <head>
        Ton head...
    </head>
    <body>
         Tout le reste.
    </body>
</html>

@+

**NoSmoking** · 16/06/2012, 23h44

en partant de la structure du code mis dans ton premier message, on aurait

Code :

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

1
2
3
4
5
6
7
8
9
10
<body>
  <div id="page">
    <div id="menumetal">
    </div>
    <div id="menu">
    </div>
    <div id="content">
    </div>
  </div>
</body>

dans ce cas la totalité de ce qui est contenu dans la DIV id="page" sera centrée

Par contre si tu ne veux centrée que la DIV id="content" applique le style à celle ci et ne mets pas de DIV englobante, mais j'ai peur que le rendu soit très moyen.

Code :

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

1
2
3
4
5
6
7
8
<body>
  <div id="menumetal">
  </div>
  <div id="menu">
  </div>
  <div id="content">
  </div>
</body>

**andrebernard** · 18/06/2012, 17h59

Merci beaucoup, je vais essayer ça.
Je vous souhaite à tous une bonne soirée

ScrollBar verticale sur menu et remplissage de la page

HTML

Discussions similaires

Partager

Partager