Problème FOOTER

Julian Le 17 janvier 2017 à 19:26 (Édité le 25 janvier 2019 à 17:53)

Bonjour,

Je me suis lancé dans la création d'un site web, seulement j'ai quelques soucis avec mon footer : je souheterai qu'il s'affiche en bas de mes pages.

Quand je mets : position : absolute

- Lien 1
- Lien 2

On peut voir que mon footer est correct sur l'accueil, mais pas sur ma page wiki.

Sans position : absolute

- Lien 3
- Lien 4

La, mon footer est bien sur le wiki mais pas sur l'accueil...

Que faire ?

Julian

TheOldNoob Le 17 janvier 2017 à 21:52 (Édité le 17 janvier 2017 à 21:54)

Salut l'ami,

Je t'invite a lire cette explication très claire et très bien illustré sur les positions en css, tu va vite comprendre pourquoi absolute est nécessaire 😀

http://fr.learnlayout.com/position.html

Mais en gros pour faire simple, les valeur, bottom, left, right et top n'ont aucun effet sur un élément dont on a attribuer aucun positionnement car de base il est "static". Puis qu'on considère qu'un élément "static" est "non positionné.

Julian Le 18 janvier 2017 à 13:12 (Édité le 18 janvier 2017 à 13:14)

Bonjour,

Merci, mais j'ai toujours le même problème..

Quelqu'un peut m'aider ?

TheOldNoob Le 18 janvier 2017 à 19:32 (Édité le 18 janvier 2017 à 19:33)

Ok, tu a remis le position absolute? ou éventuellement essayé avec fixe ou relative?

après très franchement tes screens sont jolies, mais je peu pas testé ton code en cas de besoin...

Julian Le 18 janvier 2017 à 20:01

J'ai mis en absolute..

Mais ca cache mon div central...

TheOldNoob Le 18 janvier 2017 à 20:31 (Édité le 18 janvier 2017 à 21:28)

ah mais donc la c'est pas un problème de footer, mais un problème de margin 😀 et donc non pas dans ton footer, mais dans ton bloc "central" mais encore une fois, sans ton code je peu juré de rien

