28220 sujets

CSS et mise en forme, CSS3

[Résolu] Pied de page qui s'arrête à la partie visible de la fenêtre

Bonjour à tous,

j'ai tenté d'adapter le tutoriel de pompage pour lespieds de page exemple 3 à ma page html.

Le problème c'est que quand je l'intégre à mon contenu et mise en page déjà effectuée, le pied de page s'arrête au bas de la surface visible de l'écran.

Voir le problème

Ca fait deux jours que je suis dessus (je débute en CSS je sais que je dois avoir beaucoup d'incohérences dans le codage) je n'arrive pas à situer d'où vient le problème. Je sias que cela vient bien de ma structure car en rajoutant du contenu dans l'exemple de pompage, le footer se trouve bien en bas de la page quand on scrolle.

Si quelqu'un pouvait jeter un coup d'oeil ça serait super sympa. ++
Modifié par tom_sawyer (12 Dec 2005 - 16:26)
Bonjour Octopussy

voici mon code css


html, body {
height: 100%;
}

body {
margin: 0;
padding: 0;
font: 12px/1.5 verdana, arial, helvetica, sans-serif;
}

#container {
position: relative;
min-height: 100%;
height: 100%;
voice-family: "\"}\"";
voice-family: inherit;
height: auto;
}

html>body #container {
height: auto;
}

#content {
padding: 0px;
background-color: #a6c;
padding-bottom: 48px;
}

#footer {
position: absolute;
bottom: 0;
padding: 10px;
background-color: #609;
width: 75%;
}

#footer h1 {
color: #fff;
padding-bottom: 0;
}

.partie1
{
display:inline;
}

.bloc1
{
position:absolute; top : 0px;
background-color: blue;
height: 480px;
width: 362px;
float: left;
margin-left: 0px;
}

.bloc2
{
position:absolute; top : 0px; left: 362px;
background-color: red;
height: 480px;
width: 438px;
float: left;
margin-left: 0px;
}

.bloc2 p
{
color:#FFF;
}

.bloc2 h2
{
color:#FFF;
}

.partie2
{
clear:left;
padding-top:10px;
padding-left:10px;

}
.logo
{
float:left;
width: 200px;

}
.actu
{
float:left;
padding-left:150px;
width: 480px;

}
.actu p
{
text-align:justify;
font-size: 13px;
}

.menu
{
clear:both;
position:absolute;
top:599px;
width: 277px;
}

.menu a
{
text-decoration:none;
color:#666666;
}

.menu a:visited
{
text-decoration:none;
color:#666666;
}

.menu a:hover
{
text-decoration:none;
color:#000000;
}

li
{
list-style: none;
list-style-image: none;
color:#666666;
padding-bottom: 5px;
}

.menu ul
{
padding-bottom:10px;
}

.menu ul li a, ul li a:visited
{
color: #666666;
}

.menu ul li a:hover
{
color: #000000;
}


J'ai utilisé beaucoup de class là où j'aurais pu utiliser des id je suis en train de corriger ce problème de méthode. Merci pour ton aide.
Modifié par tom_sawyer (12 Dec 2005 - 13:23)
Hello,

En trifouillant ton code j'ai remarqué que ça fonctionnait en suprimant du texte dans <div class="actu">.

Visiblement c'est ça qui maintient le footer en bas de page, due à sa longueur.
Salut Hermes,

merci d'avoir jeté un coup d'oeil Smiley smile
en fait ce que je cherche à faire c'est mettre ce footer tout en bas de ma page après le texte de l'actualité qui sera un texte dynamique dont je ne maîtrise pas la longueur. Pour l'instant avec ce code mon footer se met en bas de page écran mais s'il y a un scroller vertical comme dans mon exemple il ne descend pas en bas de la fenêtre.
Modérateur
bonjour,
sans utiliser de js ou de position "absolute" + bottom , je peut te proposer de jeter un oeil a cette interface: http://gcyrillus.free.fr/wbfir/wbfr5/index.html (version courte) et http://gcyrillus.free.fr/wbfir/wbfr5/weby.html (version longue).
Le css est commenté brievement est facilement lisible.
Le principe est de positionné le pied de page apres un conteneur principal ayant une hauteur minimale de 100%,. dans lequel je place en derniers (quelque soit le contenu) un div vide(ou autre balise de ton choix) qui a la même hauteur que le pied de page . je donne au pied de page un margin-top negatif de sa propre hauteur pour le faire reapparaitre dans la zone ecran sur les pages a petit contenu. Le div vide placé en dernier dans le div conteneur permet d'eviter au footer de s'afficher sur les derniers element d'une longue page .(c'est la methode que je prefere).(cette methode est si ce n'est similaire , quasi identique a celle de "maninblue", qui est reconnue comme valable)
Une autre methode plus aleatoire (que j'ai laisser tombé)consiste a place l'ensemble de la page dans un conteneur de 90 a 95% de hauteur minimale et ensuite le footer auxquel il reste 5 a 10% d'espace libre pour etre afficher au bas. cette autre façon de faire se trouve la : http://gcyrillus.free.fr/dkg/trucs_css/pied_en_bas.html
ces 2 methode fonctionne sans positionnemnt "absolu" ni javascript et semblent se comporter comme prevue dans l'ensemble des navigateurs.


a plus
Modifié par gcyrillus (12 Dec 2005 - 15:42)
Bonjour gcyrrillus et merci de ta réponse

ça semble fonctionner j'ai encore quelques soucis pour formater une lsite à l'intérieur du footer mais ça devrait rouler.

Merci beaucoup pour ton aide.
++
Sujet clos
Aller à