Webseite mit Navigation rechts fixiert...

mike913 · 14.10.2015

Hallo,
ich möchte eine Webseite erstellen, bei der die Navigation auf der rechten Seite fest positioniert ist.
Der Inhalt/Content der Seite soll immer mittig positioniert sein, so dass der Abstand nach links zum Bildschirmrand und der Abstand zwischen Inhalt/Content und der Navigation auch beim Skalieren der Seite immer gleich groß bleibt.

Zur Veranschaulichung hier ein ganz grober Entwurf des Layout:

Das Ganze habe ich bereits versucht mit folgendem Code umzusetzen:

HTML:

<!DOCTYPE html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="layout.css">
</head>

<body>

<div class="container">

<div id="box">
  <h1>Inhalt / Content</h1>
<p>Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem
Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem
Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem
Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem
Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem
Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem Lorem ipsum et dolorem</p>
</div>

  <div id="box2">
    <h1>Navigation</h1>
   </div>

</div>

  </body>

</html>

CSS:

*{margin:0;
padding:0;}
 
.container{max-width:600px;
           margin:0 auto;}

#box{max-width:600px;
     border:1px solid lime;
     text-align:center;
     padding:20px;
     box-sizing:border-box;
     position:abolute;
     margin-left:-160px;
      z-index:1;}
    


#box2{width:320px;
      position:fixed;
      right:0;
      top:0;
      bottom:0;
      z-index:3;
      background:lime;}
    
     #box2 h1{font-weight:bold;
             text-transform:upercase;
              text-align:center;
              font-family:sans-serif;}
             
             
             
              @media screen and (max-width:950px) {
             
              #box2{width:200px;}
             
              #box{margin-left:-100px;}
             
              }

Das Ganze funktioniert auf diese Weise soweit.

Meine Frage ist, ob das Layout auch so richtig mit HTML und CSS umgesetz ist?
Oder hätte man da anders vorgehen müssen?

skiron · 14.10.2015

"Müssen" tut man ja gar nix ^^. Aber Können kann man schon...
Ich hätte jetzt so auf Anhieb die Navigation nicht mit verschachtelt sondern zwei Boxen neben einander positioniert. Wobei ich die linke wie unten berechnet hätte.

Schau Dir doch mal die neue CSS3-Funktion "calc()" an. Ich denke damit könntest Du weiter kommen.

Zum Beispiel:

Code:

width:calc(100%/2 - 320px);

Frank_Bpunkt · 14.10.2015

@skiron:
Vielen Dank für den Hinweis. Mathematische Funktionen sind einfach günstiger für künftige Entwicklungen.
Aber: Wenn du schon so weit gehst, warum bemängelst du dann nicht die px-Angaben? Das Stylesheet sollte %-Angaben haben; die sind immer flexibel. Pixel gehören nur noch in die @media-Regel.
Wichtig auch: ältere Browser haben manchmal mit calc Schwierigkeiten.

@mike913:
Es ist von Vorteil, die divs entsprechend zu benennen: .content und .navi, oder benutz doch gleich die neuen Tags wie section und nav.
Auch damit haben ältere Browser Schwierigkeiten. Wichtiger Eintrag im CSS:
display: block;

Für alte IE-Versionen ist auch ein JavaScript im head erforderlich:
<script>
document.createElement(„section“);
document.createElement(„nav“);
</script>
(Quelle: wahrscheinlich: SelfHTML, wenn ich mich nicht täusche.)

@mike913:
Fehler in Zeile 27; muss heißen: uppercase.

Liebe Grüße.

skiron · 14.10.2015

Frank_Bpunkt schrieb:
Aber: Wenn du schon so weit gehst, warum bemängelst du dann nicht die px-Angaben? Das Stylesheet sollte %-Angaben haben; die sind immer flexibel. Pixel gehören nur noch in die @media-Regel.
Wichtig auch: ältere Browser haben manchmal mit calc Schwierigkeiten.

