Header + Hintergrund stehen lassen

[Jessica]

Hallo,

ich suche eine kleine Anleitung wie ich folgendes umsetzten kann:

Die Navigation sprich der grüne Bereich soll stehen bleiben, wenn der User die Seite nach unten Scrollt wie auch hier im Forum der blaue Balken ganz oben und soll komplett über die Seite gehen.

Der BG in meinem Fall das dunkel Grau soll auch sehen bleiben wenn der User nach unten Scrollt, es soll nur der Contenbereich Scrollen also das hellgraue.

Meine Frage nun wie kann ich das lösen und ist das schwer?

Gruß
Jessica

[Matthias Apsel]

Om nah hoo pez nyeetz, Jessica!

ist das schwer?

nein.

Die Navigation ist fixiert, das dunkle grau wird der Hintergrund des html-Elements, der body bekommt einen entsprechenden Außenabstand.

Matthias

[braini]

Anstatt eine Anleitung habe ich ein kleines und einfaches Beispiel erstellt.

Gruss braini

[Matthias Apsel]

Om nah hoo pez nyeetz, braini!

Zu kritisieren ist allerdings das maßlose Resetten der Abstände via

* {
    padding: 0;
    margin: 0;
}

Man möchte als CSS-Autor nicht für jeden denkbaren Fall eigene Abstände definieren, man möchte im Gegenteil auf Browser-Styles zurückgreifen, auch wenn die von Browser zu Browser ggf. unterschiedlich sind.

Matthias

[Jessica]

Hallo braini,

vielen Dank für deine Hilfe, ich habe dein CSS etwas erweitert und zwar um dieses:

  
html,body {  
    font: 14px Sans-serif;  
    background-color: #c8cac9;  
    padding: 10px 20px;  
    background-image:url(../design/hintergrund.jpg);  
    background-repeat:repeat;  
}  
  

ich dachte, dass wenn ich ein Background-image einfüge, dass der stehen bleibt und das graue also der Cotentbereich bewegt sich darüber, leider ist das nicht der Fall. Könnte ich das irgendwie umschreiben, dass dieser stehen bleibt?

Gruß
Jessica

[Jessica]

Hallo braini,

hab das Problem behoben, hab dieses eingefügt:

  
background-attachment: fixed;  

Gruß
Jessica

[Jessica]

Hallo braini,

eine Frage habe ich doch noch, bekomme ich den Content also da Grau immer Zentriert?

Derzeit sieht es so aus:

Gruß
Jessica

[Matthias Apsel]

Om nah hoo pez nyeetz, Jessica!

eine Frage habe ich doch noch, bekomme ich den Content also da Grau immer Zentriert?

http://wiki.selfhtml.org/wiki/Margin#Au.C3.9Fenabst.C3.A4nde_links_und_rechts

Matthias

[Jessica]

Hallo Matthias,

http://wiki.selfhtml.org/wiki/Margin#Au.C3.9Fenabst.C3.A4nde_links_und_rechts

danke für den Link ist aber nicht das was ich brauche, es muss sich ja dynamisch anpassen, ich weiß ja nicht wie groß der Bildschirm ist, ich hab mal gelesen es geht mit margin: 0 auto; aber geht hier leider nicht.

Gruß
Jessica

[Matthias Apsel]

Om nah hoo pez nyeetz, Jessica!

ich hab mal gelesen es geht mit margin: 0 auto; aber geht hier leider nicht.

Das steht in dem, was ich dir verlinkt habe, auch so drin. Blockelemente werden auf diese Weise (links und rechts) zentriert.

Matthias

[Jessica]

Hallo Matthias,

ok hab es nun so gemacht:

  
margin: 30px auto 0 auto;  

Gruß
Jessica

[Matthias Apsel]

Om nah hoo pez nyeetz, Jessica!

kürzer: ~~~css margin: 30px auto 0;

Das was [in dieser Seite](http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Abstand/margin#margin_.28Au.C3.9Fenabstand_allgemein.29) erklärt ist, gilt im Prinzip für alle zusammenfassenden Eigenschaften, die sich auf die 4 Seiten eines Elements beziehen (padding, border-\*).  
  
btw: Da du von flexiblem Layout geschrieben hast: Du solltest dann keine px-Angaben verwenden. [em](http://wiki.selfhtml.org/wiki/CSS/Wertetypen/Zahlen,_Ma%C3%9Fe_und_Ma%C3%9Feinheiten/em) bezieht sich auf die aktuelle Schriftgröße.  
  
Matthias

-- 
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Helm und Helmut](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=H#helm).  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)