• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navigation vertikal im Header

N

<nick>

Neues Mitglied
Hey,

beschäftige mich seit ein paar Wochen mit HTML/CSS und würde nun gerne diese kleine Testnavigation umsetzen.

1391479671-clip-21kb.png


Aktuell habe ich bereits das Logo im header platziert ,

HTML
HTML: 
</head><body>

  <header class="alpha_header">
 
   <div id="banner_chest" role="banner">
     <a class="href_logo" href="index.html" title="Drop it!">
     <img class="logo" src="images/logo_dropit_white.png" alt="Drop it!">
     </a>
   </div> 
  
   <div class="nav_chest">
    <nav class="navigation">
       <ul>
         <li><a href="index.html">Home</a></li>
         <li><a href="about.html">About</a></li>
         <li><a href="products.html">Products</a></li>
         <li><a href="contact.html">Contact</a></li>
       </ul>
    </nav>
   </div>
   
  </header>
</body></html>

und über CSS mittig gesetzt durch den umgebenden <div id="banner_chest" role="banner">, dem ich eine feste width zugewiesen habe, sowie margin-left und right auto.

CSS
Code: 
body {
    margin:0;
    padding:0;
}
.alpha_header {
    padding-top:20px;
    margin-top:0;
    height:270px;
    background-color:#000;
    width:100%;
    box-shadow: 0px 3px 3px #000;
}
div#banner_chest {
    width:250px;
    height:250px;
    margin-left:auto;
    margin-right:auto;
}

Im Browser schaut es gut aus, und W3C valide scheint das ganze auch zu sein. Bin mir nur nicht so sicher ob ich es so sinnvoll umgesetzt habe.
Wenn nicht wäre es super ein Besseren (evtl. semantisch Korrekteren) weg aufgezeigt zu bekommen. :)


Nun zu meinem eigentlichen Problem - die Navigation.

Logisch wär hier ja eine liste, oder zwei, die ich jemals in ein div stecke und rechts und links des <div id="banner_chest" role="banner"> setze. So kann ich sie mittig ausrichten an dem grade genannten div.

1391482116-clip-23kb.png


Habe es jetzt bis in die Nacht versucht aber komm noch net wirklich weiter.
Ist der angedachte Weg okay oder sollte ich es grundlegen noch mal überdenken?

Kann mich net so richtig mit dem Ganzen anfreunden und hoffe auf ein wenig rat :)

Gruß

nick
 
Hallo

Wenn nicht wäre es super ein Besseren (evtl. semantisch Korrekteren) weg aufgezeigt zu bekommen.
Zum Vergrößern anklicken....

Semantisch ist die ganze Navigation eine einzige Liste. Auch sollten alle unnötigen Elemente und Klassen weggelassen werden. Den Rest erledigt dann CSS. Der HTML-Quelltext könnte also folgendermaßen aussehen:

Code: 
   <nav class="clearfix">
      <ul>
         <li><a href="index.html">Home</a></li>
         <li><a href="about.html">About</a></li>
         <li><a href="index.html"><img src="images/logo_dropit_white.png" alt="Link zur index.html"></a></li>
         <li><a href="products.html">Products</a></li>
         <li><a href="contact.html">Contact</a></li>
      </ul>
   </nav>

Das ganze kann natürlich auch im header-Element stehen. Wobei ich die Grafik für schmale Bildschirme (Stichwort: Responsive Layout) als Hintergrundbild einfügen würde und nicht als Vordergrundbild, also zum Beispiel

Code: 
   <nav class="clearfix">
      <ul>
         <li><a href="index.html">Home</a></li>
         <li><a href="about.html">About</a></li>
         <li><a href="index.html">Drop it!</a></li>
         <li><a href="products.html">Products</a></li>
         <li><a href="contact.html">Contact</a></li>
      </ul>
   </nav>

oder in dem header-Element

Code: 
   <header role="banner">
      <nav class="clearfix">
         <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="index.html">Drop it!</a></li>
            <li><a href="products.html">Products</a></li>
            <li><a href="contact.html">Contact</a></li>
         </ul>
      </nav>
   </header>
Gruss

MrMurphy
 
Zuletzt bearbeitet:
Hallo,

danke für deine ausführliche Antwort.