Die Problemstellung war das Positionieren der Boxen, wenn ich es richtig verstanden habe. Nicht "was ist guter Programmcode?"! (Ist bei solch einem unfertigen Quellcode auch schwer zu beurteilen)
Und mit ältere Browser meinst Du dann wohl den IE <=8 (den Opera Mini und ältere Android-Browser lasse ich mal aussen vor).
Tja also ich sehe das so, wer jetzt noch den IE (oder auch die anderen alten Schinken) benutzt, der muss sich nicht wundern wenn die Seiten nicht korrekt angezeigt werden. Irgendwo muss man mit der Abwärtskompatibilität auch mal eine Grenze ziehen. Solche Browser gehören einfach nicht mehr ins Netz. Schon aus Sicherheitsgründen nicht und werden deshalb von mir auch nicht mehr berücksichtigt.
Und zur HTML-Struktur habe ich oben ja schon was geschrieben. Alles kann, nichts muss. Pixelwerte gehören für mich nicht zum alten Eisen. Ob man heute noch mit starren, unflexiblen Bereichen arbeiten sollte, ist Projekt-abhängig und kann mMn nicht pauschal entschieden werden. Aber da mag jeder anders denken...

Helpstar24 · 15.10.2015

Willst du die Webseite auch responsive programmieren? Ab einer bestimmten Auflösung wäre dein Wunsch etwas schwieriger umzusetzen. Das müsstest du dann mit @media screen lösen.

Edit:
Wenn du's richtig machen möchtest, dann programmier die Webseite responsive und berechne Alles in %.
Der Navigation würde ich KEINE fest Größe geben! Aber das war ja dein Wunsch.

Ab einer bestimmten Auflösung (Mobile Geräte) würde deine Navigation nämlich nicht sehr "vorteilhaft" aussehen.

Aber wenn du unbedingt darauf bestehst:
Ich habe dir mal was vorbereitet: (Getestet ab einer Auflösung von 1280 * 1024)

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

<style>

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;

}

  #content{width:80%; height:800px; float:left; background-color: blue;}

  #navi  {width:256px; height:800px; position:fixed; top:0px; right:0px; background-color: green; text-align:center }
  .center {width:50%; height:800px; margin:50px auto; text-align:center}

@media screen and (max-width: 900px) {
  #content{width:71%;}
  .center {width:55%;}
}

@media screen and (max-width: 700px) {
  #content{width:63%;}
  .center {width:50%;}
}

@media screen and (max-width: 580px) {
  #content{width:55%;}
  .center {width:50%;}
}

</style>
<title>Deine Homepage</title>

</head>
<body>

<div id="content">
<div class="center">
<h2>Inhalt/ Content</h2>
  <p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
  et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
  rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
  dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
  magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
  clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </p>
</div>
</div>

<div id="navi">
<h2>Navigation</h2>
</div>

</body>
</html>

patrick_l · 15.10.2015

Frank_Bpunkt schrieb:
Aber: Wenn du schon so weit gehst, warum bemängelst du dann nicht die px-Angaben?

Auch wenn die Frage nicht an mich gerichtet war, trotzdem darauf antworte. Kurz und knapp, weil es an fixen Werten wie Pixel nicht per se etwas zu bemängeln gibt.

Frank_Bpunkt schrieb:
Es ist von Vorteil, die divs entsprechend zu benennen: .content und .navi, oder benutz doch gleich die neuen Tags wie section und nav.
Auch damit haben ältere Browser Schwierigkeiten. Wichtiger Eintrag im CSS:

Was die HTML5 Syntax angeht, sprich die neuen semantischen Elemente (Tags) wie Header, Footer, Nav, Main, Section, Aside und Co., ist der Browser Support mittlerweile recht gut.

Frank_Bpunkt schrieb:
Wichtig auch: ältere Browser haben manchmal mit calc Schwierigkeiten.

Betrifft eigentlich nur den IE 8 sowie die Versionen 4.1 bis 4.3 des Android Browsers. "Marktanteile" von allen unter 2%. Ob sich da der Aufwand für ein Fallback noch lohnt, mal in Frage stelle. Ich würde es ignorieren.

Frank_Bpunkt schrieb:
Für alte IE-Versionen ist auch ein JavaScript im head erforderlich:

Naja, ordentlich sieht anders aus. Für solche Fallbacks sollte man eher modernizr oder HTML5Shiv mit Respond.js nutzen. Wenn man lediglich beim IE nachhelfen möchte, man die Scripte innerhalb von Conditional Comments einfügen sollte.

