Ich bin das Layout noch mal von vorne mit den jetzt bekannten Informationen angegangen.
Dazu habe ich das HTML und CSS nach den aktuellen Regeln und den bewährten Vorgehensweisen erstellt.
Vom Bootstrap werden die grundsätzlichen CSS-Regeln übernommen, also zum Beispiel die Schriftgröße. Das wird auch sinnvoll sein.
Ich selbst verwende einige grundsätzliche CSS-Angaben, die sich bewährt haben und die sinnvoll sind. Ich teste deshalb nicht aus, ob die notwendig sind oder nicht. Für mein folgendes Beispiel könnten folgende meiner grundsätzlichen CSS-Angaben notwendig sein:
* {
/*box-sizing: border-box;*/
min-width: 1px;
}
figure {
min-width: 1px;
max-width: 100%;
min-height: 1px;
margin: 0rem;
}
img {
min-width: 1px;
display: block;
max-width: 100%;
/*max-height: 100vh;*/
border: 0px;
}
Alles anzeigen
Mein Beispiel HTML sieht dann folgendermaßen aus:
<article class="buchvorstellung">
<section>
<h1>Bildband: Nationalparks im Südwesten der USA</h1>
<div>
<figure>
<img src="https://www.mariposa-designography.com/images/printdesign/bildband_np-usa/bildband_np-usa_vorschau.jpg">
</figure>
<p>Dieser Bildband ist als Projekt im Rahmen des Fachlehrgangs Grafik und Mediengestaltung 2019/2020 am BFI Tirol entstanden.</p>
<p>Er enthält Wissenswertes über 10 verschiedene Nationalparks im Südwesten der USA, die ich auf meiner Reise im Sommer 2019 besucht habe. Zudem beinhaltet er ca. 400 Bilder, die ich selbst fotografiert habe.</p>
<p>Gestaltet wurde der Bildband in Adobe InDesign und Adobe Illustrator. Die Fotos wurden in Adobe Photoshop entwickelt und bearbeitet.</p>
</div>
<p>
<a class="button" href="https://1drv.ms/b/s!AhBawRxJHgjQaYfol-obkCDNdjo" target="_blank">Bildband ansehen</a>
</p>
</section>
<section>
<h1>Bildband: Nationalparks im Südwesten der USA</h1>
<div>
<figure>
<img src="https://www.mariposa-designography.com/images/printdesign/bildband_np-usa/bildband_np-usa_vorschau.jpg">
</figure>
<p>Dieser Bildband ist als Projekt im Rahmen des Fachlehrgangs Grafik und Mediengestaltung 2019/2020 am BFI Tirol entstanden.</p>
</div>
<p><a class="button" href="https://1drv.ms/b/s!AhBawRxJHgjQaYfol-obkCDNdjo" target="_blank">Bildband ansehen</a></p>
</section>
<section>
<h1>Bildband: Nationalparks im Südwesten der USA</h1>
<div>
<figure>
<img src="https://www.mariposa-designography.com/images/printdesign/bildband_np-usa/bildband_np-usa_vorschau.jpg">
</figure>
<p>Dieser Bildband ist als Projekt im Rahmen des Fachlehrgangs Grafik und Mediengestaltung 2019/2020 am BFI Tirol entstanden.</p>
<p>Er enthält Wissenswertes über 10 verschiedene Nationalparks im Südwesten der USA, die ich auf meiner Reise im Sommer 2019 besucht habe. Zudem beinhaltet er ca. 400 Bilder, die ich selbst fotografiert habe.</p>
</div>
<p><a class="button" href="https://1drv.ms/b/s!AhBawRxJHgjQaYfol-obkCDNdjo" target="_blank">Bildband ansehen</a></p>
</section>
</article>
Alles anzeigen
Die Texte haben durch Löschen einiger Absätze unterschiedliche Längen.
Dazu dann das folgende CSS:
/*.buchvorstellung*/
@media all {
.buchvorstellung section {
padding: 0.5rem;
border: 1px solid grey;
margin-bottom: 1rem;
}
.buchvorstellung section>div figure {
margin-bottom: 1rem;
}
.buchvorstellung section>p {
text-align: right;
}
}
@media only screen and (min-width: 650px) {
.buchvorstellung {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
grid-auto-rows: 1fr;
}
.buchvorstellung section {
display: flex;
flex-direction: column;
}
.buchvorstellung section>div {
overflow: hidden;
margin-bottom: 1.5rem;
}
.buchvorstellung section>div figure {
float: left;
max-width: 350px;
margin-right: 1rem;
}
.buchvorstellung section>p {
margin-top: auto;
}
}
Alles anzeigen
Farben, Abstände, Rahmen spielen dabei keine Rolle, es sind nur die notwendigen angegeben.
Dadurch entsteht ein sehr flexibles Card-Layout.
Die Textlänge ist egal.
Der Link steht immer unterhalb vom Bild und vom Text, egal welches länger ist.
Der Text floatet ab einer passender Breite um das Bild.
Die einzelnen Cards sind alle gleich hoch (da habe ich selbst etwas dazugelernt), unabhängig davon, in welcher Reihe sie stehen. Die Höhe wird dabei von der höchsten Card bestimmt.