Thumbnails anordnen mit Bildunterschrift

  • Hallo,


    lerne gerade HTML und CSS. Bei einem Problem komme ich leider alleine nicht weiter.
    Vielleicht habt ihr einen Tipp für mich, was ich falsch mache ... und zwar:


    Ich möchte für meine Bildergalerie einfach nur eine Übersicht mit den Thumbnails haben. 3-4 Bilder in einer Reihe nebeneinander,
    die weiteren darunter, ebenfalls in einer Reihe. Unter jedem Thumbnail soll ein zweizeiliger Text erscheinen.
    Wenn man auf die Thumbnails klickt soll sich ein neues Fenster öffnen mit der Großansicht der Bilder. Das alleine klappt bei mir wunderbar, nur diese Anordnung der Thumbnails
    will einfach nicht funktionieren. Momentan stehen die Bilder alle untereinander und der Text springt (egal was ich mit "float" verändere) unkontrolliert im Raum herum.


    Mittlerweile habe ich einen Tipp gelesen, wo ich den Text einfach mit "table" vom Rest abgrenzen soll. War aber auch nicht die optimale Lösung.


    Dies wäre mein HTML-Code (ein Teil):


    <div id="bild">
    <a class="Malerei" href="../img/malerei/Abstrakt2016.jpg" title="Abstrakt2016" ><img src="../thumbnails/abstrakt2016_thumbnail.jpg" alt="Abstrakt_Vorschau"></a>
    <p class="thumbnail-caption"></p><table>>Abstrakt (2016) <br />zu Hause in Hamburg-Oldenfelde</table></div>
    <a class="Malerei" href="../img/malerei/woa.jpg" title="Woa"><img src="../thumbnails/woa_thumbnail.jpg" alt="Woa_Vorschau"></a>
    <p class="thumbnail-caption"></p><table>WOA (2015) <br />zu Hause in Bremen</table></div>
    <a class="Malerei" href="../img/malerei/grinning_cat.jpg" title="Grinning_Cat"><img src="../thumbnails/grinning_cat_thumbnail.jpg" alt="Grinning_Cat_Vorschau"></a>
    <p class="thumbnail-caption"></p><table>Grinning Cat (2013) <br />zu Hause in Hamburg-Wandsbek</table>
    <a class="Malerei" href="../img/malerei/owl.jpg" title="Mystic_Owl"><img src="../thumbnails/owl_thumbnail.jpg" alt="Mystic_Owl_Vorschau"></a>
    <p class="thumbnail-caption"></p><table>Mystic Owl (2013) <br />zu Hause in Großensee bei Trittau</table>
    <a class="Malerei" href="../img/malerei/thomysisland.jpg" title="Thomys Island"><img src="../thumbnails/thomysisland_thumbnail.jpg" alt="Thomys_Island_Vorschau"></a>
    <p class="thumbnail-caption"></p><table>Thomys Island (2013) <br />zu Hause in Travemünde</table>
    </div>


    ..und mein kläglicher Versuch in CSS:



    .malerei { text-align: center; font-family: 'PT Sans', sans-serif; float: left;}
    .thumbnail-caption { text-align: center; font-family: 'PT Sans', sans-serif; float; left; }


    .bild {
    max-width: 310px;
    border: 1px solid #000;
    margin: 1em;
    padding: .5em 1.2em;
    text-align: center;
    font-size: .8em;
    }


    Vermute mal ihr habt das schon tausendmal beantwortet aber ich hab leider keinen Artikel gefunden der mir weiter hilft ...


    Vielen Dank im Voraus!! :)

  • Hallo


    Ich sehe eher das folgende HTML



    mit dem folgenden CSS



    Eine komplette Seite könnte dann folgendermaßen aussehen




    Nachtrag: Ich habe einige Tippfehler korrigieren müssen.


    Gruss


    MrMurphy

  • Hallo MrMurphy,


    vielen vielen Dank, das klappt ganz super! :)



    Kleiner Nachtrag: hier standen eben noch zwei Fragen, die haben sich aber beide erledigt. ;)


    Danke noch einmal!


    Gruß,
    Jule

    Dieser Beitrag wurde bereits 2 Mal editiert, zuletzt von Jule_K ()