28172 sujets

CSS et mise en forme, CSS3

Footer toujours calé en bas de page

Bonjour,

J'ai vu un post identique au mien mais çà n'a pas résolu mon problème... J'ai pensé au javascript mais je voudrais vraiment l'éviter.
Je voudrais savoir comment caler le footer en bas de page quand le contenu de la page est pauvre.
J'ai mis un exemple de montage de ma page en image qui montre le pied de page varie en fonction du bloc id="contenu". (Je voudrais éviter le gros espace orange en bas de page)

Voici ci-dessous la structure du html : 

<body>
		<div id="header"></div>
		<div id="menuNiv1"></div>
		<!-- #### COLONNE PRINCIPALE #### -->
		<div id="contenu">
			<div class="inBox">
				<div id="col1">
					<!-- #### MENU N2 #### -->
					<div id="menuNiv2"></div>
				</div>
				<div id="col2">
					<!-- #### CONTENU #### -->
				</div>
				<div id="col3"></div>
			</div>
		</div>
		<!-- #### PIED DE PAGE #### -->
		<div id="footer"></div>
</body>


Et le css :

#header {
	height:115px;
	background:#A52824;
}

#menuNiv1 {
	height:43px;
	background:#EB690B;
}

#contenu {
	font-size:1.2em;
	min-height:100%; /* visiblement çà ne sert pas à grand chose de mettre cette propriété */
	background:#FFF;
}

#contenu .inBox {
	min-height:100%; /* idem... */
}

#col1 {
	float:left;
	width:200px;
	padding:15px 15px 15px 0;
}

#col2 {
	float:left;
	width:520px;
	padding:15px 15px 15px 15px;
	border-left:1px #ECECEC solid;
	border-right:1px #ECECEC solid;
}

#col3 {
	float:left;
	width:175px;
	padding:15px 0 15px 15px;
}

#footer {
	height:108px;
	clear:both;
	background:#C4143F url(../img-forum/back_footer.gif) repeat-x;
}


En vous remerciant d'avance. upload/16169-bug.gif
Modifié par chouch69 (25 Mar 2008 - 11:45)
Bonjour et bienvenue chouch69 Smiley smile

Edité : Arfffffffff ! je n'avais pas vu... Je retire ma réponse et te propose un petit tour par les règles du forum et plus particulièrement la partie qui concerne le titre des sujets...

Merci d'avance de bien vouloir mettre un titre clair correspondant à ta demande si tu veux obtenir une réponse.
Modifié par dominique (25 Mar 2008 - 11:29)
ouai ben dsl, j'avais oublié de vérifier mon titre je vais le refaire...
Modifié par chouch69 (25 Mar 2008 - 11:49)
Note de modération: j'ai supprimé quelques messages et j'en ai édité un autre pour supprimer des remarques inutiles.
Tsss.... supprimer des réponses parce qu'elles sont en klingon ? Vous manquez d'humour et de réflexion, aujourd'hui, les enfants.

Bon, pour être un peu plus sérieux, alors:

chouch69 a écrit :

Je voudrais savoir comment caler le footer en bas de page quand le contenu de la page est pauvre.


C'est une demande fréquente, voire récurrente ici, mais qui reflète toujours une même difficulté à appréhender les medias du Web.

Elle suppose d'abord en effet qu'on peut anticiper les conditions de rendus, et en particulier la hauteur réelle du contenu (liée notamment à la taille des caractères finales en fonction du zomm typographique côté utilisateur) et celle de la fenêtre d'affichage (en fonction du media réel de restitution et de l'interface du navigateur).

Cette anticipation échoue systématiquement quand elle conduit aux solutions CSS telles que signalées par la FAQ du forum. autrement-dit, le rendu sera illisible (chevauchements, rognages, etc) pour une partie des utilisateurs.

Elle est un peu moins fragile quand elle passe par javascript, qui permet de récupérer les paramètres réels côté utilisateur.

C'est également une erreur de choix technologique actuellement: passer par des contournements CSS ou des acrobaties javascript là où il s'agit simplement d'attendre l'implémentation des fonctionnalités pertinentes (les media queries).

C'est encore une confusion entre les media Web: projection et print (media paginés) ne sont pas screen ni handheld (non paginés).

Enfin, elle repose toujours sur une erreur ergonomique et conceptuelle de fond: vouloir contrôler l'espace utilisateur au lieu d'exploiter ce qui fait toute la force de CSS, c'est à dire un rendu finalement négocié.

voilà. ça pouvait aussi se résumer par: la solution est là, mais c'est une sottise. ce que résumait assez bien le Aujourd'hui est un bon jour pour mourrir... de mon précédent message Smiley ravi
Laurent Denis a écrit :
Tsss.... supprimer des réponses parce qu'elles sont en klingon ? Vous manquez d'humour et de réflexion, aujourd'hui, les enfants.

Disons que je me montre prudent dans la mesure où les nouveaux venus sur ce forum ne sont pas censés savoir à l'avance que certains membres du forum pratiquent la guérilla pédagogique. Smiley cligne
Florent V. a écrit :

Disons que je me montre prudent dans la mesure où les nouveaux venus sur ce forum ne sont pas censés savoir à l'avance que certains membres du forum pratiquent la guérilla pédagogique. Smiley cligne


Oh... j'aime beaucoup l'expression. Merci Smiley jap

<hum>Comment pourrait-on caser aussi urbaine dedans ? Il n'est de bonne guérilla qu'urbaine... ok, /me ->[] pour aujourd'hui.</>
Pour répondre vraiment à la question, oui c'est possible en CSS. Même si le CSS est valide 2.1, il ne faut pas oublier que celà ne marche pas avec IE6 (qui ne reconnait pas la propriété min-height, entre autres).
Pour les explications, euh là je dois avouer qu'à froid la nuit je suis pas super chaud... Mais si tu veux bien pomper la solution qui marche...
La page HTML:

<html>
	<body>
		<div id="page">
			<div id="header">Header content</div>
			<div id="content">Page content</div>
			<div id="footer">Footer contet</div>
		</div>
	</body>
</html>

Le CSS qui va bien:
div#page {
	position: absolute;
	top: 0;
	left: 0;
	min-height: 100%;
	width: 100%;
}

div#header {
	width: 100%;
	color: #FDFDFD;
	border-bottom: solid 1px #000000;
	background-color : #787889;
}

div#content {
	margin : 10px 100px 10px 100px;
	padding: 0 1.5em 1.5em 0;
	min-height: 100%;
	font-size: 0.9em;
	background-color: #FDFDFD;
}

div#footer{
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	clear: both;
	color: #FDFDFD;
	border-top: solid 1px #000000;
	background-color : #787889;
}

Voilà, un petit exemple de comment résoudre ce problème en CSS.
Modifié par Boroboro (22 May 2008 - 03:03)
Sujet clos
Aller à