Forum : probleme de footer avec css

Salut,
Si tu pouvais décrire ton problème ça serait plus pratique ^^
Et je vois dans le css que tu utilise bottom left right sans position..

Carouge10

salut,
enlever les margins et padding par défaut

Deets

Auteur

je suis desole , j'aimerais bien positionner le footer en bas de la page HTML. pas fixe meme si je scroll en haut .

Deets

Auteur

@Carouge10 , malheureusement toujours le meme resultat .

Carouge10

code actualisé ?

Deets

Auteur

*{
  margin: 0px;
  padding: 5px;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  text-decoration: none;
}

floriqn

position: absolute 
bottom: 0

Deets

Auteur

@floriqn Toujours meme resultat , je ne sais pas ou l'erreur .

floriqn


footer {
   position : absolute;
   bottom: 0;
   width: 100%;
}

démo : https://codepen.io/floriqn/pen/GREgwjX

Si tu n'as pas de règle alternative cela suffit. Il doit bouger là non ? sinon donnes le code la page html et ton css.

Deets

Auteur

Header :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tableau de board</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div id="header">
      <a href="main.php"><img src="image/transdev-fr image logo.png" alt="transdev-fr"></a>
      <div class="btn-group" style="float:right;">

        <a href="displayEvent.php" class="btn btn-journal"><i  class="icon-star icon-white"></i> Journal </a>

      <a href="main.php" class=" btn btn-user"><i  class="icon-cog icon-white"></i> jpeliteiro</a>
      <a href="app.html" class=" btn btn-user"><i  class="icon-cog icon-white"></i> Meteo</a>

      <a href="log.php" class=" btn btn-user" >Logout</a>

    </div>

    </div>

    </div>

Footer

</div>
<footer>
<div class="footer-copyright">
      <p>Copyright &copy;2021 TransDev</p>
  </div>
</footer>
</body>
</html>

pour le contenu il est tellement long , je partage un lien codepen

https://codepen.io/D33ts/pen/WNObYdN

floriqn

et ton css ?

Deets

Auteur

*{
  margin: 0px;
  padding: 5px;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  text-decoration: none;
}

#header a{
  text-decoration: none;
  align-items: center;
   justify-content: center;
}

.btn{
  text-align: center;

  border: 1px solid #928a8a;
}

.btn-journal{
  background-color: rgb(238, 49, 49);
  padding: 5px;
  align-items: center;
  border-radius: 5px;
  color:cornsilk;
  box-shadow:  rgb(148, 142, 142);
  text-align: center;
}

.btn-user{
  background-color: rgb(111, 179, 221);
  padding: 5px;
  border-radius: 5px;
  color:cornsilk;
  text-align: center;
  box-shadow:  rgb(151, 144, 144);
}

.big img{
 width: 20%;
 height: 20%;
 display: block;
 margin: auto;
 cursor: pointer;

}

.big h1{
  width: 90%;
  display: block;
  text-align: center;
  font-family: 'Karla', sans-serif;
  font-weight: bold;
  color: #317eac;
 font-size: 28px;
 margin: 50px;
}

.login{
  border: 2px solid #0049;
  width: 15%;
  align-items: center;
  display: block;
  margin: auto;
  border-radius: 3px;
  box-shadow: inset 0 0 1em #f2f2f2 , 0 0 2em #000;
  background-color: rgb(226, 130, 149);
  bottom: 20px;
}

.login button{
  display: flex;
  margin: 40px;
  background-color: rgb(54, 133, 235);
  color: #f2f2f2;
  border-radius: 10px;
}

i {
  color: #669FAB;
  font-size: 24px !important;
  vertical-align:middle;
}

.backmain {
  min-width: 100px;
}

footer {

  position : absolute ;
   bottom: 0;
   width: 100%;
  background-color: cadetblue;

}

footer p{
  text-align: center;
  justify-content: center;
    padding: 5px;

}

floriqn

Ton problème c'est quoi enfait ? Ton footer ne reste pas en bas quand tu scroll c'est ca ? Si c'est le cas tu rajoutes :

body {
   position: relative;
}

footer {
   position : absolute ;
   bottom: 0;
   width: 100%;
   background-color: cadetblue;
}

Démo: https://codepen.io/floriqn/pen/WNObYVw

Deets

Auteur

je ne veux pas de l'espace a droite , a gauche et en bas du footer

floriqn

Alors va falloir être un peu clair la prochaine fois et réflechir un peu. Tu as tapé :

*{
  margin: 0px;
  padding: 5px;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  text-decoration: none;
}

Si tu mettais un padding à 0 ?

Deets

Auteur

je l'ai deja essaye , peut etre j'ai mis le footer dans un autre div qui ne lui appartient pas

floriqn

C'est ici qu'il faut le modifier , n'ajoutes pas un padding à zéro dans le footer ca ne sert a rien. J'ai repris ton code (sans le php) et ca fonctionne.

*{
  margin: 0px;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  text-decoration: none;
}

Deets

Auteur

oui c'est exactement ce que j'ai modifie

floriqn

Je sais pas comment tu t'y prends mais bon, repars de mon codepen et tu n'auras qu'à ajouter ton php :

https://codepen.io/floriqn/pen/MWoYZeE

Pour info dans le codepen c'est l'intérieur de la balise body

MickaelTD

Yo ta juste à faire ça

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.container {
  flex: 1;
}

Sinon y'a quelques erreur sur ton code css, je sais pas si tu es en phase d'apprentissage ou non mais y'a des trucs ça ne peut pas fonctionner.

footer p{
  text-align: center;
  justify-content: center; <===== sans avoir mis un display flex, ça fonctionnera jamais, tu dois d'abord déclaré un element flex pour le manipuler
    padding: 5px;

}

.login{
  border: 2px solid #0049;
  width: 15%;
  align-items: center; <=== idem
  display: block;
  margin: auto;
  border-radius: 3px;
  box-shadow: inset 0 0 1em #f2f2f2 , 0 0 2em #000;
  background-color: rgb(226, 130, 149);
  bottom: 20px;
}

#header a{
  text-decoration: none;
  align-items: center; <= idem
   justify-content: center; <= idem
}

.btn-journal{
  background-color: rgb(238, 49, 49);
  padding: 5px;
  align-items: center; <= idem
  border-radius: 5px;
  color:cornsilk;
  box-shadow:  rgb(148, 142, 142);
  text-align: center;
}

manibossofficiel

Esce que tu as vues les tutoriels sur le CSS de Grafik

probleme de footer avec css

21 réponses