Zum Beispiel hat stackoverflow eine topbar für neue Mitglieder. Die obere Leiste ist fixiert und drückt die Seite nach unten, ohne den oberen Rand der Seite zu überlappen.Was ist der beste Weg, um eine feste Topbar zu machen, die die Oberseite nicht überlappt?
Wie wird das erreicht?
Javascript? Oder kann das mit nur CSS getan werden?
Wenn die Leiste position: fixed ist, können Sie eine Überlappung des Inhalts verhindern, indem Sie eine statische Höhe festlegen und dann einen oberen Rand auf dem Hauptcontainer mit der gleichen Höhe festlegen.
Wenn Sie die Höhe des festen Div im Voraus nicht kennen, müssen Sie JS verwenden, um seine Höhe zu ermitteln und den Containerrand entsprechend einzustellen.
Sie sollten es nur mit CSS tun können.
Hier ist ein großartiger Artikel darüber, wie man den "heiligen Gral" von css design erstellt.
Eine Seite mit drei Spalten. Eine linke Seitenleiste mit fester Breite für ein Menü, eine rechte Seitenleiste für Ihre Anzeigen oder Fotos und ein skalierbares Center, das mit dem Inhalt fliesst.
See:
Auf der Suche nach dem Heiligen Gral: CSS
Sie könnten etwas tun einen festen Header zu erstellen:
<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>
Vielleicht die IE5.5 Check-out/ie6.0 Fix hier: http://www.howtocreate.co.uk/fixedPosition.html
Wie mache ich stattdessen eine feste Fußzeile? – jondinham
Anpassung von Michiels Code auf die OP-Frage in ben_hs Antwort.
<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>
Ich werde Sie warnen, dass ol‘IE6 ist nicht allzu gern, dass sein würde, aber Dean Edwards IE7.js wird Unterstützung für die Geschwister-Selektor (+) hinzufügen.
Also gibt es keine Möglichkeit, es mit CSS richtig zu machen? Ich kenne die Höhe der Bar, aber ich weiß nicht, ob es erscheint oder nicht, gibt es keine Möglichkeit, mit CSS zu überprüfen? Ich filme nur aus der Hüfte, aber vielleicht kreative Verwendung von Css-Selektoren? Jemand? –