28217 sujets

CSS et mise en forme, CSS3

Positionner le footer en bas de page

Bonjour, j'ai un petit problème pour mettre un pied de page sur mon site. J'utilise une mise en forme absolute et le pied de page que je veux rajouter apparait pas du tout ou tout en haut de la page.

Comment faire apparaitre le footer correctement ?

Merci beaucoup à tous ceux qui me fileront un coup de main :d

Mon code css:


#conteneur {
	position: relative;
	width: 901px;
}

#centre {
	top: 1em;
	position: absolute;
	left: 299px;
	width: 436px;
	background-color: #FFF;
	display:block;
}

#gauche {
	position: absolute;
	top: 1em;
	left: 0;
	width: 299px;
	display:block;
}

#droite {
	position: absolute;
	top: 1em;
	left: 735px;
	width: 167px;
	display:block;
}

#footer {
	display:block;
}



Le code de ma page html

<div id="conteneur">
  <div id="gauche">
    <p id="logo"><img src="design/logo.jpg" alt="TirePneu.com" /></p>
    <div id="menu">
      <p id="menu_haut"></p>
      <div id="recherche"> Recherche
        <input type="text" />
        <img src="design/loupe.gif" alt="Rechercher" />
        <p id="sommaire">+<a href="index.php?page=accueil">Accueil</a> <br />
          +<a href="index.php?page=annuaire">Annuaire</a> <br />
          +<a href="index.php?page=annonces">Annonces</a> <br />
          +<a href="index.php?page=produits">Nouveaux produits</a> <br />
          +<a href="index.php?page=moteur">Recherche</a> <br />
          +<a href="index.php?page=contact">Contact</a> </p>
        <img src="design/barre-verte.gif" alt="barre_verte" />
        <div id="news">
          <p id="news_haut"></p>
          <p id="news_corps"><b>News</b><br />
            <img src="design/pointilles_news.gif" alt="pointilles_news" /> <br />
            Aliquam tincidunt varius tellus. Ut a sem. Integer dapibus wisi sit amet lacus. Aenean congue. Donec dapibus, est non interdum porttitor, libero est </p>
          <p id="news_bas"></p>
        </div>
      </div>
      <p id="menu_bas"></p>
    </div>
    <p class="pointilles_bas"><img src="design/pointilles.gif" alt="pointilles" /><br />
      + <a href="index.php?page=inscription">Inscription</a>
    <p class="pointilles_bas"><img src="design/barre-verte.gif" alt="barre verte" /></p>
  </div>
  <div id="droite">
    page
  </div>
  <div id="centre">
    <div id="corps_page">
      <h1>titre</h1>
      <img src="design/pointilles_centre.gif" alt="pointilles" />
    </div>
  </div>
  <p id="footer">tet</p>
</div>
le problème vient du fait, il me semble, que tes div #droite et #gauche sont positionnés en absolu et sortent donc du flux.

Il faut les mettre en relatif avec des float: left et float: right. Et aussi ajouter un 
#footer {
position: relative;
clear: both;
display:block;
border: solid 1px red;
}
j'ai fait ce que tu m'as dit LittleBlackCat mais dans ce cas là ma colonne de droite est hors champ et apparait tout à droite et ya un ascenseur horizontal.
et le footer apparait pas tout a fait en bas et chevauche du texte.
plusieurs solutions:
tu met ton footer en 
position: absolute
et positionné par rapport au bas ou a autre chose,

tu met ton footer en 
clear: both
si les menus sont positionnés grace à float (mais ça c'etait deja dans le code de LittleBlackCat)

donc voit avec des margin
Jep a écrit :
Un article à lire sur la question :
> http://www.pompage.net/pompe/pieds/
Smiley cligne


Bonjour à tous,

J'ai essayé de suivre les instructions de pompage.net, mais mon footer reste collé au contenu.

Mon code HTML


<div class="conteneur">
	<div id="banniere">
		banniere
	</div>
	<div id="menu">
		<ul class="menuhaut">
			<li><a href="">Menu 1</a></li>
			<li><a href="">Menu 2></a></li>
			<li><a href="">Menu 3</a></li>
		</ul>
	</div>
	<div id="main">
		blablabla
	</div>
	<div id="footer">
		footer
	</div>
</div>


Mon css


html, body {
height: 100%;
}

body {
margin:0;
padding:0;
}

.conteneur {
position: relative;
min-height: 100%
margin:0;
padding:0;
}

#banniere {
height:80px;
}

#menu {
}

#main {
}

#footer {
position: absolute;
bottom: 0;
}


