CSS Fixierung des Headers

Eagle-PsyX-

Commander
Registriert
Juni 2006
Beiträge
2.152
Irgendwie stehe ich zur späten Stunde gerade wohl auf dem Schlauch.

Hat jemand eine Idee, wie ich den "Header" (das graue "Ding") so einstellen kann, dass es IMMER oben bleibt und der Rest der Seite nur scrollt/scrollbar ist.

Wenn ich den Header position: absolute; top: 0; und den Rest der Seite (im Container wrapper) mit position: absolute; top: 102px; einstelle geht es irgendwie nicht.?

Code:
#header {
  width: 100%;
  height: 102px;
  background: #FFF url('img/header-background.png') repeat-x;
  overflow: none;
  text-align: center;
}

#header #header-container {
  height: 102px;
  width: 785px;
  margin: 0 auto;
  background: url('img/header-logo.png') no-repeat;
  text-align: left;
}

#wrapper {
  width: 100%;
  overflow: auto;
}
Trotz der Definition von Overflow.
 

Anhänge

  • css.png
    css.png
    141,8 KB · Aufrufe: 166
Zuletzt bearbeitet:
Hi!

Du brauchst dafür "position: fixed". Das darfst du nur dem grauen Element geben, dass dort immer bleiben soll.

Zusätzlich musst du dann wohl dem #wrapper dadrunter noch ein margin-top oder padding-top geben, dass kein Inhalt unter das "fixed"-Element rutschen kann und so verdeckt wird.

Gruß
Crizzo
 
Ich hatte versuchshalber position: fixed; Jedoch nicht an margin-top für wrapper gedacht...

Ergänzung:
KLappt leider nicht. Der Header bleibt nicht fixiert.

Ergänzung #2:
Ups. Scheint doch zu gehen. Hatte die falsche Kopie bearbeitet -.- Jedoch gehts dann mit padding-top ;)
 
Zuletzt bearbeitet:
Hi!

Und nun? Verstehe nicht, was du uns mit dem Satz jetzt sagen willst.

Gruß
Crizzo
 
Damit will er uns sagen, dass die Kombination aus position:fixed und margin-top für den wrapper sein Problem gelöst hat.
 
Genau, nur mit padding-top halt. Dankschön.

Ergänzung:
Es hat in dem Sinn nicht geklappt, weil sich gar nichts verändert hat - logischerweise weil ich an der falschen Datei saß, wie ich bereits feststellte :D
 
Zuletzt bearbeitet:
Übrigens, Tipp für die Zukunft: Einfach deine Testseite mit dem Problem online stellen und den Link posten. Niemand hat Bock zip-Archive oder so herunterzuladen, zu entpacken und dann zu basteln. Mit Links gibts oft einfach bessere und schnellere Hilfe. ;)
 
Das Projekt wird nicht unter meinen Namen veröffentlich und darf zuvor auf keinen Fall gezeigt werden.
Die gezippte Version ist extrem kastriert (und mit Firefox abgespeichert, Zwecks CMS), da es nur um ein bestimmtes Problem ging. Aber du hast Recht, ich könnte auch die version eigentlich online stellen.
 
Zuletzt bearbeitet:
Eben, deshalb ja eine Testversion. Die nur das Problem zeigt, was du nicht lösen kannst. ;) Mehr will man da gar nicht haben und beim Erstellen bemerkt man oft seinen Fehler schon. ;)
 
Zurück
Oben