CSS: kreisförmige Navigation (Circular navigation)

[Matthias Scharwies]

Servus!

ich versuche derzeit mir HTML und CSS beizubringen um eine Test-Website erstellen zu können. Leider stehe ich damit noch ganz am Anfang.

Herzlich willkomen bei SELFHTML!

Hast Du schon unsere Tutorials im Wiki gesehen?

• Wie fange ich an?

• HTML/Tutorials/Navigation

• CSS/Tutorials/Einstieg (Einstieg in CSS)

Derzeit bin ich lediglich am erstellen der Home-Seite: Ich habe dort ein Hintergrundbild, das eine Lampe zeigt und die ganze Seite ausfüllen soll [und] möchte die "nav" so einteilen, dass sie sich um die Lampe herum befindet und ehrlich gesagt bin ich überfragt damit.

Soll ich hierbei lediglich autonome <a>'s verwenden, oder gibt es die Möglichkeit eine bestimmte Liste mit solchen Eigenschaften zu erstellen?

Wie @Rolf B schon sagte, ist HTML für die Auszeichnung des Inhalts zuständig und eine nav mit einer Liste ul schon richtig.

Muss ich das eher im "sytle-sheet" behandeln, oder kann ich das ausreichend mit dem HTML Script programmieren.

Das ist genau eine Aufgabe für CSS, mit dem man das Aussehen und die Position formatiert.

Sara Soueidan hat dies in einem englischsprachigen Tutorial mal vorgestellt:

• Building a Circular Navigation with CSS Transforms

Alternativ könntest Du so etwas mit SVG realisieren. SVG ist eine Auszeichnungssprache für grafische Elemente.

• SVG/Tutorials/Einstieg
• SVG/Tutorials/responsive Imagemaps

Im unteren Tutorial kannst du Teilen einer Grafik (unsichtbare) Felder unterlegen, die dann angeklickt werden können.

Sara Soueidan hat auch hier etwas: Building a Circular Navigation with SVG

Man könnte aber auch Deine Lampe zeichnen und das Element des Schalters, bzw. der Birne, mit einem Link umschließen. CSS würde dann wieder das Aussehen festlegen.

<a href="kontakt.html">
  <rect id="schalter" ...>
</a>
<a href="referenzen.html">
  <circle id="licht" ...>
</a>

Herzliche Grüße

Matthias Scharwies