Webmaster Hub > [JavaScript] Ce positionner dans la page

Version complète: sur le forum Webmaster Hub : [JavaScript] Ce positionner dans la page

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > Scripts et utilitaires

Ifmy

dimanche 2 avril 2006 à 13:12

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

CODE

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

deepo

lundi 17 avril 2006 à 08:10

salut ifmy

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

CODE

#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

CODE

<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

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.