Frank_Bpunkt schrieb:
Auch damit haben ältere Browser Schwierigkeiten. Wichtiger Eintrag im CSS:
display: block;

Für ein Zurücksetzen der Default-Werte, sich vor allem umfangreiche CSS Resets wie normalize.css von Nicolas Gallagher oder Eric Meyers CSS Reset eignen. Ein schnelle Reset wäre auch über den Universal-Selektor (Sternchen) möglich. Jedoch allein der Performance wegen nicht zu empfehlen.

Helpstar24 schrieb:
Ab einer bestimmten Auflösung wäre dein Wunsch etwas schwieriger umzusetzen.

Schwierig? Nicht wirklich. Entweder mit reinem CSS (Stichwort: Checkbox-Hack) oder mit Hilfe von JavaScript (jQuery). Wenn letzteres gewünscht ist, darf ein entsprechender Fallback nicht fehlen.

Nun zur eigentlichen Frage. Es gibt wie so oft mehre Möglichkeiten. Eine wäre z.B. das Arbeiten mit display: flex. Zusätzlich die minimal Höhe der Navigation an den Viewport festmachen.

CSS:

.site-nav {
  display: flex;
  min-height: 100vh;
}

Der Inhaltsbereich müsste dem entsprechend angepasst werden. Ein anderer Ansatz wäre ein das fixe Positionieren der Navigation. Der Navigation die Eigenschaft position: fixed geben und mit z-index arbeiten.

CSS:

.site-nav {
  display: fixed;
  right: 0;
  top: 0;
  z-index: 5;
}

Markup könnte so aussehen:

HTML:

<div class="site-wrap">
  <header>
    <nav class="site-nav" role="navigation">
      <h1 class="brand">Logo</h1>
      <ul>
        <li><a href="#">Example 1</a></li>
        <li><a href="#">Example 2</a></li>
        <li><a href="#">Example 3</a></li>
      </ul>
    </nav>
  </header>
  <main class="primary" role="main">
    <section id="home">
      <div class="container">
        <!-- content here... -->
      </div>
    </section>
    <section id="about">
      <div class="container">
        <!-- content here... -->
      </div>
    </section>
  </main>
</div>

Hier mal ein Link für dich. In dem Artikel geht es um eine responsive Sidebar Navigation. Ich denke damit ist dir ausreichend geholfen. Einfach den Artikel lesen, die kostenlose Demo herunterladen und gewünschte Teile in deiner Navigation adaptieren.

- codehouse.co » Responsive Sidebar Navigation

Liebe Grüße, Patrick

Helpstar24 · 15.10.2015

patrick_l schrieb:
Zitat von Helpstar24:

Ab einer bestimmten Auflösung wäre dein Wunsch etwas schwieriger umzusetzen.
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.
Schwierig? Nicht wirklich...

Welchen Teil von "....etwas schwieriger umzusetzen", verstehst du nicht? Wer schreibt hier, dass die Umsetzung schwierig ist? Schon mal mein Quellcode überflogen?

Ich berufe mich auf seinen 1. Beitrag.
mike913 besteht auf eine feste Größe der Navigation. Er hat sich bzgl. der Responsive Programmierung nicht geäußert, wahrscheinlich wäre ihm das auch egal. Hättest du meinen Text richtig durchgelesen wüsstest, dass ich mit seiner Einstellung auch unzufrieden war.

Seine Navigation wird ab einer bestimmten Auflösung mit dem Content in Berührung kommen.
Daher habe ich ihm klar empfohlen, die Seite repsonsive zu programmieren. Der Navigation würde ich im Übrigen niemals eine feste Größe geben. Das erscheint mir alles nicht mehr zeitgemäß.

Edit: Mit meinem Code wird ihm zumindest geholfen.

patrick_l · 15.10.2015

Helpstar24 schrieb:
Welchen Teil von "....etwas schwieriger umzusetzen", verstehst du nicht? Wer schreibt hier, dass die Umsetzung schwierig ist? Schon mal mein Quellcode überflogen?

