[Réglé] Positionnement Footer / Pied de Page, un peu paumé le noob :D

BOnjour tout le monde et tout d'abord un grand merci à alsa pour tout ces beaux tutos qui m'ont bien aidé jusqu'à présent. En esperant pouvoir vous retourner l'appareil un de ces jours.

Voili voilou mon soucis est assez classique, mais vu que je suis un peu débutant en Xhtml/Css je galere grave.

Sachez que j'ai auparavant essayé de trouver par moi meme, utiliser vos méthodologie de debug etc mais je bloque comme un couillon (car en plus ca doit etre couillon )

Voilà mon soucis c'est que je veux mon footer tout en bas de la page afin de repeter mon background de container jusqu'en bas de la feneter du naviguateur.

Voici le site de test que j'utilise (pas de pub y a rien dedans a part un lorem ipsum) http://www.nikolours.com/test

Cette doc http://pompage.net/pompe/pieds/ m'a bien aidé enfin j'ai cru mais j'ai jamais reussi à le faire marcher complement

TOute aide, piste, documentation, lien etc sera agréablement remercier

Merci à tous pour votre attention

Et vive l'interoparabilité et le libre
Modifié par Nikolours (25 Jan 2007 - 00:10)

salut,

je n'ai pas tres bien compris ton probleme (je me reveille a l'instant...)

tu voudrais que ta page fasse forcement la hauteur de ton background-image ?
ou tu veux que ta page fasse toujours 100% de la hauteur du navigateur ?
ou tu veux que ton footer soit toujours tout en bas de ta page ??

si t'as moyen d'expliquer un poil mieux, ca ( m' ) aiderais... merci

opi

Salut opi

Bon reveil? Bien dormi?

En fait t'as presque compris, c'est vrai que j'ai pas été trés clair:

- je veux que mq page fasse toujours 100% de la hauteur du navigateur ? (afin de repeter le background de mon container jusqu'en bas)

- et je veux que mon footer soit toujours tout en bas de ta page (mais normalement c'est bon ca)

Merci de ton aide

bien dormi merci, j'en avais bien besoin...

si ton background-image est declaré pour body, il se repete toujours jusqu'en bas non ??

dans ton css, met:

body {
background: url(/webdesign/background.gif) repeat-y;
}

le repeat-y a son importance...

opi

ps: dans ton css, comme tu ecris:

* {
	margin: 0;
	padding: 0;
}

tu n'es plus obligé de le repeter pour body
Modifié par Opi (19 Dec 2006 - 12:14)

Effectivement j'ai oublié de repeat y pour le background. Mais je ne pense pas que ce soit ceci qui me pose principalement soucis pour le moment car je veux que ce soit le backcon.gif present dans la class sous cité qui se repete.


#container {
position: relative;
margin: 0 auto 0 auto;
width: 850px !important;
width /**/: 850px;
background: url(/webdesign/backcon.gif) repeat-y;
font-family: Verdana;
font-size: .75em;
color: #BBB5A2;
}

Merci pour le margin que je repete, je vais cleaner ca.

Je fais les modifs ce soir en rentrant du boulot.

Merci a toi

Tu devrais essayer de placer ton footer dans ton container (tout en bas). Ou alos tu cré une div qui englobe touts tes éléments (header, container, footer) et tu place ton image backgound dans cette div.

A+
Eric

Mais c'est pas ca qui va mettre mon footer en bas de page ??

Ou alors j'ai rien compris a tout ce que j'ai lu jusque la

COucou tout le monde en fait je viens de comprendre pqoi certaines personne comprenne pas mon pb, tout simplement car il se produit que quand l'affichage naviguateur depasse les 1024px exemple sur cette image jointe.

Merci de m'aider

Bonjour,

En fait ce que je ne comprends pas c'est où veux tu arriver ...
Ton code est assez ... particulier!
Alors un petit schéma, non?

COucou en quoi mon code est particulier?

Si ca se trouve je me goure depuis le début hein

Ce que je veux c que le footer soit tout en bas de mon naviguateur, qu'il n'y ai pas de zone blanche.

Merci

En fait, tu voudrait que ton footer se place en bas de ton navigateur quel que soit la taille de l'écran.
Il existe une commande css du genre min-height mais elle ne marche pas avec ie.
En fait, c'est le texte de ton contenu qui "pousse" ton footer vers le bas. S'il n'y a pas assez de contenu, le footer ne descendra pas jusqu'au bas de ta page.
A+
Eric

Ouaip c'est ca, je sais qu'il faut que j'utilise l'overflow et le height etc mais j'ai trop du mal ou je trouve pas les bonnes docs

Si juste vous avez une bonne docs qui explique comment mettre ca en place avec ie et ff je serais super content :

Il n'y a pas une seule doc unique. Il faut fouiller un peu sur tous les sites. Personnellement je consulte les sites suivants :
www.w3schools.com
www.pompage.net
http://openweb.eu.org

Mais avec IE je ne pense pas que tu puisses forcer le footer jusqu'au bas de page. Peut être que quelqu'un a une idée...
A+
Eric

Bonjour,

<style type="text/css">

/*------------------------------------------------------
G L O B A L  E L E M E N T S
------------------------------------------------------*/

* {
	margin: 0;
	padding: 0;
}

html, body{
height: 100%; /* Pour que la page fasse toujours 100% de la fenêtre du navigateur */
}



/*------------------------------------------------------
C O N T A I N E R
------------------------------------------------------*/

#container {
	position: relative;	/* Pour que contenair serve de référence au positionnement absolute su footer */
	margin: auto;
	width: 850px;
	background: yellow;
	height: 100%; /* Pour IE6 qui ne connait pas min-height */
la fin du contenair */
}

html>body #container { /* Pour les autres navigateurs qui intégrent min-height */
	min-height: 100%;
} 

