Discussion :

[ThufirHawat]

Bonjour à tous zé à toutes,

Dans le cadre d'un site web que je crée actuellement, je place un menu en haut de page et un bas de page en ... bas de page (original non ?).

Dans les deux cas je place le code dans un <div> auquel j'assigne la class "top" pour le menu et "bottom" pour le bas de page.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.top {
position:absolute;
top:0px;
}
.bottom {
position:absolute;
bottom:0px;
z-index:2;
}

Pour le menu, aucun problème. C'est pour le bas de page qu'un soucis se présente...
Lorsqu'on redimensionne la page, le bas de page reste bien en place, à 0px du bas de la page. Par contre, lorsque le contenu de la page dépasse la place disponible à l'écran, il est nécessaire d'utiliser la barre de défilement pour afficher le reste. Et lorsqu'on fait défiler la page, le "bas de page" monte en même même temps que le texte et ne reste pas à 0px comme il est sensé le faire.

La question est donc : comment faire pour qu'il reste en place en toutes circonstances ?

J'espère m'être bien fait comprendre et que vous serez en mesure de m'aider. D'avance un grand merci et très bonne journée à vous.

Thufir Hawat

[Invité]

Pourquoi le places-tu en absolute avec un bottom:0, plutot que dans le flux normal de la page ?
Le gros inconvenient des absolute c'est qu'ils ne sont pas spécialement fait pour des redimensionnements ou des scrollings de page.

Je te propose de le réintégrer dans le flux de la page en enlevant cet afreux position:absolute. Il se placera alors tout naturelement en dessous de ton bloc de texte (qu'il soit tout petit ou tout grand)
Une autre solution consiste à recalculer en Javascript la position à donner à ton bloc de bas de page, mais QUE C'EST LOURD !

Dernière solution, affecter une taille définie à ton bloc central, et faire en sorte que la barre de défilement agisse uniquement sur ce bloc, par l'intermédiaire de la propriété overflow-y:auto (ne marche que sous IE, pour firefox un simple overflow:auto)

[ThufirHawat]

Salut St0uK et merci pour ta réponse,

J'utilise le "position:absolute" et "bottom:0px" pour que mon bas de page se trouve précisément au bas de la page.
Auparavant il était simplement à la suite du contenu de la page, comme tu propose de le faire, mais le désavantage c'est que le "bas de page" n'est pas à l'écran lorsque le contenu est trop grand.

C'est donc pour l'avoir constament à l'écran que je le place en position absolue...

Je vais tester ta dernière proposition en affectant une taille définie au bloc de contenu...

Si d'autres personnes ont une idée en tête, je les lis volontiers

Merci pour votre aide

Thufir Hawat

[Gwenn]

Salut,

un petit tour par là pourra t'aider

http://limpid.nl/lab/css/fixed/footer

[ThufirHawat]

Me revoilà,

Merci bcp Gwenn pour ton aide, l'addresse que tu as donné m'a permis de progresser

Au final j'ai fait un joyeux mélange de toutes les propositions et j'ai réussi à obtenir à peu près ce que je voulais. Chaque solution ayant ses avantages et ses défauts, il a fallut jongler.

Merci à vous pour votre aide

Bonne fin de semaine à tous

Thufir Hawat