[css/xhtml ] aide pour un pied de page

[kyro]

bonsoir a tous , j'ai besoin d'un peu d'aide c'est surement con mais je seche !

je cherche a afficher un texte en bas de page qui sera touojurs en bas de page ( la page passe dnas l'ecran donc rien de déroulant ) et tout cela bien sur qui serai toujours en bas pour toutes les resolution existant!

[kyro]

resolu avec

#footer {

position:absolute;

bottom:0;

mais j'arrive plus a le centrer comment faire ?

[Yangzebul]

marges négatives :

#footer {
 margin: 0 0 0 -400px;
 width: 800px;
 position: absolute;
 bottom:0;
 left: 50%;
}

Bien sûr en adaptant la taille de ton footer.

[kyro]

sa me donne le resultat esonté en 1024*768 mais sera il le meme sur 1280*1024 ou plus haut ?

[Yangzebul]

Oui, tant que ta marge correspondras à cette formule :

marge = -1*(largeur/2)

[kyro]

et sinon ya moyen de faire en sorte que si jamais la fenetre est trop petite de mettre un scroll ?

du genre en 800*600 ma page est trop grosse pour etre affiché et j'ai un image qui se superpose sur le footer :/

[Yangzebul]

Ha bah faut savoir, au début tu disaisque t'as page tenait sur l'écran.

Si tu veux que ton footer soit tout simplement sous ton contenu, il ne faut pas utiliser position absolute car cela retire ton bloc du flux courant. Il vaut mieux s'orienter vers une solution de type "margin : 0 auto;".

Après si tu veux un comportement complexe du genre :

- si ma page tient dans la fenêtre, afficher le footer en bas de la fenêtre

- sinon afficher mon footer en bas de la page

Il faut obligatoirement utiliser du javascript pour tester la condition et attribuer le style en conséquence.

[corven]

En effet, après si tu ne veux pas utiliser de JS (beurk ... !) tu peux faire en sorte que ton footer se colle toujours en bas de ta page, si ta page rentre dans l'écran le footer ne sera pas collé en bas de l'écran mais en bas de page, idem si ta page est plus grande que l'écran.

Là il te faut une architecture plus complexe déjà. (que je pourrais te donner dès que j'ai 5min ... un collègue m'attend pour coder là )

[kyro]

bah si ta du temps a faire sa j'ai rien contre :)

[corven]

Alors, avant d'aller se restaurer pour ensuite faire une grosse partie de la nuit code ... rien de tel qu'encore un peu de code

HTML

<div id="global"> <!-- Conteneur pour centrer le site -->
<div id="all">

	<div id="header"></div>	

	<div id="menu"></div> <!-- C'est la colonne de gauche, mais je la nomme comme ça, mon collègue l'ayant nommé comme ça :/ -->

	<div id="contenu"></div>

	<div id="footer"></div>

</div>

</div>

CSS

/************************** Propriétés générales */
/*************************************************/
body {
margin: 0px;
padding: 0px;
text-align: center;
height:100%; /* Pour régler le problème de sélection de texte sous IE */
}

div#global {
width: 775px; /* Largeur total de ton site */
height: auto;
margin-left: auto;
margin-right: auto;
text-align: left;
}

/************************** Header */
/**********************************/
div#header {
width: 775px;
height: 153px;
position: relative;
}

/************************** Blocs généraux */
/*******************************************/
div#all {
height: auto;
width: 775px; /*Largeur totale de ton site */
position: absolute;
}

div#menu {
height: auto;
width: 160px; /*Largeur de ta colonne de gauche*/
position: relative;
float: left;
}

div#contenu {
height: auto;
width: 605px;
margin-left: 160px; /*Largeur de ta colonne de gauche*/
}
*html div#contenu{
width: 602px; /*Correction d'un décalage de IE, je cherche toujours un autre moyen*/
}

/************************** Footer */
/**********************************/
div#footer {
width: 775px;
height: 80px;
position: relative;
float: left;
}

-->

J'ai changé quelques mesures donc je ne suis pas certains que cela fonctionne, fait un test si ça marche pas contacte moi par MP (je ne passe pas souvent dans cette section)

Maintenant si tu veux avoir 3 colonnes (colonne de gauche et de droite plus un contenu central) rajoute dans le html en dessous de <div id="menu"></div ceci :

<div id="colonne_droite"></div

Et dans ton css :

div#colonne_droite {
height: auto;
width: 160px; /*Largeur de ta colonne de droite*/
position: relative;
float: right;
}

Ainsi que peut être retoucher l'exception pour ie en :

*html div#contenu{
width: 599px;
}

[kyro]

je veux un truc tellement simple que je veux juste un truc avec un footer lol

[corven]

Oui je sais ... mais si tout le reste au dessus n'a pas les position qu'il faut ton footer ne sera pas là où tu voudrais qu'il soit ...