Footer / overflow etc.

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

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, 12h37

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, 12h38

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, 12h41

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, 12h45

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, 12h56

quand tu "monde" quoi ????

Sous firefox, elle passe bien ta page !

**Candygirl** · 21/04/2008, 14h10

Bonjour,

Ton footer se trouve à l'intérieur de ton #conteneur_principal auquel tu attribues une hauteur fixe de 100% (qui correspond à la hauteur de la fenêtre). Il est donc normmal que, lorsque le contenu est plus long que la hauteur de la fenêtre, le footer ne se trouve plus en bas de page lors d'un scroll. Sans compter sur les positions absolute rendent les éléments indépendants les uns des autres.

Tu devrais commencer par éviter de tout mettre en position:absolute, déjà ton conteneur principal auquel tu peux directement attribuer une largeur et ton fond blanc en le centrant à l'aide des marges auto.

Tu peux alors supprimer ton conteneur_fondBlanc. Attribuer un min-height de 100% au lieu d'un height sur ton conteneur principal va permettre à ton contenu de s'allonger ci celui-ci est plus haut que la taille de la fenêtre et, ainsi, ton footer devrait suivre.

En faite, à part pour ton footer ou dans le cadre de ton menu (pas regardé en détail) le position:absolute ne devrait pas être utilisé sur ta page.

Il faut aussi attribuer un padding-bottom de la hauteur de footer /espace à ton conteneur_page pour éviter que le footer ne chevauche la fin du contenu:

En gros quelque chose du genre:

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
 
* --------------------------------------------- */
/* Conteneur principal : il regroupe tout sauf le body (fond de couleur) */
#conteneur_principal
{
	width:960px;
	padding:0 20px;
	min-height: 100%;
	background-image: url(fondBlanc.png);
	margin:0 auto; /* pour centrer */
	position:relative; /* qu'il serve de référence pour le positionnement absolu du footer */
}
/* --------------------------------------------- */
 
/* --------------------------------------------- */
/* Conteneur : content (corps de la page) */
#conteneur_page
{
	margin-top:25px;
	background-color: #f6f6f6;
	padding-bottom:100px;
}
/* --------------------------------------------- */
/* Conteneur : header (Bannière Comité Charente Handball) */
#conteneur_header
{
	height: 130px;
	background-image: url(bannerComiteHand.png);
}
/* --------------------------------------------- */
/* Conteneur : footer (Bas de la page) */
#footer
{
    	position: absolute;
	bottom:0;
	left:20px;
	width:960px;
	background-image: url(basDePage.png);

A noter que comme IE6 ne connaît pas le min-height, tu devras lui attribuer un height de 100%, par le biais des commentaires conditionnels, ou alors en utilisant un hack du genre:

Code :

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

1
2
3
4
5
 
* html #conteneur_principal
{
	height: 100%;
}

**No3l_tek** · 21/04/2008, 14h16

Merci beaucoup de ton aide

J'ai vu des tutos et des topic mais bon je suis un peu précès voire trop ^^ pour venez poster ici.

Je vais immédiatement adapter mon code comme tu me l'as dit.
Je te tiens au courant.

Sinon pour le site je ne m'occupe pas de IE6.
Je pars sur la base que il y a 2 browsers IE7 et FF.

Sachant que IE perd 5% d'utilisateurs par an et que FF en gagne 5% dans 2 années FF passera devant si IE ne réagit pas.

**No3l_tek** · 21/04/2008, 14h28

OKI !!!!

Il ne me reste plus qu'à trouver le moyen pour que ce ne soit pas la page qui se trouve avec une scrollbar mais mon conteneur_page.

Sinon je suis preneur pour l'adaptation des différents browsers (toujours utile) mais par contre mon menu est entièrement en CSS et si je ne me trompe pas comme il gère la transparence (CSS2) il ne sera pas adaptable à 100% avec les browsers précédents y compris IE6 , non?

**Candygirl** · 21/04/2008, 14h36

Excuse-moi pour le scrolling, j'avais zapé ce souhait et retenu que la question du footer, d'où le résultat que je t'ai proposé qui ne correspond pas.

Perso, je te déconseille de ne faire un scroll que sur le contenu; la surface utile de consultation se trouvant fortement réduite vu la hauteur de ta banière. Mais si tu souhaites le faire la structure sera effectivement différente de celle que je t'ai proposée.

**No3l_tek** · 21/04/2008, 14h48

Oui j'ai reçu le message.

J'ai donc modifier mon code. Et cela fonctionne. Mais ^^ (désolé) j'aimerai qu'à la place d'agrandir mon conteneur_page lorsqu'il y a beaucoup de texte (j'ai mis un bon pavé pour voir) que ce soit mon conteneur_page qui garde sa taille fixe mais prenne une scrollbar.

