"Schwebendes" Layout

[Fruchtig]

Hallo,

ich lerne gerade Contao und versuche ein Layout mit folgenden Eigenschaften zu erstellen:

• Farbverlauf 1 auf dem kompletten Seiten-Hintergrund. Möglichst fixiert, so dass er nicht mit dem Inhalt mitscrollt(notfalls kann ich aber auch mit dem Scrollen leben)
• Sticky Header mit Abstand zum oberen Fenster-Rand und runden Ecken
• Zentriertes horizontales Menü im Header
• Sticky Footer mit Abstand zum unteren Fenster-Rand und runden Ecken
• Die Größe vom div "container" soll dynamisch den Platz zwischen Header und Footer einehmen und den äußeren Scrollbalken des Fensters bewegt
• Farbverlauf 2 auf dem Hintergrund vom div "container". Möglichst fixiert, so dass er nicht mit dem Inhalt mitscrollt(notfalls kann ich aber auch mit dem Scrollen leben)
• Links von der grünen Rahmenlinie auf der linken Seite sollte ein Schatten-Effekt zu sehen sein, allerdings nur so hoch wie der von Header und Footer umschlossene Bereich

Ich habe zum besseren Verständnis mein Chaos hochgeladen(Benutzername ist "test" und das Passwort ist "seite"):
http://highvoltage.bplaced.net/

Mit folgenden Punkten habe ich Probleme:

• Der div "container" wandert beim Runterscrollen durch den Bereich zwischen Header und oberem Fenster-Rand. Hier sollte eigentlich immer der rote Farbverlauf zu sehen sein
• Im Bereich zwischen Footer und dem unterem Fenster-Rand besteht dieses Problem ebenfalls
• Der vertikale Schatten-Effekt links neben der grünen Rahmenlinie geht unten über den Footer hinaus und wandert außerdem beim Scrollen mit
• Die Navigation wird durch die horizontale Zentrierung teilweise abgeschnitten

Lässt sich so ein Layout Browser-Übergreifend mit CSS und der Anpassung des Seiten-Templates bewerkstelligen?
Falls ja, bitte ich um ein paar konkrete Tipps, momentan fehlt mir da irgendwie der Ansatz

Es wäre sehr nett, wenn sich das mal jemand von euch ansehen könnte. Vielen Dank!

Schöne Grüße,
Fruchtig

[sandburg]

Hallo Fruchtig,

und willkommen im Forum

Lässt sich so ein Layout Browser-Übergreifend mit CSS und der Anpassung des Seiten-Templates bewerkstelligen?
Falls ja, bitte ich um ein paar konkrete Tipps, momentan fehlt mir da irgendwie der Ansatz

Es wäre sehr nett, wenn sich das mal jemand von euch ansehen könnte. Vielen Dank!

Im Prinzip ist alles möglich … aber Du kannst doch nicht ernsthaft erwarten, dass sich hier jemand hinsetzt und Dir das komplette Design programmiert!?


Viele Grüße
- sandburg -

[Fruchtig]

Hallo sandburg,

wie kommst Du darauf, dass ich erwarte, dass sich jemand hinsetzt und mir das komplette Design programmiert?

Wenn da jetzt ne leere weiße Seite zu sehen wäre, könnte ich Deinen Kommentar ja verstehen. Aber so? Das Layout steht doch schon zum größten Teil bzw. man kann ja wohl deutlich erkennen, dass ich Eigen-Initiative zeige: wie man sieht, habe ich mir Gedanken über die fixe Positionierung von Header und Footer gemacht und auch über das Padding von "container" nachgedacht, damit beim Scrollen nach unten der Text über dem Footer zum stehen kommt. Was mir bislang fehlte war ein Ansatz, wie ich den Inhalt unter dem transparentem Hintergrund hindurchschiebe, ohne das dieser sichtbar ist. Ich experimentiere gerade mit dem Seiten-Template und einem 2. Wrapper mit mehreren vertikalen Teil-Verläufen, um dann quasi in der Mitte einen Briefkastenschlitz zu erzeugen, durch den man dann den Inhalt auf einer Ebene dahinter sehen kann. Hoffentlich ist die Idee richtig bzw. hoffentlich kann man dann noch scrollen, wenn man sich mit der Maus außerhalb des Briefkastenschlitz befindet...
Ich denke nicht, dass es zu viel verlang ist, wenn jemand mit Ahnung abstrakt beschreibt, wie man so etwas am besten umsetzt - oder mir zumindest sagt, ob ich mit meiner aktuellen Idee auf dem richtigen Weg bin.

