28172 sujets

CSS et mise en forme, CSS3

Positionnement du footer

Bonjour,

Le sujet a sans doute déjà été traité ; mais je ne trouve pas de réponse Smiley sweatdrop

J'ai donc une mise en page assez simple, avec une colonne centrée (positionnement relatif), puis un footer pleine largeur (dans le flux courant).

Le footer a un attribut de hauteur fixe, disons, par exemple 150px.

Plusieurs cas de figure sont susceptibles de se présenter :
- Mon contenu est long, et dépasse la hauteur de l'écran ; dans ce cas, pas de problème, le footer est sous mon contenu, et fait 150px de haut.
- Mon contenu est court. Dans ce cas, mon footer est toujours sous le contenu, ce qui est attendu. Mais comme la hauteur du footer est fixe, l'arrière-plan du body déborde entre le bas du footer et le bas de l'écran.

Sachant que l'arrière-plan du body et du footer ne peuvent être assimilés visuellement (répétitions d'un motif supérieur à 1px de haut), comment faire pour étirer le footer dans le cas où le contenu n'est pas assez grand ?

Merci beaucoup !
Smiley cligne
yakou32 a écrit :
avec une colonne centrée (positionnement relatif)

J'espère qu'elle est centrée via les marges automatiques, puis positionnée en relatif (sans décalage)? Parce que sinon il y a un problème...

Pour le problème lui-même:
- le conteneur principal (en largeur fixe et centré horizontalement) doit être en min-height:100% (voir la FAQ à ce sujet si besoin), et doit avoir comme image de fond le motif du footer;
- dans ce conteneur principal, placer un autre conteneur qui aura pour fond le motif du contenu principal;
- le pied de page n'a à priori pas besoin d'un fond particulier.

Soit une structure HTML comme ceci:
<div id="global">
	<div id="main">
		En-tête, menu, contenu, etc.
	</div><!-- #main -->
	<div id="footer">
		Pied de page.
	</div><!-- #footer -->
</div><!-- #global -->

On fera attention à la fusion des marges, et ça devrait aller.

Bien sûr, il se peut que ton design comporte des subtilités supplémentaires.
Merci pour ta réponse.

D'abord petit aparté :
Ma div était effectivement centrée sous la forme left:50% et margin-left:-250px. Smiley confused
J'ai adopté la méthode de margin:auto
Quels sont les avantages/inconvénients des deux options ?
Il me semble que le décalage permet des calages plus fins, par exemple à 30%, mais génère une scrollbar-x. Mais ma vision des choses est sans doute incomplète...

Pour revenir à nos moutons, j'ai dû mal à bien comprendre ta solution, à moins que ce ne soit lié à des "subtilités complémentaires"...
Je joins donc une capture pour être plus clair sur le problème d'interprétation par le navigateur :
upload/3630-capture.jpg

Pour cet aperçu, j'ai la structure suivante :

<body> avec le fond
<div id="global">min-height à 100%
<div id="header"></div>
<div id="maincontent">centré donc... il y aura d'autres colonnes calées  de part et d'autre, mais vraisemblablement plus courtes.</div>
<div id="footer"></div>
</div>
</body>


De là, deux options distinctes m'intéressent bien :
1- Comment étirer le footer.., le content ne s'agrandissant pas
2- Comment étirer le content, le footer ne s'agrandissant pas
Modifié par yakou32 (21 Jan 2009 - 15:19)
yakou32 a écrit :
Quels sont les avantages/inconvénients des deux options ?

Utiliser le positionnement relatif pour positionner des blocs côte-à-côte ou centrer un élément est tout simplement une erreur. J'avoue avoir un peu la flemme de développer le pourquoi du comment mais c'est lié au fait que le positionnement relatif décale l'élément par rapport à sa position «normale» (celle que les autres éléments de la page prendront en compte).

La technique que tu as utilisé utilise normalement le positionnement absolu. Mais ça reste une mauvaise technique, qui a des effets de bord assez gênants comme le fait que certains contenus peuvent devenir inaccessibles dans une fenêtre de navigateur pas assez large: des contenus sont hors-champ et aucune barre de défilement n'apparait pour permettre de les afficher...

yakou32 a écrit :
Il me semble que le décalage permet des calages plus fins, par exemple à 30%, mais génère une scrollbar-x. Mais ma vision des choses est sans doute incomplète...

On peut réaliser un alignement horizontal assez fin avec des marges automatiques. Par exemple: margin: 0 150px 0 auto;, ou margin: 0 auto 0 20%.

yakou32 a écrit :
Pour revenir à nos moutons (...)