So wie ich es jetzt verstehe würde ich alles - sprich die vier Navigationspunkte plus das Logo (welches zusätzlich zum Punkt "Home" auch auf den Index verlinkt) in eine Liste stecken und via CSS horizontal ausrichten, die Abstände angleichen etc.

*Ist das Logo semantisch gesehen dann nicht "einfach" ein Navigationspunkt wenn ich es als Hintergrundgrafik einbinde? bzw. sollte ich es nicht möglichst als Banner auszeichnen?

EDIT
*Hatte übersehen das Du bereits dem Header role="banner" zugewiesen hast. War zuvor fälschlicherweise davon ausgegangen dass diese Aufgabe explizit das Logo übernehmen sollte.

Richtigstellung:
A region that contains mostly site-oriented content, rather than page-specific content.

Site-oriented content typically includes things such as the logo or identity of the site sponsor, and site-specific search tool. A banner usually appears at the top of the page and typically spans the full width.
http://www.w3.org/TR/wai-aria/roles#banner
Zum Vergrößern anklicken....


Gruß

nick
 
Zuletzt bearbeitet:
Hallo

So wie ich es jetzt verstehe würde ich alles - sprich die vier Navigationspunkte plus das Logo (welches zusätzlich zum Punkt "Home" auch auf den Index verlinkt) in eine Liste stecken und via CSS horizontal ausrichten, die Abstände angleichen etc.
Zum Vergrößern anklicken....

Ja, so ist es semantisch korrekt und nebenbei im HTML-Quelltext viel übersichtlicher.

Zudem kannst du so die Navi für schmalere Fenster (Smartphone / Tablet) einfacher anpassen - Responsive Design.

Hatte übersehen das Du bereits dem Header role="banner" zugewiesen hast. War zuvor fälschlicherweise davon ausgegangen dass diese Aufgabe explizit das Logo übernehmen sollte.
Zum Vergrößern anklicken....

role = "banner" ist was anderes als ein anklickbares Bannerbild oder ein Logo. Da darf man sich nicht durch die gleiche Bezeichnung verwirren lassen. Das role="banner" für den header ist semantisch korrekt. Das würde auch beim header bleiben, wenn die Navigation aus dem header ausgelagert werden würde. In der Navigation hat ein Logo semantisch eher nichts verloren.

Gruss

MrMurphy
 
Hey,

ich habe das Ganze soweit mal als liste aufgebaut und ganz leicht mit CSS formatiert. Gefällt mir bis jetzt gut und funktioniert. Lediglich 100% mittig zentriert bekomme ich es nicht, und die "Buttons" -"Home About..." sollten auf eine horizontale Linie mit dem logo, bzw. mittig des Headers - sowie etwas mehr platz bekommen.

Jedoch musste ich die Grafik direkt einbinden, und nicht als Background via CSS.


1391527919-clip-16kb.png


HTML
HTML: 
 <header role="banner">
     <nav class="clearfix">
       <ul class="ul_nav">
        
         <li class="navigation"><a class="menu" href="index.html">Home</a></li>
           <li class="navigation"><a class="menu" href="about.html">About</a></li>
           <li class="navigation"><a class="menu" href="index.html">
              <img src="images/logo_dropit_white.png" alt="index.html" title="Drop it!">
              </a>
           </li>
           <li class="navigation"><a class="menu" href="products.html">Product</a></li>
           <li class="navigation"><a class="menu" href="contact.html">Contact</a></li>
         </ul>
     </nav>

    
</header>
</body></html>

CSS
Code: 
/* Stylesheet Drop it! */
  *{
      margin:0;
      padding:0;
}
  .clearfix{
      width:100%;
      background-color:#000;
}
  .navigation{
      list-style:none;
      text-decoration:none;
      display:inline;
}
  .ul_nav{
      text-align:center;
}
  .menu{
      text-decoration:none;
      color:#FFF;
      font-size:24px;
      font-family:"Times New Roman", Times, serif;
}

In der Navigation hat ein Logo semantisch eher nichts verloren.
Zum Vergrößern anklicken....

Dennoch ist es in diesem Fall die beste Lösung das Logo in die Navigation, bzw. die liste mit einzubauen?

Gruß

nick
 
Hallo,

