Footer / overflow etc.

**No3l_tek** · 21/04/2008, 11h18

Bonjour à tous,

Je travaille sur la mise en page d'un site en CSS mais j'ai un gros problème pour le réaliser.

vous pourrez le voir ici --> http://noz.neuf.fr/test/index.html

Donc j'ai un footer en bas qui doit suivre le bas de page en fonction de la taille de la fenêtre.

J'ai également un div "conteneur_page" qui sert à mettre le contenu du site (pages) qui doit faire apparaitre une scrollbar verticale si on réduit la taille (horizontalement) et le footer lui suit le bas de page et monte.

J'y suis presque arrivé mais la fonction javascript que j'ai trouvé a l'air de tout bloquée. Je ne peux pas du tout contrôler mon div "conteneur_page".

Quelqu'un peut t-il m'aider ??

Merci

Voici mon code

HTMl

Code html :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link href="scriptCss.css" rel="stylesheet" type="text/css" />
 
</head>
 
<body>
<div id="conteneur_principal">
 
<div id="conteneur_fondBlanc">
</div>
 
<div id="conteneur_header">
</div>
 
<div id="conteneur_menuCSS">
		<ul id="menuDeroulant">
			<li><a href="#">Accueil</a> <!-- Nom du premier menu  --></li>
 
			<li><a href="#">Comite</a> <!-- Nom du deuxieme menu  -->
				<ul class="sousMenu">
					<li><a href="#">Dates et reunions</a></li>
					<li><a href="#">Bureau directeur</a></li>
					<li><a href="#">Conseil d'administration</a></li>
					<li><a href="#">Commissions</a></li>
				</ul>
			</li>
 
			<li><a href="#">Competitions</a> <!-- Nom du troisieme menu  -->
				<ul class="sousMenu">
					<li><a href="#">Rencontres</a></li>
					<li><a href="#">InterComites</a></li>
					<li><a href="#">Gest'hand</a></li>
					<li><a href="#">Calendrier</a></li>
					<li><a href="#">Sanctions</a></li>
				</ul>
			</li> 
 
			<li><a href="#">Formations</a> <!-- Nom du quatrieme menu  -->
				<ul class="sousMenu">
					<li><a href="#">Joueurs</a></li>
					<li><a href="#">Animateurs</a></li>
					<li><a href="#">Arbitres</a></li>
					<li><a href="#">Diverses</a></li>
					<li><a href="#">Anim'Hand</a></li>
				</ul>
			</li>
 
			<li><a href="#">Annuaire Clubs</a> <!-- Nom du cinquieme menu  --></li> 
 
			<li><a href="#">Ressources</a> <!-- Nom de premier menu  -->
				<ul class="sousMenu">
					<li><a href="#">Memento</a></li>
					<li><a href="#">Modèles à télécharger</a></li>
					<li><a href="#">Partenaires du comité</a></li>
				</ul>
			</li>
		</ul>
 
		<div id="conteneur_finMenu">
		</div>
</div>
 
 
 
		<div id="conteneur_page">
				<table id="titre" class="styleTitre2" width="960" color="#2973ae"> <tr> <td> <span class="styleTitre2"> Wellcome to the first part </span> </td> <tr> </table>
				blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla
				blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla<br>
				<br>
				<table id="titre" width="960" color="#2973ae"> <tr> <td> <span class="styleTitre3"> Wellcome to the first part </span> </td> <tr> </table>
				blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla<br>
				blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla<br>
				blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla<br>
				<br>
		</div>
 
	<div id="footer" class="styleText1"><center><table><tr><td width="100" align="center">Contact</td><td width="100" align="center">Liens</td><td width="100" align="center">Albums photos</td> </tr> </center>
	</div>
 
</div>
 
</body>
</html>

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
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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
 
@charset "utf-8";
/* CSS Document */
 
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||      STYLE MISE EN PAGE      ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
 
/* Style de mises en forme */
.styleText1
{
	color: #FFFFFF;
}
/* --------------------------------------------- */
/* Style de mises en forme */
.styleTitre1
{
	color: #FFFFFF;
	font-size: 12pt;
	font-weight: 700;
}
/* --------------------------------------------- */
/* Style de mises en forme */
.styleTitre2
{
	color: #cc6666;
	font-size: 12pt;
	font-weight: bold;
}
/* --------------------------------------------- */
/* Style de mises en forme */
.styleTitre3
{
	color: #2973ae;
	font-size: 12pt;
	font-weight: bold;
}
.margin
{
	padding: 20px;
}
/* --------------------------------------------- */
 
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||      FIN DE STYLE MISE EN PAGE      ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
 
/* Style pour affichage des titres (tableau) */
table#Titre
{
padding :0;
border :0;
}
/* --------------------------------------------- */
 
