[Résolu] Footer en bas de page - pied de page bonne position par FélixLefebure - page 1

Bonsoir ,

mon pied de page s'affiche correctement sous mobile c'est à dire coller au bas de page.

Par contre impossible de le coller en grand écran.

J'ai essayer les position fixed et absolute mais elles me causent problême sur l'affichage mobile.

Mon code css

.video{
 border-radius: 60px;
 padding: 0;
 margin: 0 ;
 margin-right: 1px;
 ;


}
@media (max-width: 900px) {
 .video{
 border-radius: 60px;
 padding: 20px;
 margin: 0 ;
 margin-right: 1px;
max-width: 80%;


}
}

body {
position: relative;
text-align: center;
background-size:  cover;
background-repeat: no-repeat;
text-align: center;
}

@font-face {
font-family: "land";
src: url('land.ttf');
}

@font-face {
font-family: "slim";
src: url('slim.ttf');
}





p{
text-align: center;
font-size: 30px;
font-family: land;
}

h1{

color:#29FF6A;text-shadow: black 0.1em 0.1em 0.2em;
font-style: italic;
text-align: center;
font-family: teton;
}




.flex-center {
  width: 100%;
  min-height: 20%;
  
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.icon-3d {
  padding: 10%;
  -webkit-animation: icon3d 200ms 10;
  animation: icon3d 200ms 10;
  
}
.icon-3d:hover {
  -webkit-animation: icon3d 200ms infinite;
  animation: icon3d 200ms infinite;
}

@keyframes icon3d {
  0% {
    text-shadow: 5px 4px #f44336, -5px -6px ;
  }
  25% {
    text-shadow: -5px -6px #f44336, 5px 4px ;
  }
  50% {
    text-shadow: 5px -4px #f44336, -8px 4px ;
  }
  75% {
    text-shadow: -8px -4px #f44336, -5px -4px ;
  }
  100% {
    text-shadow: -5px 0 #f44336, 5px -4px ;
  }
}



.cookieAcceptBar {
  display:none;
  position: relative;
  top: 50%;
  left:auto;
  right: auto;
  text-align: center;
  background-color: #333;
  color: #fff;
  padding: 20px 0;
  z-index: 99999;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.cookieAcceptBar a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

button {
  cursor: pointer;
  border: none;
  background-color: #2387c0;
  color: #fff;
  text-transform: uppercase;
  margin-top: 10px;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
}

footer {
  width: 100%;

  bottom: 0;
  background: #16222A;
  background: -webkit-linear-gradient(59deg, #3A6073, #16222A);
  background: linear-gradient(59deg, #3A6073, #16222A);
  color: white;
 }

footer a {
  color: #fff;
  
  transition-duration: 0.2s;
}

footer a:hover {
  color: #FA944B;
  text-decoration: none;
}

.copy {
  font-size: 12px;
  padding: 10px;
  border-top: 1px solid #FFFFFF;
}

.footer-middle {
  padding-top: 2em;
  color: white;
}


/*SOCİAL İCONS*/

/* footer social icons */

ul.social-network {
  list-style: none;
  display: inline;
  
  padding: 0;
}

ul.social-network li {
  display: inline;
  margin: 0 5px;
}

<?php
session_start();

error_reporting(E_ALL ^ E_DEPRECATED); 


$fichier = ("ex3.txt");
$contenu = file($fichier);
$compte = $contenu[0] + 1;
$fp = fopen($fichier , "w");
fputs($fp , (string)$compte);
fclose($fp);
require "localization.php";


?>

<!DOCTYPE html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
<style type="text/css">@import url('style2.css?900') screen;</style>

<html>



<meta name="google-site-verification" content="ZyJ9ZErPDJJ54YpcjeN8aFtIIasQW8LKLXCcoBvMm1Y" />
<header><link rel="icon" type="image/ico" href="favicon.ico" />
<title><?php echo _("Satyr Glass Artisan verrier Français"); ?></title>
<meta name="description" content="<?php echo _("Satyr Glass vous propose différents articles en verre soufflé fait main, articles pour fumeurs, pendentifs, colliers et bagues pour hommes et femmes."); ?>" />
<link rel="stylesheet" href="./includes/reset.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'><link rel="stylesheet" href="./style.css">

</header>


<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="demo.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<?php include("includes/menu.php"); ?>

</head>

<body>



<article>
<h1><?php echo _("Bienvenue chez Satyr Glass"); ?></h1>
</article>


<article>
<div id="cookieAcceptBar" class="cookieAcceptBar">
  <?php echo _("En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies 🍪 ! "); ?><br> <button id="cookieAcceptBarConfirm" class="btn btn-success"><?php echo _("Allez pourquoi pas"); ?></button>
</div>
</article>


<article>
<iframe class="video" width="500" height="384" src="https://www.youtube.com/embed/sLtWVRQQDwc?rel=0&player=html5" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</article>
</body>


      

<footer>
	<div class="clear" style="clear:both"></div>
	<footer class="mainfooter" role="contentinfo">
  <div class="footer-middle">
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-sm-6">
        <!--Column1-->
        <div class="footer-pad">
          <h4>Information</h4>
          <ul class="list-unstyled">
            <li><a href="#">à propos de nous</a></li>
            <li><a href="https://www.satyr-glass.fr/Confidentialite.php">Politique de confidentialité</a></li>
            <li><a href="https://www.satyr-glass.fr/Conditions.php">Conditions générales</a></li>
            </ul>
        </div>
      </div>
      <div class="col-md-3 col-sm-6">
        <!--Column1-->
        <div class="footer-pad">
          <h4>Service Clients</h4>
          <ul class="list-unstyled">
            <li><a href="https://www.satyr-glass.fr/mejoindre.php">Nous contacter</a></li>
            </ul>
        </div>
      </div>
      <div class="col-md-3">
    		<h4>Suivez Nous</h4>
            <ul class="social-network social-circle">
             <div class="flex-center">
  
  <a href="https://www.facebook.com/Satyr-Glass-112112760235089" i class="fa fa-facebook fa-4x icon-3d"></a></i>
  <a href="https://www.etsy.com/fr/shop/SatyrGlassBoutique?listing_id=659155087&ref=shop_overview_header" i class="fa fa-etsy fa-4x icon-3d"></a></i>
  
  
</div>
            </ul>				
		</div>
    </div>
	<div class="row">
		<div class="col-md-12 copy">
			<p class="text-center">&copy; Copyright 2018 - Satyr Glass  All rights reserved.</p>
		</div>
	</div>
	</div>
</div>








<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js'></script><script  src="./cookie.js"></script>


<body background="mak1.jpg">
</footer>


</html>

un grand merci

FélixLefebure

5 avril 2020 à 1:09:21

AbcAbc6

5 avril 2020 à 1:50:45

Bonjour, passer votre code html au validateur pour voir et corriger vos erreurs => https://validator.w3.org/

Vous devez impérativement respecter la hiérarchie du document tel que voici un document minimum :

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
<!--votre contenu-->
    </body>
</html>

Il ne peut y avoir qu'un <body> et un </body> dedans tout votre contenu.

Rien ne peut être entre le doctype et le <html> excepté des commentaires, rien ne peut être entre le <html> et le <head> excepté des commentaires.

Donc les lignes 20 à 23, sont à déplacer dans le <head>, la ligne 20 est doublon avec la L21 d’où L20 à supprimer.

La balise <header> est une balise de sectionnement de contenu et ce place donc avec le contenu dans le <body>, donc suppression de cette balise en L30 et L36.

Pour quelles raisons un footer dans un footer?? cela n'a pas de sens. Supprimer une des deux balises.

D'autre erreurs en page d'accueil => https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.satyr-glass.fr%2F

En CSS vous indiquez un width: 100% sur la balise <footer> ce qui est une mauvaise pratique, pas nécessaire d'indiquer cette propriété car un block prend la largeur de sont parent. Lire https://raphaelgoetter.wordpress.com/2011/11/30/width-100-tu-es-le-mal/

Corriger d'abord ceci et une fois votre code valide (c'est à dire syntaxiquement correct) et sémantiquement correct on pourra alors regarder le CSS. Pas avant.

Footer en bas de page

pied de page bonne position

Footer en bas de page

Supprimer

Modérer

Signaler le message aux modérateurs