J'ai essayé avec width + height + display (block) mais sa ne marche pas.
J'ai également remarqué qu'il y a un espace entre mon conteneur_page et mon footer...j'aimerai qu'il le colle si possible.

Si tu veux que j'actualise le site et le code dis le moi merci.

**No3l_tek** · 21/04/2008, 14h54

Je ne veux pas trop re-éditer alors je post une nouvelle fois.

J'ai remarqué qu'en rétractant ma fenêtre horizontalement, il y a un bord bleu à gauche qui ne disparait pas...du fait que ce ne soit pas centré je pense.

Quelques précisions sur ton code m'aiderai à comprendre le système.
Merci

ps : entre temps j'ai trouvé pour rapproché le footer ...

**Candygirl** · 21/04/2008, 15h04

je n'ai malheureusement pas le temps de commenter plus. Si tu veux virer l'espace, c'est le padding-bottom que tu dois ajuster/supprimer.

En modifiant comme suit:

Code :

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

1
2
3
4
5
6
7
8
9
10
#conteneur_page
{
	position:absolute;
	top:154px;
	bottom:40px;
	left:20px;
	width:960px;
	background-color: #f6f6f6;
	overflow:auto;
}

J'imagine qu'on obtient à peu près ce que tu souhaites niveau comportement ?

Un montage de ce type avec le footer en bas n'est pas tout simple et si tu "débutes un peu "comme tu le dis toi-même, il va être difficile d'en maîtriser tous les aspects... En tous les cas, bonne suite et bonne chance

**No3l_tek** · 21/04/2008, 15h13

Oui.

En fait il y a que 4 mois que j'ai entamé la programmation mais sa me passionne ^^ : html, css, php, sql, xml ...

Merci beaucoup de ton aide. Le résultat que tu m'as permis d'avoir est à 99% de ce que je souhaitais.

Résolu est plus que nécessaire

Super forum !! pour précision et rapidité.

**No3l_tek** · 21/04/2008, 15h20

Oups parlé trop vite.

Lorsque j'essaie de mettre un padding dans mon conteneur-page il s'écarte du milieu, il n'est plus centré.

C'est surement du à sa position qui est absolute ?
Il y a possibilité d'y inclure une marge sur tout le conteneur sans le bouger lui ?

**No3l_tek** · 21/04/2008, 15h29

J'ai ajouté ma class "margin" qui mets un padding....lol ^^

Je la renommerai. Sa fonctionne.
Dernière question promis : "peut on afficher que la scrollbar vertical dans mon conteneur_page, si oui comment" ??
Et d'aileurs pourquoi il affiche une scroll horizontale s'il y a padding et scroll verticale ??

J'ai essayé avec overflow-x etc mais ça fonctionne que sous FF et pas IE7, très embettant.

DESOLE !!!!!!!!!!!!!!!!!!!!!!!!!!

J'ai trouvé ^^. Je posais la question on sait jamais si je cherche pas assez vite.

TOUT FONCTIONNE A MERVEILLE. MERCI A TOI GRANDE MODERATRICE

Bonne fin de journée et résolu

Footer / overflow etc.

CSS

Discussions similaires

Partager

Partager