Bildergalerie mit HTML und CSS

Zipori · 17. Juni 2019

Guten Abend,

ich bin gerade dabei eine Bildergalerie mit HTML und CSS machen. Es muss nichts in Großformat angezeigt werden. Mein Lehrer meinte ich solle die Bilder in eine div und elternelement section nehmen.

Nun sieht es so aus aber läuft nicht wirklich. Wo ist denn mein Fehler?

Zitat

Code

HTML:

section>
    <div class="galerie">
      <img src="/Images/Grau_Hochzeit.jpg" alt="Hochzeitsportrait">
    </div>
    <div class="galerie">
      <img src="/Images/Grau_Museum.jpg" alt="Im Museum">
    </div>
    <div class="galerie">
      <img src="/Images/Grau_Müde.jpg" alt="Mein Mann und ich">
    </div>
    <div class="galerie">
      <img src="/Images/Grau_Portrait.jpg" alt="Portrait">
    </div>
    <div class="galerie">
      <img src="/Images/Grau_Urlaub.jpg" alt="Familien-Urlaub in California">
    </div>
    <div class="galerie">
      <img src="/Images/Klassenfoto_1.Klasse_Zipora_Sander.JPG" alt="Kinderportrait">
    </div>
    <div class="galerie"></div>
      <img src="/Images/San_Francisco.jpg" alt="Golden Gate Bridge">
    </div>
    <div class="galerie">
      <img src="/Images/Yosemite_National_Park.jpeg" alt="Yosemite National Park">
    </div>
    <div class="galerie">
      <img src="/Images/Chicago_2018.jpeg" alt="Chicago 2018">
    </div>
    <div class="galerie">
      <img src="/Images/San_Simeon.jpg" alt="San Simeon 2019">
    </div>
</section>



CSS:


/* Bilder-Gallerie */

.galerie {
    width: 30px;
    height: 30px;
}

.galerie img {
    width: 100%;
    height: auto;
}

Alles anzeigen

Sempervivum · 18. Juni 2019

Du beschreibst leider nicht, was genau nicht läuft.

Auf jeden Fall hast Du da einen Strukturfehler. Schließendes </div> doppelt:

Code

<section>
        <div class="galerie">
            <img src="/images/dia0.jpg" alt="Hochzeitsportrait">
        </div>
        <div class="galerie">
            <img src="/images/dia1.jpg" alt="Im Museum">
        </div>
        <div class="galerie">
            <img src="/images/dia2.jpg" alt="Mein Mann und ich">
        </div>
        <div class="galerie">
            <img src="/images/dia3.jpg" alt="Portrait">
        </div>
        <div class="galerie">
            <img src="/images/dia4.jpg" alt="Familien-Urlaub in California">
        </div>
        <div class="galerie">
            <img src="/images/01.png" alt="Kinderportrait">
        </div>
        <div class="galerie"></div> <!-- !!! hier -->
        <img src="/images/02.png" alt="Golden Gate Bridge">
        </div>
        <div class="galerie">
            <img src="/images/03.png" alt="Yosemite National Park">
        </div>
        <div class="galerie">
            <img src="/images/04.png" alt="Chicago 2018">
        </div>

Alles anzeigen

Dann willst Du sicher, dass die Bildchen nebeneinander angeordnet werden. Das erreichst Du, indem Du die div.galerie mit display: inline-block; versiehst.

Die Empfehlung deines Lehrers, Divs zu verwenden, ist diskussionswürdig. Es würde sich anbieten, die semantischen figure-Tags zu nehmen.

Code

    <section>
        <figure class="galerie">
            <img src="/images/dia0.jpg" alt="Hochzeitsportrait">
        </figure>
        <figure class="galerie">
            <img src="/images/dia1.jpg" alt="Im Museum">
        </figure>
        <figure class="galerie">
            <img src="/images/dia2.jpg" alt="Mein Mann und ich">
        </figure>
        <figure class="galerie">
            <img src="/images/dia3.jpg" alt="Portrait">
        </figure>
        <figure class="galerie">
            <img src="/images/dia4.jpg" alt="Familien-Urlaub in California">
        </figure>
        <figure class="galerie">
            <img src="/images/01.png" alt="Kinderportrait">
        </figure>
        <figure class="galerie">
            <img src="/images/02.png" alt="Golden Gate Bridge">
        </figure>
        <figure class="galerie">
            <img src="/images/03.png" alt="Yosemite National Park">
        </figure>
        <figure class="galerie">
            <img src="/images/04.png" alt="Chicago 2018">
        </figure>
    </section>
    <style>
        /* Bilder-Gallerie */
        .galerie {
            margin: 0.5rem;
            padding: 0;
            width: 30px;
            height: 30px;
            display: inline-block;
        }

        .galerie img {
            width: 100%;
            height: auto;
        }
    </style>

Alles anzeigen

Zipori · 18. Juni 2019

Die Bilder sollten eigentlich den div-Rahmen füllen und dadurch eine bestimmte größe haben aber bei mir überladen sich die Bilder. Das eine überdeckt das andere und manchmal ist nur eins sichtbar.

Zipori · 18. Juni 2019

VIelen Danke Sempervivum!!!

Es hat geklappt

Bildergalerie mit HTML und CSS

Jetzt mitmachen!

Teilen