|
|||
off canvas mit fixed Header
Hallo Leute,
ich verzweifle langsam an einem, wie ich denke, simplen Problem. Inzwischen habe ich so viele verschiedene Tutorials ausprobiert und miteinander zu verknüpfen, aber irgendwie passt das hinten und vorne nicht zusammen. Worum geht es? Ich würde gerne ein Layout machen, welches aus folgenden Bereichen besteht: Code:
<div id="site"> <header> KOPFBEREICH </header> <nav> NAVIGATION </nav> <main> INHALT der Seite </main> </div> Code:
#site { max-width: 1280px; margin: 0 auto; } Code:
header{ position: fixed; width: 100%; height: 200px; } - NAV soll auf mobilen Geräte mittels "slide-in" (off canvas) eingeblendet werden - Main soll immer bis zum Bildschirmende gehen bzw. bei längerem Content größer werden. Wie realisiere ich das am Besten? Wie gesagt, ich habe schon so viele verschiedene Methoden probiert, aber bisher hat das nie so funktioniert, wie ich gerne hätte. So schwer kann das doch nicht sein?! Kann mir jemand helfen? Vielen Dank im Voraus für Eure Bemühungen. |
Sponsored Links |
|
|||
Hallo
Zitat:
Du solltest noch einmal überlegen, ob du wirklich alles so umsetzen willst. Zumal deine Besucher dadurch keine wirklichen Vorteile haben. Gruss MrMurphy |
Sponsored Links |
|
|||
Danke für die schnelle Antwort MrMurphy.
Ich habe mir jetzt etwas anderes überlegt. Es gibt zwar eine Website die auf diesem Layout basiert, allerdings bin ich mir nicht sicher, ob ich diese hier posten darf oder nicht...deshalb versuche ich es einfach mal zu erklären. Zentriertes 2-Spalten-Layout: Code:
<div id="site> <div id="links"> <div id="logo"> Logo </div> <nav> Navigation </nav> <div id="social"> Facebook & Co </div> </div> <main> <header> <h1> Überschrift der Seite </h1> </header> < der restliche Inhalt > <footer> Copyrights usw... </footer> </main> </div> #links soll fixiert bleiben und so höhe des Bildschirmes ausfüllen Innerhalb von #links soll #social immer ganz unten stehen, quasi sticky footer main soll wieder mind. 100% Höhe haben, falls Inhalt länger entsprechend mitwachsen Der footer innerhalb von main soll ganz unten angereiht werden. Also wenn der Inhalt kleiner ist als die Bildschirmhöhe, soll der Footer am ganz unten stehen. Wenn der Inhalt jedoch wächst, soll der Footer mit nach unten rutschen. Ich hoffe ich habe es halbwegs gut erklärt. Aktuell habe ich es so gelöst, dass ich main relativ mit 100% Breite angelegt habe und zusätzlich ein margin-left mit der Breite von #links. Ob das eine gute Lösung ist weiß ich nicht. Funktioniert soweit aber. Allerdings bekomme ich das mit dem Footer nicht hin :/ Hat vielleicht jemand ein einfaches Grundgerüst für meine Anforderungen? Vielen lieben Dank für Eure Mühe! |
Stichwörter |
fixed header, off canvas |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Layout zentriert - header und navi fixed | Fanello | CSS | 0 | 20.06.2013 14:02 |
Anfänger: mehrzeiliger fixed header | Spencer | CSS | 6 | 16.05.2012 12:24 |
Positon fixed mit Menü und Header | Jumper | CSS | 4 | 01.04.2012 23:10 |
fixed header problem im FF und Opera | klingklngeling | CSS | 2 | 30.05.2009 13:25 |
header verrutscht... | weblearner | CSS | 6 | 03.12.2008 19:34 |