/* BODY */
html, body
{
	background-color: #2973ae ;
	font: 90%/200% verdana, arial, helvetica, sans-serif;
	height: 100%;
	margin: 0;
	padding: 0;
}
/* --------------------------------------------- */
/* Conteneur principal : il regroupe tout sauf le body (fond de couleur) */
#conteneur_principal
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	left: 50%;
	right: 50%;
	margin-left: -50%;
	min-height: 100%;
	z-index: 2;
}
/* --------------------------------------------- */
/* Conteneur : Fond blanc centré */
#conteneur_fondBlanc
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 1000px;
	height: 100%;
	left: 50%; 
	right: 50%;
    margin-left: -500px; /* moitié de la largeur : pour centrer */
	background-image: url(fondBlanc.png);
}
/* --------------------------------------------- */
/* Conteneur : content (corps de la page) */
#conteneur_page
{
	position: absolute;
	width: 960px;
	height: 500px;
	top: 154px;
	left: 50%;
	right: 50%;
	margin-left: -480px;
	background-color: #f6f6f6;
}
/* --------------------------------------------- */
/* Conteneur : header (Bannière Comité Charente Handball) */
#conteneur_header
{
	position: absolute;
	display: block;
	top: 0px;
	left: 0px;
	width: 960px;
	height: 130px;
	left: 50%; 
	right: 50%;
	margin-left: -480px; /* moitié de la largeur : pour centrer */
	background-image: url(bannerComiteHand.png);
}
/* --------------------------------------------- */
/* Conteneur : footer (Bas de la page) */
#footer
{
    position: absolute;
	bottom: 0;
	width: 960px;
	height: 40px;
	left: 50%; 
	right: 50%;
	margin-left: -480px; /* moitié de la largeur : pour centrer */
	background-image: url(basDePage.png);
}
/* --------------------------------------------- */
 
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||            MENU CSS            |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
 
#conteneur_menuCSS
{
	position: absolute;
	top: 131px;
	left: 0px;
	left: 50%; 
	right: 50%;
	margin-left: -480px;
 	width: 960px;
	z-index: 3;
}
/* --------------------------------------------- */
#menuDeroulant
{
	 width: 960px;
	 list-style-type: none;
	 margin: 0;
	 padding: 0;
	 border: 0;
	 font: 12px verdana, sans-serif;
	 text-align: center;
	 z-index: 3;
}
/* --------------------------------------------- */
#menuDeroulant li
{
	 float: left;
	 width: 150px;
	 margin: 0;
	 padding: 0;
	 border: 0;
	 left: 50%; 
	 right: 50%;
	 z-index: 3;
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu
{
	 display: none;
	 list-style-type: none;
	 margin: 0;
	 padding: 0;
	 border: 0;
}	
/* --------------------------------------------- */
#menuDeroulant .sousMenu li
{
	 float: left;
	 margin: 0;
	 padding: 0;
	 border: 0;
	 width: 149px;
	 border-top: 1px solid transparent; /* 1px solid transparent */
	 border-right: 1px solid transparent;  /* 1px solid transparent */
}			
/* --------------------------------------------- */	
#menuDeroulant li a:link,
#menuDeroulant li a:visited
{
	 display: block;
	 height: auto;
	 color: #FFF;
	 background-image:url(fondT.png);
	 margin: 0;
	 padding: 4px 8px; /* 4px 8px */
	 border-right: 1px solid #fff;
	 text-decoration: none;
}
/* --------------------------------------------- */
#menuDeroulant li a:hover { background-image:url(fondT2.png); } /* Image RollOver des Menus */
/* --------------------------------------------- */
#menuDeroulant li a:active { background-color: #5F879D; } /* Couleur de la police lors du clic */
/* --------------------------------------------- */
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
	 display: block;
	 color: #FFF;
	 margin: 0;
	 border: 0;
	 text-decoration: none;
	 background: transparent url("fondTR.png") repeat;  /* Image de fond  des sous-menus */
}
/* --------------------------------------------- */
#menuDeroulant .sousMenu li a:hover {background-image: none;background-color: #ae4343;}
/* --------------------------------------------- */
#menuDeroulant li:hover > .sousMenu { display: block; }		
/* --------------------------------------------- */
#conteneur_finMenu
{
	position: absolute;
	top: 0px;
	left: 900px;
	width: 60px;
	height: 22px;
	background-image: url(fondT+.png); /* Image du bouton de fin de Menu */
}
/* --------------------------------------------- */
 
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||         FIN MENU CSS         ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
 
/* CODE DEBOGAGE POUR NAVIGATEURS : PROBLEMES AFFICHAGE IE7 / FF */
/*
table {border: 1px solid black}
td {border: 1px dotted gray}
div {border: 1px solid orange}
img, form {border: 1px dashed blue}
h1, h2, h3, h4, h5, h6, p {border: 1px solid yellow}
ul {border: 1px solid green}
li {border: 1px solid lightgreen}
* {margin: 0; padding: 0;}
*/

**pierre24** · 21/04/2008, 11h37

J'ai pas l'impression que ta fonction javascript soit totalement faite pour la gestion d'un overflwo !

Je me trompe peu etre

**No3l_tek** · 21/04/2008, 11h38

Oui lol !!

Je viens de l'enlever... elle ne me sert à rien ^^

Faites en abstraction ça ne change pas mon problème.
D'ailleurs j'ai enlevé le div id="content"

Je vais réactualisé sur le site ET mon code

**pierre24** · 21/04/2008, 11h41

Si tu veux dynamiquement faire apparaitre un scrollbar lorsqu'on diminue la taille de la fenetre , alors il va te falloir employer AJAX à mon avis !

**No3l_tek** · 21/04/2008, 11h45

Normalement si je diminiue la taille d'un display : block; et qu'il y a un overflow : auto; Je ne devrais pas avoir de problèmes...

Simplement je n'arrive pas à paramétrer le footer ki m**de.
Il est bien en bas quand je suis en 100% ou presque mais dès que je monde trop et que j'atteins mon block conteneur_page il se mets à monter et laisser du blanc en dessous.

J'aimerai qu'il reste en bas et que le block conteneur_page s'affiche avec une scrollbar....

Pas compliqué en CSS2 maintenant mais j'ai du mal je débutte un peu ^^

**pierre24** · 21/04/2008, 11h56

quand tu "monde" quoi ????

Sous firefox, elle passe bien ta page !

Footer / overflow etc.

CSS

Vue hybride

Discussions similaires

Partager

Partager