Julian Le 18 janvier 2017 à 20:32

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
   display: block;
}
body {
   line-height: 1;
}
ol, ul {
   list-style: none;
}
blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}
@font-face 
{
    font-family: "fontlight";
    src: url('../polices/font-light.otf');
}
@font-face 
{
    font-family: "montserrat-bold";
    src: url('../polices/Montserrat-Bold.ttf');
}
@font-face 
{
    font-family: "montserrat";
    src: url('../polices/Montserrat-Regular.ttf');
}
@font-face 
{  
   font-family: "fontbold";
    src: url('../polices/font-bold.otf');
}
@font-face 
{  
   font-family: "roboto-black";
    src: url('../polices/Roboto-Black.ttf');
}
@font-face 
{  
   font-family: "fontsupercell";
    src: url('../polices/font-supercell.ttf');
}
a
{
   text-decoration: none;
}
body
{
   font-family: "montserrat";
   background-image: url(../img/fond.png);
   background-attachment:fixed;
   -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
   margin-left: auto;
   margin-right: auto;
   height: 100%;
   width: 100%;
   margin-bottom: 0;
}
footer 
{
   bottom: 0;
   left: 0;
   right: 0;
}
.menu
{
   background-color: black;
   display: block;
   height: 80px;
   color: white;
   padding: 20px;
}
.menu img
{
   height: 70px;
}
.menu a
{
   display: inline;
   float: right;
   line-height: 5em;
   padding-right: 20px;
   text-decoration: none;
   color: white;
   transition: all ease-in 1s;
   font-weight: 800;
}
.menu a:hover
{
   color: #A0A0A0;
   transition: all ease-out 0.7s;
   font-weight: 700;
}
.barre_header
{
   display: block;
   height: 30px;
   background-color: #333;
   color: white;
   line-height: 2em;
   width: 100%;
}
.barre_droite
{
   width: 30%;
   float: right;
   height: auto;
}
.version
{
   text-align: center;
   float: right;
   padding-right: 10px;
   padding-left: 11px;
}
#heure
{
   text-align: center;
   float: right;
   font-size: 20px;
   padding-right: 5px;
}
.barre_infos
{
   position: absolute;
   height: 30px;
   width: 70%;
   border-right: solid 4px black;
}
.barre_infos a
{
   color: white;
   transition: all ease 0.3s;
}
.barre_infos a:hover
{
   color: lightgrey;
   transition: all ease 0.3s;
}
.contenu
{
   display: block;
   background-color: #FFF;
   height: auto;
   text-align: center;
   margin-left: 10%;
   margin-right: 10%;
   margin-top: 70px;
   margin-bottom: 70px;
   padding-top: 20px;
   padding-bottom: 20px;
   padding-left: 50px;
   padding-right: 50px;
   border: solid 4px #000;
}
.contenu img
{
   height: 200px;
   transition: all ease 1.5s;
}
.contenu img:hover
{
   transition: all ease 1.5s;
   filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
}
.bouton_tutoriel
{
   border-radius: 10px;
   border: 2px solid black;
   background-color: white;
   height: 40px;
   font-family: 'montserrat';
   transition: all ease 1s;
   font-size: 15px;
}
.bouton_tutoriel:hover
{
   border-radius: 10px;
   border: 2px solid black;
   background-color: black;
   height: 40px;
   color: white;
   transition: all ease 1s;
   font-family: 'montserrat';
   cursor: pointer;
   font-size: 15px;
}
p
{
   font-size: 20px;
}
.all_footer
{
   position: relative;
   display: block;
   right: 0;
   left: 0;
   bottom: 0;
   width: 100%;
}
.barre_footer
{
   height: 10px;
   background-color: #555;
}
.footer
{
   background-color: #333333;
   height: auto;
   width: 100%;
   padding-top: 20px;
   padding-bottom: 20px;
}
.footer p
{
   font-family: "montserrat-bold";
   color: white;
   margin-left: 10%;
   margin-right: 10%;
   font-size: 30px;
}
.footer h4
{
   font-family: "montserrat-bold";
   color: white;
   margin-left: 10%;
   margin-right: 10%;
   font-size: 20px;
}
.footer a
{
   color: white;
   transition: all ease-in 0.5s;
}
.footer a:hover
{
   color: grey;
   transition: all ease-in 0.4s;
}
.copyright
{
   background-color: #555;
   height: auto;
   color: white;
   text-align: center;
   line-height: 2em;
   width: 100%;
}

Julian Le 18 janvier 2017 à 20:33 (Édité le 18 janvier 2017 à 20:36)

La balise de mon footer est .all_footer et de mon div du milieu .contenu, il est en bas de la fenêtre, mais quand je scroll il est fixé au milieu :/

TheOldNoob Le 18 janvier 2017 à 21:31 (Édité le 18 janvier 2017 à 21:32)

Et ton html? 😀

Sinon pour évité

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var
,b, u, i, center,
dl, dt, dd, ol, ul, 
li,fieldset, form, label, legend
,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video 
{   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}

tu fait :

* {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}

Julian Le 19 janvier 2017 à 08:05

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>ClasHeures</title>
      <link rel="stylesheet" type="text/css" href="css/style.css">
      <?php
         include 'php/favicon.php';
         echo $fav;
   ?>
   </head>
   <body>
   <?php include 'php/header.php';?>
   <div class="contenu">
      <p style="font-size: 30px;">Bienvenue sur ce site !</p>
      <br><br>
      <p>Sur ce site tu pourras trouver des informations concernant le jeu Clash Royale !<br><br>Tu pourras aussi demander de l'aide sur le futur forum.</p>
   </div>
   <footer><?php include 'php/footer.php';?></footer>
   </body>
</html>

Julian Le 19 janvier 2017 à 08:06 (Édité le 19 janvier 2017 à 08:06)

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>ClasHeures - Wiki</title>
      <link rel="stylesheet" type="text/css" href="../css/style.css">
      <?php
         include '../php/favicon.php';
         echo $fav;
   ?>
   </head>
   <body>
   <?php include '../php/_header.php';?>
   <div class="contenu">
      <p style="font-size: 30px;">Bienvenue sur le wiki !</p>
      <br><br>
      <p>Il faut savoir que le jeu Clash Royale a été crée en 2016 par Supercell. Ce jeu est disponible sur iOS ou Android.<br><br>Voici donc le wiki , où l'on peut trouver toutes sortes d'informations concernant ce jeu !</p><br><br><br>
      <form method="POST" action="tutoriel.php"><input class="bouton_tutoriel" type="submit" name="bouton_tutoriel" value="Débuter sur Clash Royale"></form><br><br>
      <a href="troupes.php"><img src="../img/troupes.png"></a>
   </div>
   <footer><?php include '../php/footer.php';?></footer>
   </body>