Ob jetzt schwierig oder schwieriger, beides nicht der Fall. Davon mal ab, habe ich auf deinen ursprünglichen Post geantwortet. Da du diesen just eben nach meinem Beitrag editiert hast, kann ich de facto deinen Quellcode jetzt erst lesen.

Helpstar24 schrieb:
Hättest du meinen Text richtig durchgelesen wüsstest, dass ich mit seiner Einstellung auch unzufrieden war.

Wo »nichts« steht, kann auch nichts gelesen werden. Wenn du deinen Beitrag nachträglich editierst, kann ich genau jenen Inhalt nicht gelesen haben. Logisch, oder?

Helpstar24 schrieb:
Seine Navigation wird ab einer bestimmten Auflösung mit dem Content in Berührung kommen.

Ich habe auch nichts gegenteiliges behauptet geschweige abgestritten, das es hier und da aneckt. Wenn es um die Darstellung auf und für unterschiedliche Devices geht, kommt man eigentlich zwangläufig zur responsiven Umsetzung und zu der Verwendung von Media Queries.

Edit:
So nebenbei, gewönne dir bitte einen anderen Tonfall an. Kritik und die eigene Meinung äußern, schön und gut. Kann, soll und darf jeder. Aber bitte nicht auf diese pampige Art und Weise. Letzteres ist nicht besonders förderlich und schadet nur dem sachlichen Informationsaustausch . Danke!

Liebe Grüße, Patrick

skiron · 15.10.2015

Helpstar24 schrieb:
Er hat sich bzgl. der Responsive Programmierung nicht geäußert, wahrscheinlich wäre ihm das auch egal.

Öhm... mal was zum sachlichen Informationsaustausch

Der TE hat in seinem Quellcode oben folgendes:

Code:

@media screen and (max-width:950px) {
            
              #box2{width:200px;}
            
              #box{margin-left:-100px;}
            
              }

Los, rate wieso! :rolleyes:

Frank_Bpunkt · 20.10.2015

Danke an alle, die sich zum Thema geäußert haben. Ich lese immer wieder gerne Tips zu galanten Möglichkeiten, eine Website einfach aufzubauen. Ich lasse mich bei meinen Ratschlägen auch gern belehren bzw. eines Besseren belehren.
Was mir nicht gefällt, ist der Tonfall, der sich beizeiten einschleicht. Damit beziehe ich mich jedoch auf alle Themen.
Was mir noch weniger gefällt, ist, dass mike913 zwar eine Frage stellte, aber seitdem nicht mehr reagierte.
Ich finde, wie auch immer, sollte es hier um Austausch und Hilfe gehen, nennt man im Englischen Sharing, soviel ich weiß.

Liebe Grüße an alle.

Helpstar24 · 23.10.2015

skiron schrieb:
Öhm... mal was zum sachlichen Informationsaustausch

Der TE hat in seinem Quellcode oben folgendes:

Bist du dir sicher, dass du HTML beherrschst ?

Mit einem (max-width:950px), wird man ganz sicher nicht eine komplette Webseite responsive programmieren.

So nebenbei, gewönne dir bitte einen anderen Tonfall an.

Das Gleiche wollte ich Dir auch schreiben.

Ich habe meinen Beitrag noch mal überflogen. Die Texte waren weder beleidigend noch war der Tonfall schlecht. Ich kann nun wirklich nichts für, wenn dein Ego so empfindlich reagiert.
Und dieser Beitrag dient ganz sicher nicht, um dich anzugreifen. Ich habe wirklich nichts Besseres vor. :frech:

LG, Helpi

patrick_l · 24.10.2015

Helpstar24 schrieb:
Mit einem (max-width:950px), wird man ganz sicher nicht eine komplette Webseite responsive programmieren.

Von der kompletten Website war auch nicht die Rede. Jedoch ist das Arbeiten mit »max-width« Angaben davon abhängig, welche Ansätze man verfolgt. Beschäftigt man sich mit responsive Webdesign, sollte man vor allem die Unterschiede zwischen »Graceful Degradation«, »Progressive Enhancement« und »Mobile-first« kennen lernen. Sowohl was die Vor und die Nachteile angeht.

