Tutorial Layoutbereich responsive und zentriert

Diese Tutorial-Seite ist nicht responsive

21. September 2014

Guckt Euch als schönes Beispiel mal die Seiten von Doris an, die nach diesem Tutorial und nach dieser Vorlage erstellt wurden.

Der Inhalt der responsiven Seiten steht in einem Layoutbereich und wurde scrollbar gemacht.

Die Layoutbereiche haben teilweise einen leicht transparenten Hintergrund.

Die Layoutbereiche sind horizontal und vertikal zentriert. Der Inhalt ist responsive und passt sich jedem Bildschirm an. Dadurch wird der Layoutbereich sich auch bei mobilen Geräten anpassen, egal ob iOS oder Android System und ob das Smartphone oder Tablet gedreht wird.

Auf dem PC könnt Ihr diesen Effekt sehen, wenn Ihr das Browser Fenster zusammenschiebt, bzw. verkleinert.

Ansicht der Seite: Navi Links

Zunächst stellt Ihr den Master-Rahmen auf “ZeroMargins” (ohne Außen-Ränder), sodass es keinen Banner-Bereich mehr gibt. Den Hintergrund meiner Seiten habe ich hier mit einem Fullscreen-Background Skript “Backstretch” erstellt. Lest das Tutorial für einen solchen Hintergrund, wenn Ihr das auch so einbauen wollt.

Ich habe hier meine Layoutbreite auf 990px aufgezogen. Es ist wichtig, dass Ihr sämtliche Textfelder oder weitere Layoutbereiche immer auf die volle Layoutbreite aufzieht, da sich auf diese Breite die verwendeten Prozentangaben beziehen. Das Prinzip einer responsiven Seite beruht auf Prozentangaben,  im Gegensatz zu festen Breiten in Pixel-Angaben, die NOF zunächst automatisch erstellt. Es müssen also alle Angaben immer in Prozent erfolgen, egal ob Layoutbereich, Textfeld oder Tabelle.

Für absolut (feststehend) positionierte Objekte, wie bei mir die linke Navigation oder mein Logo, zieht Ihr Euch diese Objekte irgendwo in Eurem Layout auf - nicht im Layoutbereich - dort gibt es keinen Platz, da dort ja die Textfelder auf der vollen Breite aufgezogen sind und es darf keine Überlagerungen von Objekten geben.

Öffnet die CSS-Eigenschaften und tragt bei “Position” Eure Anweisungen für die absolute Positionierung dieser Navi ein.

Die linke Position habe ich mit 10% angegeben, da ja mein Layoutbereich mit einer Breite von 80% definiert wurde. Es bleiben also von 100% links und rechts jeweils 10% übrig, die obere Position habe ich mit 15% angegeben, da ja die Höhe mit 70% definiert wurde. Es bleiben also von 100% oben und unten jeweils 15% übrig. So erreiche ich eine exakte Positionierung in der linken, oberen Ecke des zentrierten Layoutbereichs.

Den z-index habe ich hoch gesetzt (hier auf 1000), damit sichergestellt ist, dass meine Navi immer über dem Inhalt positioniert bleibt.

Die maximale Höhe und Breite der Navigationsleiste habe ich festgelegt, damit diese nicht beim Größerziehen auf einem Handy oder Tablet individuell größer wird, sondern mit der gesamten Vergrößerung der Seite proportional gleich bleibt.

Um meiner Navi noch einen Schatten zu geben, habe ich meine Werte unter Feld bei box-shadow eingetragen.

Hier noch die CSS von meinem Logo. Hier gilt das gleiche Prinzip der absoluten Positionierung wie bei der Navi, nur habe ich hier 15% von unten eingetragen.

Ansicht der Seite: Navi Oben

Für die Navigation oben habe ich zwei Layoutbereiche verwendet. Der untere Layoutbereich dient der Navigation, der obere dem Inhalt, der scrollbar sein soll. Die Navi oben besteht aus einzelnen Buttons, damit auch diese sich responsive der Breite des Bildschirms anpassen können.

Beschreibung der Layoutbereiche

Die Layoutbereiche gilt es nun zu zentrieren, eine Hintergrundfarbe, einen Schatten oder sonst etwas zu geben. Dies habe ich hier direkt mit einer Styleanweisung des DIVs gemacht:

Tragt dieses DIV in die HTML des Layoutbereichs ein - hier für den unteren Layoutbereich der Seite Navi Oben:

> Layoutbereich markieren > Fenster “Layout-Bereich-Eigenschaften” > Button “HTML” > “vor dem Tag” (ab NOF11 “vorher”)

