Fixer Hintergrund, Hauptseite scrollbar

[svr]

Hallo zusammen

Habe eine Frage betreffend einem fixen Hintergrund wo der Text darüber scrollt, resp. die Bildgalerie.
Habe folgenden Artikel im Internet gefunden: http://www.drweb.de/magazin/100-hint...ld-im-browser/
Wo genau muss oder kann ich die DIV's einbauen?

Im weitere wollte ich auch noch wissen ob es auf einfache Art und Weise möglich ist, dass nur die Hauptseite gescrollt wird und Header und linke Navigation immer am gleichen Ort bleiben. Gibt es da was einfacheres in Contao direkt oder kennt jemand ein einfaches Script oder sonstige Hinweise dazu ?

Vielen Dank und Grüsse
Michi

[tblumrich]

1. http://de.contaowiki.org/Fullsize_Ba...Tools_MooSizer

2. http://little-boxes.de/lb1/12.6-wie-...ion-fixed.html
Auf jeden Fall solltest du dir position:fixed und entsprechende Lösungen ansehen... (und auch dessen Nachteile...)

Gruß
Thomas

[svr]

Hallo Thomas

Vielen Dank für Deine Links, konnte die gut gebrauchen und integrieren.

Eine Frage hätte ich noch.... Habe den Beitrag zur Position:Fixed auch gelesen, doch funktioniert die bei mir nicht so einfach. Denke ich müsste dies an einigen Stellen in meinen Stylesheets anpassen....

Gibt es allenfalls seitens Contao eine Möglichkeit oder eine einfache Stylesheetanpassungsmöglichkeit, dass gemäss definiertem Layout der gesamte Header (Kopfzeile) immer fix bleibt ? Siehe dazu beiliegender Screenshot worauf ersichtlich ist wie hoch meine Kopfzeile ist und welches Layout ich gewählt habe. Ich möchte gerne, dass in diesem Fall die ganze Kopfzeile fix bleibt.

Würde es auch eine Möglichkeit geben, Kopfzeile und rechte Spalte immer fix anzuzeigen und nur die Hauptspalte ist scrollbar ? Dies wäre noch eine Frage/Wunsch eines Kunden von mir.

Vielen Dank und Grüsse
Michi

[svr]

Hallo zusammen

Gibt es keine Möglichkeit, die ganze Kopfzeile als gesamtes zu fixieren ? Muss man jedes einzelne Teil, also z.B. Navigation, Bild, Topmenu, etc fixieren, damit dies immer fix bleibt ? Am einfachsten oder schönsten wäre es, wenn man die ganze Kopfzeile, definiert im Seitenlayout, fixieren könnte.

Vielen Dank für Eure Hinweise und Bemühungen.

Grüsse
Michi

[frohmann]

Würde es auch eine Möglichkeit geben, Kopfzeile und rechte Spalte immer fix anzuzeigen und nur die Hauptspalte ist scrollbar ? Dies wäre noch eine Frage/Wunsch eines Kunden von mir.

Michi

#header {position:fixed;}
#right {position:fixed;}

Wobei du noch keine rechte Spalte im Seitenlayout angelegt hast und die dann noch zur Kopfzeile positionieren müsstest.

Frank

[tblumrich]

Ich kenne dein Layout nicht, aber probiers doch mal aus. Was passiert denn, wenn du deinen #header auf position:fixed stellst?

Gruß
Thomas

[svr]

Hallo zusammen

Ich habe es mit position:fixed probiert, doch dann verzieht es mir den ganzen Header, ist nicht mehr zentral, der Balken, den ich über die Navigation gelegt habe ist nicht mehr über der Navigation etc. Im weiteren funktioniert zwar grundsätzlich, dass der Header immer ersichtlich bleibt (wenn in diesem Fall auch verzogen und nicht am gleichen Ort), aber der Inhalt der Hauptseite fährt dann über den Header hinweg. Schön wäre es, wenn durch das Scrollen der Inhalt der Hauptseite zusätzlich auch unter dem Header "verschwinden" würde.

www.loeffler-jost.ch/neu ist meine Homepage, welche ich versuche mit Contao aufzubauen. Eigentlich steht alles, dies wäre einfach noch ein letzter schöner Schliff, wenn der Header fix oben bleiben würde (mit position:fixed ist es einfach verzogen) und der Inhalt der Hauptseite unter dem Header weggescrollt werden würde und nicht darüber.

Vielen Dank und Grüsse
Michi

[tblumrich]

Hi.

Bist du sicher, dass du ein derartiges Feature bei dem Layout wirklich willst? Ist doch alles sehr offen gehalten und der Header ist auch offen ohne Background. Dadurch hast du dann beim Scrollen übereinander stehende Texte...

Ansonsten, klar... durch einen einzelnen CSS "Befehl" wird nicht alles funktionieren, du musst den Rest dann schon dazu anpassen (Abstände, Größen usw...). Du wirst hoffentlich nicht verlangen, das wir dir hier das komplette Layout dafür entwerfen?
Was die Lage der Ebenen angeht... das steuerst du mit z-index:Wert;.

Ansonsten, wie schon geschrieben, es gibt im Netz viele Tipps und Anleitungen wie man mit fixen Headern oder/und Footern oder auch anderen Boxen umgeht.

Gruß
Thomas

[frohmann]

Gibst du dem header eine Breite wird er auch zentriert dargestellt. z-index bestimmt die Reihenfolge von überlappenden Elementen:

#header {
height: 112px;
width: 960px;
position: fixed;
z-index: 100;
}

Da dein header transparent ist, sieht es aber wahrscheinlich immer noch nicht so aus, wie du es dir vorstellst.

Gruß
Frank

[ofriedrich]

#header {
height: 112px;
width: 960px;
position: fixed;
z-index: 100;
top:0;
}
#container {
margin-top:112px;
}

Ich würde Dir empfehlen, das Hintergrundbild für die Navi auch in den entsprechenden Tag #mainmenu zu setzen und nicht #header .inside. Dann verschiebt er sich auch nicht, wenn Du mal die Überschrift änderst!

Nachtrag: IE wird sich vermutlich wieder mal die Zähne ausbeißen an position fixed.