28172 sujets

CSS et mise en forme, CSS3

[Résolu] Ce pied de page qui ne m'obéit pas...(Je veux qu'il reste e

Bonjour,

Me voici avec un problème qui n'est pas nouveau, et pourtant, même après avoir parcouru de nombreux sujets semblables je ne suis pas tirée d'affaire.

Je souhaite que mon pied de page reste en bas de la fenêtre même si le contenu qui le précède ne prend pas toute la hauteur. Par contre si on réduit la hauteur de la fenêtre, il ne faut pas qu'il remonte au point de recouvrir le contenu, mais s'arrête en dessous ; je ne veux pas qu'il soit "fixed".

J'avais trouvé un tuto avec une démo qui correspondait pile poil à ce que je cherchais, juste ici, et je l'ai donc appliqué.

Ma structure html à l'intérieur du <body> donne ceci :
<div id="superglobal">
<div id="global">
(ici mon en-tête, menu etc...)
<div id="container">
(car j'utilise Bootstrap)
</div> <!-- fin container -->
</div><!-- fin global -->
<footer>
</footer>
</div><!-- fin div superglobal -->


Et voici mon CSS d'après celui du tuto :
*{
	margin: 0;
	padding: 0;
}

html{
	height: 100%;
}

body {
    font-family:calibri,verdana,tahoma,sans-serif;
    min-height: 100%;
    max-width:100%;
    font-size:15px;
}

    /*superglobal et global IMPORTANTS pour le placement du footer*/
#superglobal{
     position : relative;
     min-height: 100%;
}

#global{
   position: relative;
    min-height: 100%;
    width:80%;
    max-width:100%;
    margin:0 auto;
   padding-bottom: 40px;
    border-top : 5px solid #339999;
}

    /*div dans lequel s'applique la grille bootstrap*/
.container
{
    width:100%;
    max-width:100%;
    height:100%;
}


J'essaie bien de forcer à l'aide de "min-height" mais rien à faire, mon footer a décidé de se placer toujours en dessous de mon contenu principal, donnant donc l'impression de flotter sur quelques pages avec peu de texte.
Quand j'ajoute des bordures colorées à mes div pour distinguer leur taille et position (dommage je suis sous XP au bureau et l'aperçu en direct de Brackets ne donne rien), je constate que <body> prend bien toute la hauteur, mais pas mon "superglobal"! Auquel je donne pourtant une hauteur de 100%. Mais il englobe juste le contenu et s'arrête en dessous, donc le <footer> ne risque pas d'aller plus bas. Finalement le souci viendrait plus du <div> que du pied de page ?

Merci d'avance si vous pouvez déceler ce qui cloche... Smiley biggrin
Modifié par lumya (04 Jun 2014 - 14:25)
Modérateur
Bonjour,


Juste au passage.... il n'y a pas le css pour ton footer... c'est un oubli ?

#pied{
	position: absolute;
	bottom: 0px;
	height: 50px;
	width: 100%;
	background: url('images/bg_pied.png') repeat-x;
}
Bonjour,

Ah oui zut je suis désolée, il est à l'autre bout de la feuille de style et je l'ai zappé. Merci de me l'avoir fait remarquer!

J'ai utilisé les balises <footer> (je ne sais pas si ça joue plutôt qu'un div avec id mais bon...) et mon CSS est celui-ci : 

footer
{
    position: absolute;
	bottom: 0;
	width : 80%;
    left : 10%;
    margin-top:5px;
    color:#185c5c;
    background-color : #66ccff;
    text-align:center;
}


Edit : Hello pik_at, désolée aussi j'ai une connexion en bois là et le temps que j'essaie de répondre à _laurent, je n'ai pas vu ton message ! Je vais jeter un coup d'oeil, merci.
Modifié par lumya (04 Jun 2014 - 14:50)
J'ai changé pour height:100%; et...Ohmondieu ça marche. C'est trop bête, je bidouillais depuis tout à l'heure et je crois même que j'avais ajouté un "height:100%;" au body mais sans enlever le "min-height", j'étais pourtant si près du but Smiley confused
Enfin, je vous remercie d'avoir été réactif et d'avoir trouvé aussi vite la ligne qui posait problème, moi je n'y voyais plus très clair ! Et je garde les liens dans mes favoris au cas où Smiley cligne
Je crois que ça marchait au tout début et puis j'ai dû y retoucher et tout gâcher je ne sais pas pour quelle raison Smiley rolleyes Merci, je marque le sujet comme résolu Smiley ravi
(oh la la je suis pas douée, ma connexion fait des siennes et j'ai posté deux fois...Un modo peut supprimer ce message s'il le souhaite ! )
Modifié par lumya (04 Jun 2014 - 15:00)
Sujet clos
Aller à