Beim »Mobile-first« Ansatz wird man im Bezug auf die Media Queries dann statt maximaler Breitenangaben auf minimale um-switchen. Auch was den eigenen Workflow angeht, der ein oder andere dann Umdenken muss. Sprich nicht nur mobile-first sondern auch content-first denkend neue Projekte angehen.

Hier mal ein paar lesenswerte Artikel zum Thema:
- W3.org » wiki: Graceful Degradation versus Progressive Enhancement
- Sitepoint » Progressive Enhancement and Graceful Degradation: an Overview
- t3n » Der Superheld: „Progressive Enhancement“
- Jonas Helwig (Kulturbanause) » Mobile First + Progressive Enhancement
-

Zurück zur eigentlichen Frage dieses Threads. Die Navigation ist ein wichtiger Bestandteil einer Website. Allein deshalb muss sie auf allen Devices funktionieren. Daher sollte man bei der Verwendung von JavaScript (» jQuery) einen Fallback mit einplanen. Ebenso die Navigation für unterschiedliche Devices im Bezug auf dessen Bedien- und Erreichbarkeit optimieren.

Was das oben gezeigte Beispiel angeht, wäre z.B. eine Off-Canvas Lösung für mobile Devices eine Möglichkeit. Browser-übergreifend würde es mit reinem CSS und dem bereits genannten Checkbox-Hack funktionieren. Hier auch nochmal ein paar interessante Links über Off-Canvas, CSS Checkbox-Hack und responsive Navigation.

- Jason Weaver » Off Canvas: A Multi-Device Web Layout Pattern
- Smashing Magazine: Implementing Off-Canvas Navigation For A Responsive Website
- CSS-Tricks » Responsive Menu Concepts
-
-

Zu guter Letzt noch auf einen Artikel bzw. Guide verweise, in dem Flexbox ausreichend erklärt wird. Reinschauen, lesen und anschließend für die Navigation und den Content-Bereich übernehmen.

- CSS-Tricks: A Complete Guide to Flexbox

Liebe Grüße, Patrick

Helpstar24 · 24.10.2015

patrick_l schrieb:
Von der kompletten Website war auch nicht die Rede.

Liebe Grüße, Patrick

Ich finde es bemerkenswert, wie viel Zeit du für solche Beiträge investierst.

Im Übrigen habe ich @skiron Satz zitiert und gleichzeitig mich zu dem Thema geäußert.
Am Ende kann man wirklich Alles "umdrehen", wenn man möchte.

Ich bezweifle, dass der Threadersteller seine Webseite komplett responsive programmieren wollte und es war sicherlich nicht in seinem Sinne.

LG, Helpi

patrick_l · 24.10.2015

Helpstar24 schrieb:
Ich finde es bemerkenswert, wie viel Zeit du für solche Beiträge investierst.

Ach, die Zeit fürs tippen solcher Beiträge hält sich eigentlich in Grenzen. Meist beim schreiben noch diese oder jenes einfällt, mit aufgreife oder aus meinen Bookmarks externe Quellen mit einbeziehe.

Helpstar24 schrieb:
Im Übrigen habe ich @skiron Satz zitiert und gleichzeitig mich zu dem Thema geäußert.
Am Ende kann man wirklich Alles "umdrehen", wenn man möchte.

Ist ja völlig ok. Was gleichzeitig nicht heißt, das auch nur er darauf antworten kann, darf oder soll. Irgendwelche Aussagen um zu drehen ist nicht meine Art. Geschweige von mir gewollt oder gar beabsichtigt. Von daher, lediglich auf deinen Post eingegangen.

Liebe Grüße, Patrick

skiron · 24.10.2015

Helpstar24 schrieb:
Bist du dir sicher, dass du HTML beherrschst ?

Wozu sonst sollte jemand media querys einsetzen als für ein responsives Design?

Helpstar24 schrieb:
Mit einem (max-width:950px), wird man ganz sicher nicht eine komplette Webseite responsive programmieren.

Wie ich oben schon schrieb...

skiron schrieb:
Ist bei solch einem unfertigen Quellcode auch schwer zu beurteilen

Naja, erstmal lesen dann losplappern! Hilft immer!