Rien compris à la capture, et je n'ai aucune idée exacte du design que tu cherches à réaliser. J'ai donné une réponse sur la foi de ta description, qui ne reflète pas forcément ton design. Smiley ohwell
Peut-être faudrait-il donner un aperçu du design à réaliser (pas de la structure envisagée ou testée pour l'intégrer). Smiley cligne
Merci, c'est déjà plus clair pour le centrage.

J'ai refait un schéma que j'espère plus compréhensible pour ce que je cherche à faire.
upload/3630-probleme.jpg
Modifié par yakou32 (21 Jan 2009 - 17:33)
Alors pour obtenir ce schéma, il suffit de la structure suivante:
<body>
	<div id="header"></div>
	<div id="middle">
		<div id="main"></div>
	</div><!-- #middle -->
	<div id="footer"></div>
</body>

Le body a un fond gris sombre, l'en-tête et le pied de page n'ont pas de fond (transparent), le #middle prend toute la largeur et a un fond vert, le #main a une largeur fixe, un fond gris clair et il est centré (marges automatiques).
Modérateur
bonjour,

dans le cas d'une page courte , ce que tu aperçoit a l'ecran sous ton pied , c'est 'html'.

En mode standard et navigateur recent , html peut recevoir un fond et l'afficher.

reste un probleme de raccord a gerer , ... em mettant l'image du pied en fondue vers la couleur de fond dominante , il ne restera plus qu'appliqué cette couleur de fond a html.C'est pour la solution facile , pour garder les diagonales , alors retour aux marges , positionement relatif et tarasbiscotage pour inclure les differents nav ....

GC
Modifié par gcyrillus (22 Jan 2009 - 12:08)
J'ai dû m'absenter et je reviens donc un peu tard...
Merci pour vos réponses.

Finalement, j'ai tourné ma mise en forme un peu différemment pour trouver une solution viable pour ce projet.
Mais j'ai bien noté vos remarques. Je vais les expérimenter ce week-end...
Bonjour,

J'aimerai revenir sur ce sujet car je ne vois pas trop comment résoudre mon soucis.

Pour reprendre le schéma de yakou32, j'aimerai appliqué l'hypothèse 2 (Cf. image un peu au dessus).

Voici la structure de mon site:

<div id="header">
</div>
<div id="page">
    <div id="content">
    </div>
</div>
<div id="footer>
</div>


J'aimerai que mon "Footer" soit en bas de l'écran quand le contenu du site n'est pas haut.
Pour moi, il faudrait modifier la propriété CSS de "Page" ou de "Content".

Mais je ne vois pas comment faire, à part avec du JS et encore il faudrait prévoir que le navigateur puisse se réduire.

Je suis dans le flou, c'est chiant Smiley biggol

Merci d'avance pour votre aide
Je viens de travailler un peu sur le problème et voilà le script que j'ai écrit.
ATTENTION : il a été testé sur Firefox 3 (Max) et Safari 3 (Mac). IE n'a pas encore été testé.

Ce code fait ce qu'il a faire même si ce n'est pas très propre.
Accessoirement, j'utilise la librairie Prototype qui dans ce cas n'est pas top car elle ne donne aucune informations sur le document ou le window.

Bref, voici mon code

document.observe ( 'dom:loaded', function ( ) {
	
	SetFooterBottom ( );
	
	Event.observe( document.onresize ? document : window, "resize", function ( ) {
	
		SetFooterBottom ( );
		
	} );  

} );
	
var g_nFirstBottom = null;
var g_nFirstPageHeight = null;
function SetFooterBottom ( )		
{	
	nBottom = $('footer').positionedOffset ( ).top + $('footer').getHeight ( );
	if ( g_nFirstBottom == null )
		g_nFirstBottom = nBottom;	
	if ( g_nFirstBottom < window.innerHeight )
	{		
		if ( g_nFirstPageHeight == null )
			g_nFirstPageHeight = $('page').getHeight ( );
			
		$('page').setStyle ( { height: $('page').getHeight ( ) + ( window.innerHeight - nBottom ) } );
	}
	else
	{
		if ( g_nFirstPageHeight != null )
			$('page').setStyle ( { height: g_nFirstPageHeight } ); 
	}
}
Bonjour,

Je viens de remettre à jour ce script car il me posait problème.
Lors de la vie de la page, le contenu changeait est les tailles enregistrées n'étaient plus bonne.

Voici la nouvelle version que j'utilise.
function SetFooterBottom ( )		
{	
	if ( $('page').getStyle ( 'height' ) )
		$('page').setStyle ( { height: 'auto' } ); 
	nBottom = $('footer').positionedOffset ( ).top + $('footer').getHeight ( );
	if ( nBottom < window.innerHeight )
	{					
		$('page').setStyle ( { height: $('page').getHeight ( ) + ( window.innerHeight - nBottom ) } );
	}
}


Par contre il faut relancer cette fonction à chaque fois que le contenu change et est succeptible de modifier la taille.
Sujet clos
Aller à