Dennoch ist es in diesem Fall die beste Lösung das Logo in die Navigation, bzw. die liste mit einzubauen?
Zum Vergrößern anklicken....

Die beste Lösung habe ich dir genannt. Dein Problem ist unter anderem, das du dem Logo viel zu viel Bedeutung beimisst. Semantisch ist das vollkommen bedeutungslos. Es ist viel entscheidender, der Seite die wichtigen Informationen als Text mitzugeben. Das Logo ist Beiwerk. Wenn man eins hat sollte man es auch semantisch korrekt (als Hintergrund) zeigen, aber damit hat es sich dann auch schon. Kein Mensch ruft eine Seite wegen eines Logos auf.

Ein weiteres Problem ist, das dir die Grundlagen für HTML und CSS fehlen. Mit Raten kannst du keine semantisch und strukturell korrekten Seiten erstellen, dazu sind HTML5 und CSS3 viel zu komplex. Die Grundlagen wirst du lernen müssen. Dazu muss noch das Verständnis für die Anwendung von HTML5 und CSS3 kommen, womit ein Großteil der Webseitenersteller (auch mit mehr Erfahrung als du) heutzutage überfordert ist.

Um zu zeigen wie das gehen kann habe ich mal eine Beispielseite mit Responsive Design erstellt, wobei der HTML-Quelltext der von mir angegebene ist.

Da die Besucher bei schmaleren Bildschirmen keine unnötigen Informationen wollen, habe ich dort das Logo ausgeblendet und optisch angedeutet, das die übrigen 4 Links als Button angezeigt und funktionieren sollen, die bequem auf einem Touchscreen mit den Fingern bedient werden können. Dazu ist nur noch etwas Feintuning erforderlich. Das kannst du einfach ausprobieren, indem du das Browserfenster schmaler ziehst oder auf einem Smartphone / Tablet aufrufst.

Eine passende Schriftart müsste man sich auch noch raussuchen, ich habe nur mal auf die Schnelle eine mit Google-Font eingefügt um zu zeigen, das auch dafür keine Grafiken erforderlich sind um die Grundregel: Text ist Text einzuhalten.

Auch wenn der Zoom-Faktor deutlich erhöht wird zerfällt das Layout nicht sondern wandelt sich wunschgemäß in die Button-Ansicht.

Die Besucher können also frei bestimmen, wie sie die Seite anschauen wollen, zum Beispiel auch, ob sie alle Grafiken ausblenden wollen. Die Informationen als Text stehen ihnen immer zur Verfügung.

http://foreninfo.bplaced.net/seiten_fremdseiten/2014_02_04_nick_01.html

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Hey,

vielen dank für deine Mühe! Habe es mir gestern Ausführliche angeschaut, insbesondere den CSS part und natürlich auch das verhalten im Browser - Stichwort Responsive Design.



Ein weiteres Problem ist, das dir die Grundlagen für HTML und CSS fehlen. Mit Raten kannst du keine semantisch und strukturell korrekten Seiten erstellen, dazu sind HTML5 und CSS3 viel zu komplex. Die Grundlagen wirst du lernen müssen.
Zum Vergrößern anklicken....

Natürlich. Wie am anfang meines post geschrieben beschäftige ich mich erst seit kurzer zeit mit HTML und CSS. Fange grade also erst an Sachen wie diese Navigation praktisch umzusetzen. Mit ordentlich Gestellten fragen bekomme ich aber hoffentlich auch in Zukunft antworten auf solche grundlegenden Fragen sofern ich keine anderen Wege finde.


Gruß

nick
 
Hallo

Mit ordentlich Gestellten fragen bekomme ich aber hoffentlich auch in Zukunft antworten auf solche grundlegenden Fragen sofern ich keine anderen Wege finde.
Zum Vergrößern anklicken....

Davon kannst du ausgehen.

Meine Anmerkungen sollten zum Ausdruck bringen, das ich das Gefühl habe, das du zu hohe Anforderungen an dich selbst stellst. Heutzutage kann niemand mehr HTML / CSS in einigen Tagen oder Wochen lernen. Dazu ist die Thematik viel zu komplex geworden. Grade auch in Hinblick auf immer neue Techniken und Anforderungen (Smartphones, Tablets, Touchscreens, Semantik) muss man viel abstrakt denken können.

Gruss

MrMurphy
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben