Autonome list items

[Lusche]

Hallo,

ich versuche derzeit mir HTML und CSS beizubringen um eine Test-Website erstellen zu können. Leider stehe ich damit noch ganz am Anfang. 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. Anstelle das Menu über eine "ul" in den Header zu packen, möchte ich nun 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? Muss ich das eher im "sytle-sheet" behandeln, oder kann ich das ausreichend mit dem HTML Script programmieren.

Danke im Voraus.

[Rolf B]

Hallo Lusche (echt?),

es ist durchaus möglich, HTML Elemente frei zu positionieren. Dazu verwendet man CSS Eigenschaften wie position: absolute zusammen mit top und left.

Das ist nicht das Problem. Problem ist vielmehr, was beim verändern des Viewports (das Browserfenster) oder beim Skalieren der Seite passiert. Sicherlich möchtest du, dass die Anordnung um die Lampe herum erhalten bleibt. Und da wird es kompliziert, weil es sehr viele mögliche Viewports gibt.

Allein schon sicherzustellen dass die Lampe stets sichtbar ist, egal wie großdas Fenster ist, oder ob das Handy hoch oder quer gehalten wird, ist nicht ganz trivial. Fang mal damit an. Es gibt etliche CSS Eigenschaften für den Hintergrund (background-...), die du dafür brauchst. Und du wirst vermutlich rechnen müssen, damit das klappt, dazu hat CSS die calc Funktion.

Achte auch auf korrekte viewport Angaben im head Bereich.

Rolf

[Lusche]

Hab Dank für deine Antwort,

da werde ich mich, wie du auch angesprochen hast, mit dem Viewport auseinandersetzen, aber ich bin froh, dass ich eine Antwort auf meine Frage habe.

Es grüßt

Lusch

(ja, echt)

[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