Aller au contenu

[JavaScript] Ce positionner dans la page


Ifmy

Sujets conseillés

Bonjour,

Que je vous explique mon problème.

  • Un header d'une hauteur de 131px en position fixe, le contenu de la page passe donc dessous.
  • le contenu de la page est une liste de news identifier ainsi : id='p234' par exemple.
  • je met en bout d'url #p234.
  • Si la news est en haut de page elle ce retrouve sous le header.
  • Si elle est en bas de page ça roule vu qu'il est impossible de scroller plus que de raison.

Je souhaiterais maintenant faire en sort que les news susceptibles d'apparaître sous le header soit décalées de sa hauteur. Logique...

Je me dit pas de souci, j'ai la solution :P

window.scrollBy(0, -131);

Ceci en fin de chargement de la page.

Mais voila :( plus la news est en haut de page, plus ça marche. Plus la news est en bas de page est plus c'est l'effet inverse qui ce produit (la news est sous la footer en gros).

Pour le coup j'ai beau réfléchir, je ne voit pas de solution :(

Une idée?

Merci :)

Lien vers le commentaire
Partager sur d’autres sites

  • 2 semaines plus tard...

salut ifmy

pour moi la solution serait de mettre dans un div avec feuille css qui contient :


#header {
width: ???px; /*ce que tu veux*/
height: 131px; /*hauteur de ton header*/
}
#page {
width: ???px; /*la meme qu'au dessus*/
margin-top: 0; /*pour coller au header*/
}
#footer {
width: idem;
height: 20px;
}

ensuite dans ta page html tu appelle tes div les uns après les autres


<body>
<div id="header">
<!--ce que tu veux-->
</div>
<div id="page">
<!--l'affichage de tes news-->
</div>
<div id="footer">
<!--ton pied de page-->
</div>
</body>

normalement le div de la page devrait pousser le footer vers le bas au fur et mesure que ta liste s'allonge...

si je me trompe quelqu'un de plus caler pourra corriger

a+ et bon code

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...