</html>

Julian Le 19 janvier 2017 à 08:06 (Édité le 19 janvier 2017 à 19:24)

<div class="all_footer">
<div class="barre_footer"></div>
<div class="footer">
   <p>CLASHEURES</p><br><br>
   <a href=""><h4>A propos de ClasHeures</a> | <a href="">Qui sommes-nous ?</a> | <a href="">Nous contacter</a></h4>
</div>
<div class="copyright">Site créé en <?php echo date('Y')?> par Julian ('Jujudufoot'). Tous droits réservés.</div>
</div>

TheOldNoob Le 19 janvier 2017 à 20:02

Ok, j'ai copier tout ton code et créer du contenu pour remplir la div contenu sinon j'était bien embêté ^^

Donc, ma question est : A tu testé d'autre position a la place d'absolute? car moi oui, et j'ai résolut le problème comme ça 😀

http://hpics.li/1e62f01

Julian Le 19 janvier 2017 à 20:08

Oui j'ai testé mais toujours rien..

TheOldNoob Le 19 janvier 2017 à 20:57 (Édité le 19 janvier 2017 à 21:20)

Pourtant moi, quand je le passe en position relative, ça passe niquel, (a voir dans ma picture) sauf biensur si tu n'a aucun contenu, mais ton site doit avoir du contenu ^^ au pire, tu peu donné une hauteur minimum a ton .contenu (min-height: 1200px; )

En lisent ton css, je vois pas mal d'erreur, ça fonctionne, mais comme on doit être un peu des feignasse, tu peu gagné du temps. Je relis pas tout, mais voilé ce que je peu te conseiller :

left: 0;
right:0;

// c'est egale a 
width: 100%; // de plus c'est une bonne pratique

margin-left: auto;
margin-right: auto;
margin-bottom:0;

// c'est egal à

margin: 0 auto;

J'explique quand même, la valeur 0 vaux pour le top et le bottom, la valeur auto vaux pour droite et gauche.

Julian Le 20 janvier 2017 à 18:17

Merci, mais même problême... Re-regarde bien les images hein..

TheOldNoob Le 20 janvier 2017 à 21:49

ok, donc, je répète ce que j'ai dit un peu plus haut "position : relative"

Maintenant si ça va pas sur ta page et que ça ressemble a ton 3eme lien, c'est normal, il faut regardé la hauteur de ton background dans le body. Car c'est lui qui va définir la hauteur de ta page.

Tu n'a pas 213432412 possibilité, mais bien 3, Fixe, absolute ou relative

Tu peu aussi ne pas mettre de position du tout sur ton footer, et mettre du margin sur ton contenu.

Autre erreur de css, car je le trouve aller lourd pour si peu de visuel :

Tu met 8 fois color: white; et environs 10 foix font-family: "montserrat" un peu partout dans tes class et a chaque fois, c'est donc pour coloré ton text, tu peu mettre ça a la place :

html {
color : white;
font-family : "montserra";
}

Du coup, tout ce qui se trouve dans ton html aura la couleur blanche, et au besoin tu change vers une autre couleur (noir pour ton contenu)

Pour le margin et le padding pour évité ceci dans ton code :

   margin-left: 10%;
   margin-right: 10%;
   margin-top: 70px;
   margin-bottom: 70px;
   padding-top: 301px;
   padding-bottom: 20px;
   padding-left: 50px;
   padding-right: 50px;

Je t'invite a faire ceci

margin: 70px 10% 70px 10%; // donc dans l'ordre haut -> droite -> bas -> gauche 
padding: 20px 50px 20px 50px;

Maios on peu aussi faire ceci qui est encore plus cours :

margin: 70px auto; // la première valeur prend pour le haut et le bas la seconde prend la droite et la gauche et va mettre le meme espace des deux coté, donc te centré

Échange

Articles / Vidéos

Ressources