zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden off canvas mit fixed Header

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.03.2016, 17:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.03.2012
Beiträge: 22
machomaaan befindet sich auf einem aufstrebenden Ast
Unglücklich 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>
- 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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.03.2016, 17:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.071
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.03.2016, 18:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.03.2012
Beiträge: 22
machomaaan befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
Antwort

Stichwörter
fixed header, off canvas

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:17 Uhr.