nicht angemeldet
Wenn ich die Auflösung verändere, dann wird der Abstand zwischen den Elementen Bild und Beschreibung größer oder kleiner.
Für Abstände, Rahmen, schmale Container, ..., die sich nicht mit der Fenstergröße oder dem Zoom-Faktor ändern sollen benutze ich starre oder relativ starre Einheiten wie px oder rem.
Gibt es hierfür noch eine andere Möglichkeit?
Ja, du verwendest Klassen (class="").
Zu deinem Layout: Linien und erst recht Rahmen trennen Inhalte und erschweren das Aufnehmen der Informationen. Durch die Rahmen wird bei deiner Seite das Bild von seiner zugehörigen Information getrennt.
Ich biete dir mal ein Layout mittels CSS-Grid an, wie ich so ein Layout erstellen würde. Die Seitenbreite wird ausgenutzt und das Layout ist sehr flexibel. Es passt sich "jeder" Browserfensterbreite sehr flexibel an. Folgend der komplette Quelltext der Seite. Er enthält auch einige nicht für das Layout notwendige CSS-Angaben, da ich mir eine Datei erstellt habe, die ich für Tests immer als Grundlage verwende, das sollte dich aber nicht stören.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Cards</title>
<meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link href="../css/zentrale.css" rel="stylesheet"> -->
<style>
/* Überschriften - font-family: 'Roboto Slab', Serif; */
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab);
/* Fließtext - font-family: 'Roboto', Sans-Serif"; */
@import url(https://fonts.googleapis.com/css?family=Roboto);
/* Zahlen* - font-family: 'Merriweather'; */
@import url(https://fonts.googleapis.com/css?family=Merriweather);
/* Basisangaben */
@media all {
* {
min-width: 1px;
}
html {
}
body {
padding: 1rem 1rem 2rem 1rem;
margin: 0rem auto 0rem auto;
}
}
/* Schriften */
@media all {
html {
font-family: sans-serif;
font-size: 120%;
line-height: 1.3;
}
h1 {
font-family: 'Roboto Slab', serif;
font-size: 1.2rem;
letter-spacing: 0.1rem;
margin: 0.5rem 0rem 0.5rem 0rem;
}
h2, h3, h4, h5, h6 {
font-family: 'Roboto Slab', serif;
font-size: 1rem;
margin: 0.5rem 0rem 0.5rem 0rem;
}
p, li, dl, dt, address {
font-family: Roboto, sans-serif;
font-size: 1rem;
font-style: normal;
margin: 0.5rem 0rem 0.5rem 0rem;
}
a {
/* darkblue */
color: hsla(240, 100%, 27%, 1);
text-decoration: none;
outline: none;
margin: 0rem 0rem 0rem 0rem;
}
figcaption {
font-family: Roboto, sans-serif;
font-size: 0.9rem;
margin: 0rem 0rem 0rem 0rem;
}
.zahl {
font-family: "Merriweather";
font-size: 1rem;
}
}
/* Grafiken */
@media all {
figure {
text-align: center;
min-width: 1px;
max-width: 100%;
min-height: 1px;
margin: 0rem;
display: inline-block;
}
img {
min-width: 1px;
display: block;
max-width: 100%;
border: 0px;
}
figcaption {
text-align: left;
display: inline-block;
}
}
/* .cards (Container Query)*/
@media all {
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 1rem;
}
.cards>* {
padding: 0.5rem;
border: 1px solid grey;
border-radius: 0.5rem;
container-type: inline-size;
}
@container (min-width: 500px) {
.cards>*>* {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
}
.cards figure {
display: block;
}
.cards img {
display: block;
max-height: 300px;
border-radius: 0.5rem;
margin: 0rem auto 0rem auto;
}
}
</style>
</head>
<body>
<header>
<h1>Cardlayout</h1>
</header>
<main>
<section class="cards">
<article>
<div>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Sigourney_Weaver_by_Gage_Skidmore.jpg/668px-Sigourney_Weaver_by_Gage_Skidmore.jpg" alt="Sigourney Weaver">
</figure>
<section>
<p>Sigourney Weaver (* 8. Oktober 1949 als Susan Alexandra Weaver in New York) ist eine US-amerikanische Schauspielerin.</p>
</section>
</div>
</article>
<article>
<div>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/4/45/Reese_Witherspoon_2005.jpg" alt="Laura Jeanne Reese Witherspoon">
</figure>
<section>
<p>Laura Jeanne Reese Witherspoon (* 22. März 1976 in New Orleans, Louisiana) ist eine US-amerikanische Schauspielerin, Filmproduzentin und Oscar-Preisträgerin.</p>
</section>
</div>
</article>
<article>
<div>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Lily_Allen_%40_INmusic_festival.jpg/597px-Lily_Allen_%40_INmusic_festival.jpg" alt="Lily Allen">
</figure>
<section>
<p>Lily Allen, bürgerlich Lily Rose Beatrice Cooper (* 2. Mai 1985 in Hammersmith, London) ist eine britische Popsängerin, Songwriterin, Showmasterin und Schauspielerin.</p>
</section>
</div>
</article>
<article>
<div>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Pressekonferenz_K%C3%B6lner_Sportjahr_2019-3059.jpg/900px-Pressekonferenz_K%C3%B6lner_Sportjahr_2019-3059.jpg" alt="Renate Lingor">
</figure>
<section>
<p>Renate „Idgie“ Lingor (* 11. Oktober 1975 in Karlsruhe) ist eine ehemalige deutsche Fußballspielerin.</p>
</section>
</div>
</article>
<article>
<div>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Zoe_Bell_2019_by_Glenn_Francis.jpg/600px-Zoe_Bell_2019_by_Glenn_Francis.jpg" alt="Zoë Bell">
</figure>
<section>
<p>Zoë Bell (* 17. November 1978 auf Waiheke Island, Auckland Region) ist eine neuseeländische Stuntfrau und Schauspielerin.</p>
</section>
</div>
</article>
<article>
<div>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/a/ae/Bonnie_Tyler.jpg" alt="Bonnie Tyler">
</figure>
<section>
<p>Bonnie Tyler MBE (* 8. Juni 1951 als Gaynor Hopkins in Skewen, Neath) ist eine britische Pop- und Rocksängerin.</p>
</section>
</div>
</article>
<article>
<div>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/2019_BR_Filmbrunch_-_Jutta_Speidel_-_by_2eight_-_DSC6737.jpg/599px-2019_BR_Filmbrunch_-_Jutta_Speidel_-_by_2eight_-_DSC6737.jpg" alt="Jutta Speidel">
</figure>
<section>
<p>Jutta Speidel (* 26. März 1954 in München) ist eine deutsche Schauspielerin, Autorin, Hörbuch- sowie Hörspielsprecherin und Synchronsprecherin.</p>
</section>
</div>
</article>
</section>
</main>
<footer>
<p>Originaldiskussion: <a href="https://forum.selfhtml.org/self/2024/oct/26/anordnung-einiger-elemente-im-grid/1817291#m1817291">https://forum.selfhtml.org/</a></p>
</footer>
</body>
</html>
Matthias Scharwies