<div style="background-color:#202F52; opacity: 0.8; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 80%; height: 70%; border: 1px solid rgb(255,255,255); border-radius: 8px; box-shadow: 5px 5px 10px #000000;">

... und schließt das DIV “nach dem Tag” (ab NOF 11 “nachher”) wieder mit:

</div>

• Noch eine kurze Erläuterung zu den CSS-Einstellungen des unteren Layoutbereichs:
   
• background-color = Hintergrundfarbe
• opacity = Deckkraft hier 0.8 = 80%
• position = Position, zum Zentrieren muss oben, links, unten, rechts auf 0 stehen
• margin = Abstand, zum Zentrieren muss der Abstand auf auto stehen
• width = Breite
• height = Höhe
• border = Rahmen, hier ein Pixel in der Farbe Weiß
• border-radius = Rundung des Objektes, hier 8 Pixel
• box-shadow = Schatten des Objektes, hier 5 Pixel unten und rechts mit einem Abstand von 10 Pixeln in der Farbe Schwarz

Für den oberen Layoutbereich der Seite Navi Oben:

> Layoutbereich markieren > Fenster “Layout-Bereich-Eigenschaften” > Button “HTML” > “vor dem Tag” (ab NOF11 “vorher”)

<div style="background-color:#EDEDED; opacity: 0.8; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; margin-top: 41px; width: 98%; height: 80%; overflow: auto; border: 1px solid rgb(255,255,255);">

... und schließt das DIV “nach dem Tag” (ab NOF 11 “nachher”) wieder mit:

</div>

• Noch eine kurze Erläuterung zu den CSS-Einstellungen des oberen Layoutbereichs:
   
• background-color = Hintergrundfarbe
• opacity = Deckkraft hier 0.8 = 80%
• position = Position, zum Zentrieren muss oben, links, unten, rechts auf 0 stehen
• margin = Abstand, zum Zentrieren muss der Abstand auf auto stehen
• margin-top = Abstand oben, hier verwendet für die Höhe meiner horizontalen Navigationsleiste
• width = Breite, hier bezieht sich diese Breite prozentual auf den unteren Layoutbereich
• height = Höhe, hier bezieht sich diese Höhe prozentual auf den unteren Layoutbereich
• overflow = hier auto für die automatische Anzeige des Scrollbalkens wenn der Inhalt größer als der Layoutbereich wird
• border = Rahmen, hier ein Pixel in der Farbe Weiß

Bemerkungen

achtet darauf das sämtliche Textfelder, Layoutbereiche, Tabellen, die Ihr auf den Layoutbereichen aufzieht, immer eine Angabe der Breite (width) in Prozent erhalten. Ich habe hier überall 90% eingestellt, nicht zuletzt um den Scrollbalken zu berücksichtigen, da dieser nicht vom Inhalt überdeckt werden soll.

• CSS-Eigenschaften
   
• > Größe > width > 90%
  
   
• Erkennung vom Viewport eines Smartphones
   
• Um den Viewport mobiler Geräte zu erkennen, wie auf meiner Seite “Gesamte Seite” zu sehen und damit das responsive Layout am mobilen Gerät anzupassen, könnt Ihr folgendes META-Tag “Zwischen Head Tags” in der HTML der Seite einfügen:
  
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  
  Lest zum Viewport auch mal hier
  
  weiterhin gehört z.B. diese jQuery-Datei für mobile Geräte auch als Verlinkung “Zwischen Head Tags”
  
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  
  Lest dazu auch bei jQuery Mobile
   
• Bilder responsive in der Größe anpassen
   
• Um auch Bilder responsive zu verkleinern, fügt Ihr die untenstehende CSS Anweisung “Zwischen Head Tags” in die HTML der Seite ein.

<style>

   @media (-webkit-min-device-pixel-ratio: 1.5) { /* WebKit */ }
   @media (min--moz-device-pixel-ratio: 1.5) { /* Mozilla */ }
   @media (-o-min-device-pixel-ratio: 3/2) { /* Opera */ }
   @media (min-resolution: 1.5dppx) { /* CSS3 */ }

   img {
      max-width:100%;
      height:auto;
      width: auto; /* IE 8 */
   }

</style>

• Einrückungen von Text
   
• Texte, die eingerückt werden sollen, so wie auf meiner Seite Navi Links, markiert Ihr mit der Maus und benutzt den Tabulator, damit sich dieser als Block beim Verkleinern der responsiven Seite nicht nach links schiebt. NOF generiert dabei <ul> Tags.

nach oben

Viel Erfolg!