Forum Programmation.web CSS, Div, et menus fixes

Posté par  .
Étiquettes : aucune
0
27
oct.
2004
Salut à tous,

Je cherche à faire une page de la forme suivante :

- 1 div « titre » qui contient un H1 avec le titre, fixe et toujours visible (sans chevauchement donc le div est position fixed, overflow auto)
- 1 div page en-dessous (overflow hidden), contenant 2 div :
1) 1 div menu sur la gauche (float left, position fixed)
2) 1 div contenu au centre (float right)

Le problème est que je n'arrive pas à faire en sorte que par défaut, le texte du div contenu (et du div menu d'ailleurs, donc je suppose du div page) soit visible, et qu'il glisse ensuite sous le titre quand on scrolle avec l'ascenceur. J'arrive à le faire glisser dessous en le cachant, mais le haut du texte est caché dès le début sous le div titre.

Le CSS :



div#titre

{

        overflow: auto;

        position: fixed;

}



div#page

{

        overflow: hidden;

}



div#menu

{

        float: left;

        position: fixed;

}



div#contenu

{

        float: right;

}


Le HTML associé :

div id="titre" fin-div-titre
div id="page"
div id="menu" ul li-truc li-bidule fin-ul fin-div-menu
div id="contenu" bla bla blaaaa bla bla bli blo blu fin-div-contenu
find-div-page

J'ai essayé avec diverses combinaisons de float, de clear, de position, de display, de height, de width, de top-bottom-right-left, y'a rien à faire.
Vous auriez une idée / un exemple ? Merci.

  • # h1 et DIV

    Posté par  . Évalué à 2.

    Pourquoi cacher le titre (h1) dans le div ? Il sera bien mieux directement dans le corps de la page.

    BeOS le faisait il y a 20 ans !

    • [^] # Re: h1 et DIV

      Posté par  . Évalué à 2.

      Merci du conseil. J'ai testé, et ça ne change pas grand chose malheureusement...

      • [^] # Re: h1 et DIV

        Posté par  . Évalué à 2.

        "J'arrive à le faire glisser dessous en le cachant, mais le haut du texte est caché dès le début sous le div titre."

        Essaie ceci :

        - ton titre doit avoir une hauteur connue (en pixels ou en em pour un design élastique)

        - le corps de la page a un padding égale à la hauteur du titre

        - le menu est en float:left, a une marge en haut égale à la hauteur du titre


        avec la structure HTML suivante ça devrait marcher :


        <body>
        <h1>Titre</h1>
        <ul>
        <lh>Menu</lh>
        <li>item</li>
        <li>item</li>
        </ul>
        Hop le contenu de la page directement dans le corps
        </body>


        Le titre et le menu restera toujours visible.
        Le menu et le contenu de la page "glisseront" élégamment sous le titre.


        A tout hasard, connais tu l'indispensable http://www.openweb.eu.org(...) ?

        BeOS le faisait il y a 20 ans !

  • # Tout pareil :)

    Posté par  . Évalué à 2.

    Je ne sais pas si c'est exactement ce que tu veux, mais j'ai fait qq chose de similaire sur mon blog : http://sl33p3r.free.fr/blog/(...)

    • [^] # Re: Tout pareil :)

      Posté par  . Évalué à 2.

      Pas regardé les détails, mais ça m'a l'air d'être très exactement ça !
      Merci beaucoup :)

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.