Webdesign - Navigation mit

CSS Webdesign - Navigation mit CSS

Sie sind hier bei der Anleitung Navigation mit Listen und CSS gestalten. Die Navigation wird beim Design mit Stylesheets, in CSS meist mit Listen erstellt. Selbstverständlich lassen sich Listen auch anders einsetzen, etwa zur übersichtlichen Gliederung, zur geodneten Hervorhebung, für eine Aufzählung und mehr.. In diesem Kurs geht es um das Wendesign zu lernen, Webdesign so zu gestalten, dass sie mit CSS Cascading Style Sheets oder in Kurzform Stylesheets strukturiert werden und ein ansprechendes Design erstellt wird.

Wem das Erstellen einer Webseite bzw. die Einarbeitung  in CSS zuviel Arbeit ist, kann sich gerne melden, dass ich die Webseiten erstellen soll, ebenso wenn es um das Redesign von Internetseiten geht.

Wer mit der grundlegenden HTML-Syntax nicht so bewandert ist, der kann bei mir einen HTML-Kurs in Nürnberg, Fürth oder Erlangen als schnelles aber sehr gründliches Einzeltraining belegen.

Navigation waagerecht oder senkrecht

Wie Sie oben sehen wurde eine waagerechte Navigation erstellt und unten eine senkrechte. Klicken Sie auf weiter im Tutorial, um zu sehen Sie wie die mit CSS formatierte Navigation erstellt wird.

Ungeordnete Liste als Navigation erstellen

Für die Navigation in Ihren Internetseiten,  erstellen Sie diese zunächst als ungeordnete Liste und formatieren diese später mit den CSS Anweisungen. Für die folgende Navigation sehe das zum Beispiel so aus:

<div id="navibereich">
<ul>
  <li><a href="http://www.design-magics.de/">Home</a>&nbsp;</li>
  <li><a href="index.html">CSS Workshop</a>&nbsp;</li>
 <li><a href="css-webdesign-workshop-div.html">zur&uuml;ck</a>&nbsp;&nbsp;</li>
  <li><a href="webdesign-navigation-css.html#">weiter</a></li>
</ul>
</div>
<!-- Ende navibereich -->

Navigation oder Liste mit Untermenü

Listen können auch verschachtelt sein, so lassen sich z.B. falls es um eine Navigation geht auch Untermenüs anlegen wie in dem Beispiel:

Hier der Quelltext dazu, beachten Sie dabei die <li> Elemente richtig zu schliessen:
<ul>
<li>Home</li>
<li>Webdesign
<ul> Das Untermenü wird durch erneutes <ul> begonnen
<li>WebDesign barrierefrei</li>
<li>Webvorlagen</li>
</ul> Das Untermenü wird wieder mit </ul> geschlossen !!!
</li> und danach der </li> Bereich Webdesign geschlossen !!!
<li>Webdesign Preise</li> Und hier folgt nun der nächste Menüpunkt
</ul>

Aufzählungszeichen in ungeordneten Listen

Mit: li { list-style-type: square;} gestalten Sie quadratische Auzählungszeichen, allerdings auch, wenn Sie vorne weg mit ol eine Nummerierung vorgegeben haben. Deshalb ist es sinnvoller bei der Gestaltung von Listen mit CSS diese zu verschachteln. ul li { list-style-type: square; } beschränkt die Darstellung von quadratischen Aufzählungszeichen auf den Typ ungeordnete Listen. Hier näheres zu Regeln und zum Verschachteln sowie zu dem Problem mit unterschiedliche Nummerierung bei ungeordneten Listen.

Zwei besondere Links stelle ich Ihnen hier noch vor, welche ebenfalls zur Navigation gehören.
Der Anker ist ein Verweis auf eine Stelle im selben Dokument z.B. hoch zur Navigation: Navigation
Der Skip-Link, den Sie oben am Anfang der Navigation unter Direkt zum Inhalt sehen, hat die Bedeutung, dass Besucher, welche sich die Webseite vorlesen lassen, sich nicht erst jeden Navigationspunkt vorlesen lassen müssen, siondern direkt zum Inhalt, also dem Textbereich springen können. Im Quelltext schaut dies dann so aus:
<a href="#textbereich">Direkt zum Inhalt</a>
womit direkt der Bereich erreicht wird, welcher mit <div id="textbereich"> </div> ausgezeichnet wurde.

Die Anleitung orientiert sich an dem Buch little boxes Webseiten gestalten mit CSS Grundlagen.
Von dem Autor sind die nachfolgenden Titel verfügbar:


Nach oben