#pageHeader {
	width: 745px;
    height: 50px;
	background: red;
	margin: auto;
	border: 1px solid #fff;
}


/*------------------------------------------------------
L E F T   C O L U M N 
------------------------------------------------------*/
#left_colon{  /* Placement de la colonne gauche  */
float: left;
width: 150px;
margin-left: 50px;
height: 400px;
border: 1px solid #fff;
background: orange;

}

/*------------------------------------------------------
menus
------------------------------------------------------*/


/*------------------------------------------------------
S U P P O R T I N G   T E X T 
------------------------------------------------------*/


/*------------------------------------------------------
F O O T E R 
------------------------------------------------------*/

#footer {
	position: absolute;	/* Pour positionner le footer au bas de la page */
	bottom: 0;
	height: 20px;
	width:468px;
	background: green;
	text-align:center;
	left: 50%;/* Centrage du footer */
	margin-left: -234px;/* Centrage du footer */ 
}
#footer a{
	color: #FFFFFF;
}



</style>

</head>



<body>

<div id="container">
	<div id="pageHeader">Header
	</div>
			
	<div id="left_colon">
	 menu

	</div>
					

		<div id="WelcomeText">
			texte
		</div>

		
		<div id="footer">
			<a href="http://validator.w3.org/check/referer" title="Check the validity of this site’s XHTML">xhtml</a>   
			<a href="http://jigsaw.w3.org/css-validator/check/referer" title="Check the validity of this site’s CSS">css</a>   
			<a href="http://creativecommons.org/licenses/by-nc-sa/1.0/" title="View details of the license of this site, courtesy of Creative Commons.">cc</a>  

			<a href="http://www.contentquality.com/mynewtester/cynthia.exe?Url1=http:%2F%2Fcsszengarden.com%2F" title="Check the accessibility of this site according to U.S. Section 508">508</a>  
			<a href="http://mezzoblue.com/zengarden/faq/#aaa" title="Check the accessibility of this site according to Web Content Accessibility Guidelines 1.0">aaa</a>
		</div>
	</div>




</body>

Merci ghost tu cartonne, je l'ai pas essayer encore mais en le lisant ca me parait logique.

Je test ca ce soir et si ca marche hop [Reglé]