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?](https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F) * [HTML/Tutorials/Navigation](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Navigation) * [CSS/Tutorials/Einstieg](https://wiki.selfhtml.org/wiki/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 ](https://tympanus.net/codrops/2013/08/09/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](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg) * [SVG/Tutorials/responsive Imagemaps](https://wiki.selfhtml.org/wiki/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 ](https://www.sarasoueidan.com/blog/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. ~~~ XML <a href="kontakt.html"> <rect id="schalter" ...> </a> <a href="referenzen.html"> <circle id="licht" ...> </a> ~~~ Herzliche Grüße Matthias Scharwies -- 25 Jahre SELFHTML → **[SELF-Treffen 05.-07. Juni 2020](https://forum.selfhtml.org/events/4)** in **Mannheim**

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?](https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F) * [HTML/Tutorials/Navigation](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Navigation) * [CSS/Tutorials/Einstieg](https://wiki.selfhtml.org/wiki/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 ](https://tympanus.net/codrops/2013/08/09/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](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg) * [SVG/Tutorials/responsive Imagemaps](https://wiki.selfhtml.org/wiki/SVG/Tutorials/responsive_Imagemaps) Im unteren Tutorial kannst du Teilen einer Grafik (unsichtbare) Felder unterlegen, die dann angeklickt werden können. 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. ~~~ XML <a href="kontakt.html"> <rect id="schalter" ...> </a> <a href="referenzen.html"> <circle id="licht" ...> </a> ~~~ Herzliche Grüße Matthias Scharwies -- 25 Jahre SELFHTML → **[SELF-Treffen 05.-07. Juni 2020](https://forum.selfhtml.org/events/4)** in **Mannheim**