18041 sujets

Questions générales et questions de débutants

Footer en bas de page même au scroll

Salut! Je suis nouveau sur Alsa!

Je m'inscris pour exposer mon problème, coller ce ***** de footer en bas de page Smiley smile ...

J'ai écumé pendant des heures et des heures les forums et autres, tenté des centaines de manières différentes mais impossible d'en trouver une qui fonctionne.
Je sais que c'est une question souvent posée et j'en suis navré!

Comment fait-on pour coller le footer en bas de page, quel que soit le contenu au dessus et que même au scroll le footer ne passe PAS par dessus mon contenu? Smiley sweatdrop

Voici le CSS de mon footer:

#footer
{
float: none;
margin: 0;
bottom: 0;
text-align: center;
position: relative;
clear: both;
margin-top: -150px;
height: 150px;
}
Salut et bienvenu à toi !

Là, avec le peu de code que tu nous as fournir, cela va être dur de t'aider...
Ta page est-elle visible sur le net ? peux-tu reproduire ta page sur Jsfiddle ou Codepen ?

Merci.
Salut Jencal!

Non ma page n'est pas visible sur le net, mais qu'est-ce que Jsfiddle ou Codepen?

Mon footer ressemble à ça:

<div id="footer">
<h3> Vous avez remarqués un problème ? </h3>

<aside>
<p> Pour signaler un problème, merci de cliquer sur le lien suivant:
<a href="mailto:****@gmail.com">Envoyez moi un mail!</a>
</p>
</aside>
</div>
Oui mais si je prend ton code html, et ton code css, et que je met sur une page jsfiddle et/ou codepen, je ne reproduirais pas ton erreur car j'ai pas tous les éléments.

Jsfiddle, ou codepen te permet dans ce cas là de partager ton travail, et plus particulièrement ton code.

Regarde la solution de Gili aussi
Modifié par JENCAL (09 Dec 2015 - 17:10)
Hello Gili!

J'étais en train d'essayer ta solution mais malheureusement ça ne fonctionne pas pour moi..
Je dois faire une erreur quelque part.

Je vais essayer jsfiddle, Jencal et je vous envoie le lien?

Merci en tout cas!
Alors je reprend ton code ici, car sur Jsfiddle cela ne fonctionne pas, trop d'erreur de syntaxe.

<!DOCTYPE html>
<html>

  <!-- Le titre -->
  <?php include("include/head.php"); ?>
    <title>Images</title>

    <div id="wrap">

      <body>

        <!-- Le menu -->
        <?php include("include/menus.php"); ?>



          <!-- L'en tête -->
          <header>
            <h1>Images!</h1>
          </header>

          <br />
          <?php include("include/DateFest.php"); ?>
            <br />

            <div id="main" class="clearfix">

              <!-- Le corps -->
              <section>
                <h2>Galerie photo</h2>
                <h3> Toutes les meilleures images du festival sont là!</h3>
                <h4> Vous pouvez publier aussi vos propres photos ici: <a href="imagesFans.php" title="Publier vos photos"><strong>ici</strong> </a></li> 
			</section>
		
		</div>
		
		</body>
		
	</div>
	
	<!--Le pied de page -->
	<div id="footer">
		<h3> Vous avez remarqués un problème ? </h3>
		
	<aside>
		<p> Pour signaler un problème, merci de cliquer sur le lien suivant:  
		<a href="mailto:******@gmail.com">Envoyez moi un mail!</a>
		</p>
	</aside>
	</div>
		

</html>


Pour rappel, la structure d'une page est comme suit : 

<!DOCTYPE>
<html>
  <head>
  </head>
  <body>
  </body>
</html>


Dans ton code, tu as des <div> APRES le body... je ne comprend pas. Il faudrait que tu reparte sur de bonne base, que tu suivent des tutos pour apprendre comment imbriqués correctement des balises HTML.


EDIT : je vais pas reprendre toutes les erreurs mais par exemple 

<section>
                <h2>Galerie photo</h2>
                <h3> Toutes les meilleures images du festival sont là!</h3>
                <h4> Vous pouvez publier aussi vos propres photos ici: <a href="imagesFans.php" title="Publier vos photos"><strong>ici</strong> </a></li> 
			</section>


Tu ferme une balise </li> qui ne s'ouvre pas ?! et une <h4> pas fermer. d'où un comportement plus qu'anormal.
Modifié par JENCAL (09 Dec 2015 - 17:33)
Si tu utilises le CSS/HTML du lien que je t'ai donné et que cela ne fonctionne pas c'est que tu as d'autres styles qui viennent overrider tout ça. Ou comme dit JENCAL une structure HTML chelou.

Prend une page vide, applique le code du site que je t'ai donné et ça ira nickel ^^. Après ajoutes tes autres éléments.
Hello merci à tous les deux!

Je sais mon code est brouillon ça fait longtemps que j'avais pas codé..
Je vais clarifier ça et rendre tout beau tout propre!

Je me suis pas mal embrouillé en cherchant des solutions sur d'autres sites malheureusement et j'ai pas nettoyé..

Je vais essayer ta méthode Gili et je reviens ici vous faire part du résultat!
Sujet clos
Aller à