Slideshow html

[Rolf B]

Hallo idna001,

Aber eigentlich habe ich ja im Moment nur noch das Problem ...

...dass Du nicht weißt, was Du tust, und es rein zufälligerweise funktioniert.

   <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

Diese Zeile brauchst Du, aber den Script-Block direkt darunter, von <script> bis </script>, den kannst Du löschen. Der tut nichts weiter als "document loaded" und "windows loaded" auszugeben, sobald die entsprechenden Ereignisse vom Browser signalisiert werden.

<nav>
... jede Menge Styles
</nav>

das passt überhaupt nicht. <nav>...</nav> ist ein HTML Element, das dazu dient, Navigationsbereiche zu kennzeichnen. Die <li> Elemente, die direkt unter dem <nav> Bereich stehen, gehören dort hinein. Natürlich nochmal in ein Listen-Element eingeschlossen.

Also nach diesem Muster:

<nav>
   <ul>
      <li>...</li>
      <li>...</li>
      <li>...</li>
   </ul>
</nav>

Das, was jetzt Inhalt des <nav> Blocks ist, sind Style-Angaben für die Diashow. Die greifen derzeit nicht. Damit sie das tun, musst Du sie nach oben verschieben, in den durch <style>...</style> begrenzten Bereich hinein. Wo der Browser nach Styles sucht, erklärt Dir der CSS Bereich unseres Wikis.

Achte beim Verschieben der Styles dabei darauf, dass nichts kaputt geht: In <style> stehen Style-Regeln. Jede einzelne Regel ist, ganz grob, ein Block, der folgendem Schema folgt, und dieses Schema muss strikt eingehalten werden, sonst versteht der Browser es nicht. Ok, Kommentarbereiche gibt's da auch, die werden durch /* ... */ gebildet.

Selektor {
   Eigenschaft:Wert;
   Eigenschaft:Wert;
   Eigenschaft:Wert;
}

Das <ul> Element ist in deinen Styles übrigens vorgesehen, du hast es nur scheinbar aus dem HTML entfernt. Vermutlich, weil es sich mit dem <ul> Element der Slideshow gebissen hat. Man kann verschiedene ul Elemente aber auch unterschiedlich stylen.

Deine derzeitige Navigation ist mit float:left gemacht. So war es früher üblich, bevor es Flexbox gab. Das ist ganz einfach. Im Moment hast Du:

        ul { font-size: 2em; }

        li.hm2 {
            /* Textfluss ändern */
            float: left;
            /* Aufzählungspunkte entfernen */
            list-style-type: none;
            /* Abstand */
            margin-right: 15px;
        }

        ul {
            text-align: left;
            width: 70%;
            position:relative;
            left: 0%;
        }

Der erste ul Block war sicherlich für deine Navigation gedacht. Wofür der zweite dient, weiß ich nicht. Wenn Du einfach nur ul als Selektor schreibst, gilt die Regel für Navigation und Slideshow, und stört vermutlich beide. Meine Empfehlung wäre, den Inhalt des zweiten ul Blocks in den .slideshow Block weiter unten zu verschieben, weil mir nicht ersichtlich ist, was davon für die Navigation wichtig wäre. Zumindest das position:relative ist für die Slideshow wichtig, weil die Bilder mit position:absolute Positioniert werden, und die brauchen ein position:relative Element als Bezugspunkt (ansonsten ist der Bezugspunkt oben links im Dokument^[1]).

Und die width: Angabe ist dann doppelt, width:70% kann weg weil das vom width:100% im .slideshow Block eh überschrieben wird.

Für das Menü-ul verwende den Selektor nav ul { ... } - heißt: Nur für ein ul Element, das Kind eines nav Elements ist.

Für die Slideshow gibt's jetzt schon einen Selektor: .slideshow { ... } - heißt: Für ein Element, bei dem die Klasse slideshow notiert ist. Das könnte man auch als ul.slideshow notieren, aber es ist üblich, Selektoren nicht genauer zu machen als unbedingt nötig.

Die li Elemente im Menü hast Du derzeit mit einem Klassenselektor identifiziert (li.hm2), das kannst Du aber auch mittels nav li machen, also li die in einem nav Element eingeschlossen sind. Dann ist es konsistent zum ul Element. Und die class="hm2" Angabe an den li Elementen des Hauptmenüs kann dann auch weg.

Das float:left kann ebenfalls weg, und dem ul Element der Navigation gibst Du display:flex;. Damit wird die Liste zur Flexbox und die li darin werden nebeneinander angeordnet. Mit anderen Flexbox-Eigenschaften (z.B. justify-content kannst Du angeben, wo die li platziert werden. Links, mitte, rechts, wie wird der Leerraum verteilt, Flexbox hat viele Optionen.

   nav ul {
      font-size: 2em;
      display: flex;
   }
   nav li {
      /* Aufzählungspunkte entfernen */
      list-style-type: none;
      /* Abstand */
      margin-right: 15px;
   }

   .slideshow {
      text-align: left;
      width: 70%;
      position:relative;
      left: 0%;
   }

Die nächste Edition deiner Seite solltest Du vielleicht online vorzeigen. Dann kann man sie mit den Browser-Entwicklerwerkzeugen (kennst Du die? F12 Taste?) inspizieren und live untersuchen.

Rolf

---

1. Ja Gunnar, ich weiß dass der richtige Begriff "Viewport" ist, aber das wird mir hier zu kompliziert zu erklären ↩︎