off canvas mit fixed Header

machomaaan · #1 (**permalink**) 07.03.2016, 17:00

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>

- Die komplette Website soll max. 1280px breit und zentriert sein

Code:

#site { max-width: 1280px; margin: 0 auto; }

- HEADER = fixed

Code:

header{ position: fixed; width: 100%; height: 200px; }

- NAV soll immer so hoch sein wie MAIN und auch fixed, sodass bei langem Content wirklich nur MAIN gescrollt wird
- 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.

MrMurphy · #2 (**permalink**) 07.03.2016, 17:13

Hallo

Zitat:

So schwer kann das doch nicht sein?!

Doch, das ist nicht so einfach umzusetzen. Deshalb wirst du auch kaum Seiten finden die so ein Layout enthalten.

Du solltest noch einmal überlegen, ob du wirklich alles so umsetzen willst. Zumal deine Besucher dadurch keine wirklichen Vorteile haben.

Gruss

MrMurphy

machomaaan · #3 (**permalink**) 07.03.2016, 18:33

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>

#site = max-width: 1280px; margin: 0 auto;
#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!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ä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