Quel est le meilleur moyen de faire un fixe topbar qui ne chevauche pas le top?

Par exemple stackoverflow a un topbar pour les nouveaux membres. La topbar est fixe et pousse vers le bas de la page, sans le dépasser, le haut de la page.

Comment est-ce que c'est possible?

Javascript? Ou cela peut-il être fait avec seulement css?

InformationsquelleAutor | 2009-03-11
  1. 9

    Que vous pourriez faire quelque chose comme cela pour créer un en-tête fixe:

    <style>
body { margin: 0; }
div.header { position: fixed; height: 50px; width: 100%; }
div.content { padding-top: 50px; }
</style>

<body>
<div class="header">header</div>
<div class="content">content</div>
</body>

    Peut-être vérifier les ie5.5 /ie6.0 fix ici: http://www.howtocreate.co.uk/fixedPosition.html

    • comment faire un pied de page fixe à la place?
    InformationsquelleAutor Michiel
  2. 4

    L'adaptation de Michiel du code de l'OP est question dans ben_h réponse.

    <style type="text/css">
body { margin: 0; }
div.header { position: fixed; height: 50px; width: 100%; }
div.content{ /* normal stuff here */ }

/*** Only selects div.content immediately preceded by div.header.
If div.header doesn't appear, it won't select. ***/
div.header + div.content { padding-top: 50px; }
</style>

<body>
<div class="header">header</div>
<div class="content">content</div>
</body>

    Je vous préviens que ol' IE6 ne va pas être trop friands de cela, mais de Dean Edwards est IE7.js va ajouter le support pour le sélecteur de frères (+).

    InformationsquelleAutor ajm
  3. 2

    Si la barre est position: fixed, une façon de prévenir le chevauchement du contenu est à définir une hauteur statique puis définissez une marge supérieure sur le conteneur principal avec la même hauteur.

    Si vous ne connaissez pas la hauteur de la div à l'avance, vous devez utiliser le JS à la découverte de sa hauteur et mettre le récipient de la marge en conséquence.

    • Donc, il n'y a aucun moyen de le faire avec du css droit? Je sais, la hauteur de la barre, mais je ne sais pas si oui ou non il s'affiche, il n'y a aucun moyen de vérifier avec le css? Je suis juste tournage de la hanche, mais peut-être que l'utilisation créative des sélecteurs css? N'importe qui?
    InformationsquelleAutor ben_h
  4. 0

    Vous devriez être en mesure de le faire avec juste CSS.

    Voici un excellent article sur la façon de créer le "saint graal" de la css design.

    Une page avec trois colonnes. Une a fixé la largeur de la barre latérale gauche pour un menu, une barre de droite pour vos annonces ou des photos et évolutive centre qui coule avec le contenu.

    Voir:

    À la recherche du Saint Graal:
    CSS

    InformationsquelleAutor Konrad