probleme de footer avec css

Par Deets, il y a 4 ans

Les bases HTML/CSS

Salut tous le monde , j'espere que vous allez bien .
j'ai un petit probleme avec le footer de ma page HTML
l'image : https://imgur.com/a/si8z58a
Voici le code CSS :

footer { width: 100%; bottom: 0px; left: 0px; right: 0px; background-color: cadetblue; align-items: center; }

Code HTML

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

21 réponses

Benji-devw, il y a 4 ans

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, il y a 4 ans

salut,
enlever les margins et padding par défaut

Deets, il y a 4 ans

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

Deets, il y a 4 ans

@Carouge10 , malheureusement toujours le meme resultat .

Carouge10, il y a 4 ans

code actualisé ?

Deets, il y a 4 ans
*{ margin: 0px; padding: 5px; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; font-size: 14px; text-decoration: none; }
floriqn, il y a 4 ans
position: absolute bottom: 0
Deets, il y a 4 ans

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

floriqn, il y a 4 ans
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, il y a 4 ans

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, il y a 4 ans

et ton css ?

Deets, il y a 4 ans
*{ 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, il y a 4 ans

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, il y a 4 ans

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

floriqn, il y a 4 ans

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, il y a 4 ans

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

floriqn, il y a 4 ans

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, il y a 4 ans

oui c'est exactement ce que j'ai modifie

floriqn, il y a 4 ans

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, il y a 4 ans

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, il y a 4 ans

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