Merci d'avance.
Modifié par Rei Itchido (27 Aug 2005 - 17:00)
Rei Itchido a écrit :


Bonjour à tous,

J'ai essayé de suivre les instructions de pompage.net, mais mon footer reste collé au contenu (ça pose pb si le contenu est trop court pour "ammener" le footer jusqu'en bas du navigateur).

Mon code HTML


<div class="conteneur">
	<div id="banniere">
		banniere
	</div>
	<div id="menu">
		<ul class="menuhaut">
			<li><a href="">Menu 1</a></li>
			<li><a href="">Menu 2></a></li>
			<li><a href="">Menu 3</a></li>
		</ul>
	</div>
	<div id="main">
		blablabla
	</div>
	<div id="footer">
		footer
	</div>
</div>


Mon css


html, body {
height: 100%;
}

body {
margin:0;
padding:0;
}

.conteneur {
position: relative;
min-height: 100%
margin:0;
padding:0;
}

#banniere {
height:80px;
}

#menu {
}

#main {
}

#footer {
position: absolute;
bottom: 0;
}


Merci d'avance.
Pas mieux :s

Je croyais que bottom (comme top, right et left) était un paramètre de position:absolute; non?

En tout cas je n'arrive pas à avoir mon footer tout le temps en bas de l'écran Smiley decu
Modifié par Rei Itchido (28 Aug 2005 - 17:20)
Je ne m'en sors pas Smiley bawling

Si je met le footer en...


.footer {
position: relative;
}


...le footer se colle à la suite de mon bloc "main". Ce qui fait que si celui-ci n'a pas beaucoup de contenu, le footer ne se retrouve pas au bas de la page (de l'écran).

http://img369.imageshack.us/img369/1170/relative2hy.gif

Si je met le footer en...


.footer {
position: absolute;
bottom:0;
}


... le footer se met bien au bas de la page (de l'écran) mais si le contenu de mon bloc "main" est trop long, mon footer chevauche le contenu pour rester en bas de l'ecran quoi qu'il arrive.

http://img369.imageshack.us/img369/9593/absolute5dy.gif

Merci de m'aider
Modifié par Rei Itchido (29 Aug 2005 - 14:02)
C'est tout à fait normal...

Je pense que le meilleur moyen d'obtenir ce que tu veux serait d'aller relire les cours sur le positionnement de blocs en css ainsi que la notion de flux.

http://openweb.eu.org/articles/initiation_flux/

Dans ton cas, tu ferais mieux de laisser le footer dans le flux. Bien sur, si tes autres blocs sont en position absolue, il faudra échapper leur hauteur..
je pense que tu 'nas pas encore assimilé ces mécanismes.

Tu peux aussi relire http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS bien sur.
Sans aller jusqu'à dire que j'ai tout compris, je pense avoir assimilé la notion de flux.

Mes 2 captures d'ecrans au-dessus je comprend leur pourquoi : en position:relative mon footer se met à la suite du flux, en position:absolute, il ne prend pas en compte le flux et se met à une position donnée. Je ne suis pas etonné du résultat.

Ma question est plutot : comment faire pour obtenir ce que je veux. Une des solutions serait de donner à mon bloc "main" une taille mini verticale de 100% (comme le préconise ce lien http://www.pompage.net/pompe/pieds/[/url]) mais je n'y arrive pas.

Merci d'avance.
Modérateur
bonjour,

en reprenant les codes de ton post du 27 aout, il te suffit de sortir ton footer du conteneur.
pour tes pages a petit contenu, il est peut-etre preferable d'indiquer une hauteur de 90 a 95% pour le conteneur et 5 a 8 % pour le footer.
ensuite pour assurer le coup tu ajoute un clear:both; au footer et tu bricole le css pour aussi indiquer le min height pour IE:
alors je te propose:
<div class="conteneur">
<div id="banniere">
banniere
</div>
<div id="menu">
<ul class="menuhaut">
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2></a></li>
<li><a href="">Menu 3</a></li>
</ul>
</div>
<div id="main">
blablabla
</div>
</div>
<div id="footer">
footer
</div>
et pour le css

html, body {
height: 100%;
}

body {
margin:0;
padding:0;
}

.conteneur {
min-height: 92%;
height:auto!important;
height:92%;
margin:0;
padding:0;
}

#banniere {
height:80px;
}

#menu {
}

#main {
}

#footer {
min-height: 5%;
height:auto!important;
height:5%;
}


voila, a tester dans ta page..et valeur des hauteurs a adapter a ton usage (a propos tu avais oublier un point virgule aprés min-height dans ton code)

a plus
Sujet clos
Aller à