Footer capricieux
Bonjour à tous et à toute,
J'ai fais plusieurs versions de mes sites d'essaie, et j'essaye de m'améliorer sans cesse. Cependant, je viens de m'apercevoir sur mon nouvel écran que les sites ont tous le même problème; et comme je suis dans ma période de question, j'en profite.
En gros, mon footer est habituellement bien collé en bas, quand la page à le contenu suffisant. Par contre, dès que la page est plus petite que l'écran eh bien mon petit footer se soulève... Pour palier au problème je met un "bottom:0 et position:fixed" mais c'est un peu de bricolage pour le coup, et les petits écrans risquent d'être dérangés...
footer{
font-weight: bold;
height: 30px;
text-align: center;
color: #000000;
width: 100%;
margin: 30px 0px 0px 0px;
padding-top: 12px;
background: #F2F2F2;
display: inline-block;
bottom: 0px;
position: relative;
*z-index: 999;
box-shadow: 2px 2px 5px 3px #DDDDDD;
}Avez-vous une bonne idée ? J'ai pensé au media query mais je vois pas trop comment faire.
Merci et cordialement,
9 réponses
Tu as plusieurs solutions, je te mets ci-dessous une simple. Essaie-là et dis-moi. Si ça ne va pas, je te proposerai autre chose. Merci **Première méthode simple (HTML + CSS :** Ce n’est vraiment pas compliqué. Il y a deux étapes : la structure HTML et la feuille de style (CSS). [u]- D’abord la structure HTML :[/u]** [code] ‹div id="container"› ‹div id="header"›L'en-tête de la page‹/div› ‹div id="content"›Le contenu principal.‹/div› ‹div id="footer"›Ici c'est le pied de page.‹/div› ‹/div› [/code] [u]- Et finalement la feuille de style (CSS)[/u]** [code] html, body { margin:0; padding:0; height:100%; } #container{ min-height:100%; position:relative; } #content{ padding:10px; padding-bottom:60px; } #footer{ position:absolute; bottom:0; width:100%; height:60px; background:#6cf; } [/code] Pour IE 6 et versions antérieures : Tu ajouters, à la fin de la section de ta page HTML ceci : [code] ‹!--[if lte IE 6]› #container{ height:100%; } ‹![endif]--› [/code] -------------------------- Bonne réception, gFan
hello,
tu fais d'abord une div container à 100% height, dans laquelle tu viens insérer ton footer...
<style>.container{height:100%}</style>
<div class="container">
<footer>Test pour voir si le footer s'affiche bien en bas malgré la taille de la page.</footer>
</div>Ne fonctionne pas.
je t'avais donné juste les grandes, faut compléter tes styles position : relative; etc ...
J'ai essayé avec
<style>container{height:100%; position: relative; bottom:0px;}</style>
<div class="container">
<footer>Test pour voir si le footer s'affiche bien en bas malgré la taille de la page.</footer>
</div>Et pleins d'autres choses, mais c'est comme si le <footer> dirigeait le container. Dans le sens que si le footer est a 10px du haut, le container sera a 10px du haut. Le container se laisse gérer par le <footer>...
Ecoute, j'ai essayé et ça fonctionne vraiment bien :
html :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Footer Capricieux</title>
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 6]>
#container{
height:100%;
}
<![endif]-->
</head>
<body>
<div id="container">
<div id="header"><h1>L'en-tête de la page</h1></div>
<div id="content">Le contenu principal.</div>
<div id="footer">Ici c'est le pied de page.</div>
</div>
</body>
</html>et le CSS :
html, body {
margin:0;
padding:0;
height:100%;
}
#container{
min-height:100%;
position:relative;
}
#content{
padding:10px;
padding-bottom:60px;
}
#footer{
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#6cf;
}le lien pour voir le résultat :
http://puu.sh/aTsme/017edd5c77.png
Si ça ne va toujours pas, colle ton code ici.
bien à toi,
gFan
J'ai pas mal chipoté, il y avait des class qui se contredisaient dans mon code, voilà la raison du "pourquoi ça ne fonctionne pas". Là c'est niquel, merci beaucoup !