Fixierung eines DIV innerhalb eines flüssigen Layouts

AgnusMacGyver · 28. Dezember 2013 um 15:49

Hallo zusammen,

ich habe hier ein Problem mit dem ich mich schon seit Stunden rumschlage und keine Lösung finde. Ihr könnt sicherlich helfen.

Aufbau
Die Webseite besteht aktuell aus einem header-Element, welches x Pixel vom oberen Bildschirmrand positioniert ist. In diesem befindet sich eine h1-Überschrift (Firmenname).
Das header-Element soll stets über die komplette Browserbreite verlaufen (width: 100%).

Unter dem ‚header‘ befindet sich ein main-Element mit fester Breite, welches mit ‚margin: 0 auto;‘ zentriert ist.

Aufgabe:
Wenn die Seite nach oben gescrollt wird, soll der ‚header‘ samt Firmenname am oberen Bildschrimrand andocken und darunter soll das ‚main‘-Element nach oben fließen. So weit habe ich die Aufgabe mit JS gelöst.

Problem:
In der jetzigen Ausgangsituation (siehe Code unten) stimmt die vertikale Flucht des h1-Elements zu ‚main‘ nicht mehr, sobald man die Browserbreite ändert.

Alternative:
Man setzt das ‚header‘-Element in den ‚Wrapper‘, aber dann wird die Breite begrenzt → keine Lösung!

Alternative 2:
Man setzt ausschließlich das h1-Element in den Wrapper, aber dann scrollt der Firmenname auch noch oben, was keine Lösung darstellt.

[CODE]

Name der Website * { margin: 0; padding: 0;} html { height: 100%;} body { font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1rem; color: #fff; background: grey; min-width: 800px;} #wrapper { width: 1000px; height: 2000px; border: 1px white solid; margin: 0 auto;} header { position: absolute; margin-top: 70px; height: 70px; width: 100%; background-color: #122ADF; z-index: 0;} .fixed { position: fixed; top: -70px;} .ueberschrift h1{ position: absolute; margin-left: 130px; font-size: 2.5rem; line-height: 4.2rem; z-index:1; } main { margin: 200px 0 0 50px; width: 62.5%; float: left; text-align:justify;}

Firmenname

Lorem ipsum dolor sic amet.

[/CODE]

Vorab vielen Dank für eure Hilfe & Grüße,
Fritz

AzRaIL · 28. Dezember 2013 um 17:06

Ein Link wäre natürlich sehr hilfreich. Wieso vergibst du deinem h1 innerhalb des Headers eine absolute Position?

AgnusMacGyver · 28. Dezember 2013 um 17:28

Hallo AzRaIL,

ich habe aktuell leider noch keine Domain zur Hand, auf die ich mal eben das HTML-Dokument hochladen könnte. Aus dem Grunde habe ich im oben den kompletten Quelltext eingefügt. Einfach neue Datei mit Endung .html lokal auf dem Rechner erstellen und den Quelltext einfügen, dann lassen sich die Lösungsansätze problemlos testen…

… die absolute Positionierung wegzulassen bzw. die in eine relative Positionierung zu ändern, verschiebt zwar auf horizontale Achse den Firmennamen, dieser bewegt sich aber mit, sobald die Browserbreite über ein gewisses Maß vergrößert wird.

Gruß Fritz

AzRaIL · 28. Dezember 2013 um 17:54

Also wenn ich das richtig verstehe möchtest du deine Überschrift immer auf einer Höhe mit dem Text deines mains haben?

Dazu müsstest du folgenden Code ergänzen

.ueberschrift {width: 1000px; height: 100%; margin: 0 auto;}
.ueberschrift h1 {margin-left:50px;}

Auf die absolute Positionierung der Überschrift kannst du eigentlich auch verzichten

AgnusMacGyver · 28. Dezember 2013 um 18:37

Hallo AzRaIL,

das war die Lösung!

Vielen Dank!!

Grüße Fritz

MrMurphy · 28. Dezember 2013 um 19:07

Hallo,

ich würde den vorhandenen Quelltext aufräumen und von Anfang an flexibel erstellen. Für’s Responsive Design müssten nur ein paar CSS-Zeilen hinzugefügt werden. Die CSS-Werte können nach Bedarf angepasst werden.

Auch sollte man CSS-Schlüsselwörter nicht als Klassennamen verwenden, deshalb habe ich die Klasse fixed in fixeda umbenannt

[HTML]

Fester Header * { margin: 0; padding: 0; } html { font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 120%; } body { color: #fff; background-color: grey; } header { padding-left: 10%; padding-right: 10%; background-color: #122ADF; z-index: 0; width: 80%; position: absolute; top: 70px; } /* line-height ohne Einheit ist korrekt, px als Fallback für aeltere Browser */ header h1{ font-size: 20px; font-size: 2.2rem; line-height: 2.0; z-index:1; } main { padding-left: 10%; padding-right: 10%; margin-top: 200px; } .fixeda { position: fixed; top: 0;} }

Firmenname

Lorem ipsum dolor sic amet.

[/HTML]

Gruss

MrMurphy