Das Problem mit der Navi habe ich durch ein overflow:visible inzwischen selbst lösen können.

Viele Grüße,
Fruchtig

[Spooky]

wie kommst Du darauf, dass ich erwarte, dass sich jemand hinsetzt und mir das komplette Design programmiert?

Naja, das was du hier umsetzen möchtest ist deiner Beschreibung nach schon relativ aufwändig und manche deiner Anforderungen funktionieren nicht ohne größere Änderung des HTML Layouts, dass du gerade verwendest und manches geht gar nicht oder zumindest nicht ohne JavaScript (außer dir ist ein Scrollbalken im #container egal...).

[Fruchtig]

Hallo Spooky,

wenn er das so wie Du geschrieben hätte, wäre das ja auch hilfreich gewesen. Aber diese Unterstellung war nicht zielführend. Eventuell war es ja auch ein Missverständnis und er hat die Verzeichnis-Schutz-Zugangsdaten für Contao-BackEnd-Zugangsdaten gehalten(was aber aufgefallen wäre, wenn man sich mal die Mühe gemacht hätte, sich die Seite anzusehen). Daher nochmal offiziell für alle: Ich habe die Seite nur online gestellt, damit man sich mein Problem ANSEHEN und mir Tipps geben kann. Niemand soll sich da für mich im BackEnd anmelden und die Seite zu Ende programmieren.

Darf ich Deine Antwort so verstehen, dass das gewünschte Layout dermaßen kompliziert ist, dass es nicht mal Profis wie euch möglich ist, die grobe Struktur bzw. die Verschachtelung des Layouts und die Anordnung der Ebenen im Rahmen der allgemein üblichen Beitrags-Beantwortungszeit zu beschreiben?

Vielen Dank schon mal...
Fruchtig

[Elvador]

Hallo Fruchtig,

Allgemein: Bewerkstelligen lässt sich das alles ohne Frage, was die (Achtung Modewort) "Usability" angeht, sollte man mit fixierten Elementen aber sparsam sein, insbesondere weil immer mehr mobile Geräte mit kleinen Bildschirmen auf Webseiten zugreifen. (Nur so als Anregung) Wie erfahren bist du denn mit CSS?

Ich würde

position:fixed;

vorschlagen und um Probleme beim (d.h. nicht mögliches) Scrollen zu vermeiden:

overflow:scroll;

Sprich: Hintergrund mit Farben etc. fixieren, ein großes (volle Bildschirmgröße & -höhe, weil der Scollbalken sonst nicht passt) Layer mit Scrollbalken und darin das Inhalts-DIV positioniert. Das funktioniert zumindest in der Theorie so, wie du das willst (vorausgesetzt ich habe dich korrekt verstanden)
--> Da empfiehlt sich zum Einen Firebug o.ä. zum Rumprobieren und zum Anderen sich die Umsetzung bei Seiten anzuschauen, die Elemente davon bereits umgesetzt haben.

Wie hier schon gesagt wurde, ist Javascript auch eine Möglichkeit die du ernsthaft für einige der Sachen in Betracht ziehen solltest.

Noch eine Anmerkung:
Bei CSS3 ist das so eine Sache… Meines Wissens ist das noch immer nicht fertig beschlossen und somit endgültig standardisiert. Du solltest auf jeden Fall sicherstellen, dass die Seite auch mit CSS2.1-Unterstützung funktioniert (dann halt ohne Schatten, Verläufe, abgerundete Ecken), um auch älteren Browsern einen Zugriff zu ermöglichen.

[sandburg]

Hallo Fruchtig,

ich bleibe mal bei meiner Aussage! Du berichtest ja selber „… ich lerne gerade Contao“ und ohne Dir etwas unterstellen zu wollen … STOP … ich lass es lieber. Die Anmerkungen von „Elvador“ können vielleicht helfen

Apropos „Unterstellung“ … wie kommst Du darauf, dass „die sandburg“ ein „er“ ist?


Viele Grüße
- sandburg -