Bonjour à tous,
J'ai toujours eu des problèmes avec les footer.
Ici, le footer chevauche le bloc principal du site.
J'ai arraché plusieurs fois les cheveux, j'ai pu résoudre le problème.
Voilà le code:
Par avance, merci.
J'ai toujours eu des problèmes avec les footer.
Ici, le footer chevauche le bloc principal du site.
J'ai arraché plusieurs fois les cheveux, j'ai pu résoudre le problème.
Voilà le code:
/**** HTML ***/<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR" prefix="og: http://ogp.me/ns#" class="no-js"> <head> <meta charset="utf-8" /> <meta name="robots" content="noodp" />
<link rel="stylesheet" href="clement.css">
<meta name="viewport" content="width=device-width, initial-scale=1" /> <title>CLEMENT</title>
</head> <body> <div class="pryser"> <div class="gerks-pr"> <section id="modal">
</section>
<div class="container"> <div class="row" id="text">
<div class="columnav">
<h2>CLEMENT</h2>
<p>Site Internet personnel de Clément. Futur développeur web.<br>
Je vous souhaitons la bienvenue, <br>au plus vite, vous trouverez sur ce site Internet de nombreuses informations.<br>
<p></p>
CLEMENT, depuis Bamako - Mali.
</p>
<a class="btn btn-primary" data-toggle="modal" data-target="#contact">Me contacter</a>
</div> </div>
</div>
</div>
<footer class="nasa">Copyright @ CLEMENT </footer> </div>
</body> </html> /*** CSS ***/
html,body{ height: 100% }
body{ font-family:'Merriweather Sans', 'Ubuntu', 'Maven Pro', 'Open Sans'; padding-top:30px;margin:0;font-size:16px;text-align:center; }.pryser{min-height:100%;width:100%; margin:0;padding:0;position:relative;} .gerks-pr{padding-bottom:30px;} .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;padding-bottom: 2px; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } } .btn-primary{ padding:10px 20px 10px 20px; background-color:transparent; border:1px solid #000; border-radius: 4px; margin-top:3px;
}
.btn-primary:hover{ transition-duration:1s; background-color:rgba(0,0,0,0.4); border:1px solid #000; } .nasa{position:absolute;height: 100px;bottom: 0;left: 0;right: 0;border: 1px solid transparent;background-color:rgba(0,0,0,0.3) } @media (min-width: 768px) { .nasa{ border-radius: 4px; } } .nasa{ bottom: 0; margin-bottom: 0; border-width: 1px 0 0;
}
Par avance, merci.
