Umsetzung dieses Layouts

[risingsunset]

Moin,

ich weiß leider nicht genau welche Suchbegriffe ich für meine Frage in der Suche eingeben könnte, deshalb ein neues Thema

Ich möchte folgendes Layout mit Contao umsetzen:

Skizze.png

Header und Navi ist schon fertig und das Hintergrundbild habe ich auch schon eingefügt.
Jetzt stehe ich jedoch vor einem kleinen Problem.

Ist es möglich, dass beim Aufruf der Seite quasi der orange, grüne und obere blaue Bereich angezeigt wird?
Also Hintergrundbild, Header & Navi und die Headline des Contents.
Wenn man dann runterscrollt, soll der Content angezeigt werden.
Das Hintergrundbild sollte sich an das Browserfenster anpassen, aber fix sein und beim scrollen nicht mitlaufen.

Ich hoffe, meine Frage ist verständlich

Danke!

[Spooky]

Ja, einfach per JavaScript den oder die entsprechenden Container einfach an die Fenster Höhe anpassen. Du kannst mit CSS auch

… {
    min-height:100vh;
}

verwenden, aber iOS Safari hat da noch Bugs.

[risingsunset]

Alles klar, danke Dir!

Und wie schaffe ich es, dass der blaue Bereich z.B. 60px über dem Ende beginnt?

[mlweb]

mit negativem margin-top

[risingsunset]

mit negativem margin-top

Leider funktioniert das nicht. Der Container wandert durch den negativen Wert ja nach oben.
Ich würde das ganze auch gern responsive halten.
Gibt's da eine Möglichkeit per CSS?

[Andreas]

Zeige einen Link zu der Seite, sonst ist das zu viel Raterei.

[dtptiger]

Ich würde das ganze auch gern responsive halten.
Gibt's da eine Möglichkeit per CSS?

Selbstverständlich mit CSS, was denn sonst?

Im Netz ist ja alles mit CSS gestiled, ALLES.
Da ich frei von der Leber wech vermute das Du nur sehr wenig Ahnung von CSS hast, und da im Netz ja alles, auch Contao, mit CSS gestiled ist, möchte ich Dir raten dich mit z.B. mit dem Standardwerk für floatings "Little Boxes" zu beschäftigen.

Oder hier ein paar der 1000 Seiten im Netz die z.B. was über Floaten schreiben und erklären. Wobei das Buch von Peter Müller, "Little Boxes", sehr schön von Grund auf Erklärt.
css-examples
css-positionieren-float.html

Oder, je nach "Eiligkeit", Du vergibts das CSS als Kleinauftrag an ein Forummitglied.
Denn es wird Dir nicht wirklich helfen wenn Dir jemand den code postet. Denn wenn Du "nur" das CSS für die 3 Boxen hast, das ist ja zu kurz gesprungen, es kommen ja noch alle anderen Stylingaufgaben dazu.

Gruß
dtptiger

[mlweb]

Dass die Gestaltung eines Layouts nicht ohne gute CSS-Kenntnisse funktioniert hat Dir ja schon @dtptiger gesagt.

Der Container wandert durch den negativen Wert ja nach oben.

Das war doch auch Dein Ziel. Zumindestens hatte ich die Aussage

Und wie schaffe ich es, dass der blaue Bereich z.B. 60px über dem Ende beginnt?

und Deine Skizze so verstanden.
Insgesamt gibt es auch je nach konkretem Layoutentwurf auch noch einige andere Möglichkeiten so etwas zu realisieren.

Ich würde das ganze auch gern responsive halten.
Gibt's da eine Möglichkeit per CSS?

Wenn Du keinerlei Kenntnisse hast, würde ich auch zu professioneller Hilfe raten.
Responsives Design ist deutlich mehr als nur das reine Layout.
Alternativ kann man ein fertiges responsives Theme erwerben.

[mlweb]

Im Netz ist ja alles mit CSS gestiled, ALLES.

Du vergißt die Pappenheimer, die auch im Jahr 2014 noch Webseiten mit Tabellenlayout gebaut haben.

[risingsunset]

Danke. Sehr nett.

[Andreas]

Du vergißt die Pappenheimer, die auch im Jahr 2014 noch Webseiten mit Tabellenlayout gebaut haben.

Tabellen werden ja auch mit CSS gestylt. Aber es gibt auch noch Seiten mit Flash, oder Seiten nur mit einem Bilde und ein paar andere Exoten wo kein CSS zu finden ist, dann ist aber auch (so gut wie) kein HTML zu finden.

[risingsunset]

Danke, ich habe es jetzt auch ohne eure Hilfe geschafft