nicht angemeldet
Hallo Jochen
Du wirst bislang mit ziemlich viel Theorie gefüttert. Deshalb habe ich mal einen Quelltext erstellt, der eine Beispiellösung für dein aktuelles Problem liefert.
Einfach den gesamten Quelltext in eine .html-Datei kopieren. Dann kannst du die Seite ausprobieren, zum Beispiel indem du die Fensterbreite deines Browsers änderst und das Verhalten dabei beobachtest.
Zum Beispiel das "dans la" immer in einer Zeile steht, weil "la" alleine in einer Zeile nicht cool aussieht. Oder das bei schmalem Fenster nur eine Grafik angezeigt wird und bei noch schmalerem Fenster das Wort "Bienvenue" mit einem Trennstrich umbricht.
Die Seite hat eine komplette Grundstruktur. Und du kannst natürlich Änderungen im Quelltext ausprobieren.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Text zwischen zwei Grafiken</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="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);
/* Basisangaben */
@media all {
* {
min-width: 1px;
}
body {
max-width: 1400px;
padding: 0.5rem 0.5rem 0.5rem 0.5rem;
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, dt, dd, 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;
}
}
/* 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;
}
}
/* .bildbeispiel */
@media all {
.bildbeispiel {
background-color: blanchedalmond;
}
.bildbeispiel :nth-child(1),
.bildbeispiel :nth-child(3) {
max-width: 150px;
margin-left: auto;
margin-right: auto;
display: grid;
}
.bildbeispiel :nth-child(2) {
font-size: 5.5rem;
font-weight: bold;
text-align: center;
}
.bildbeispiel :nth-child(3) {
display: none;
}
}
@media only screen and (min-width: 900px) {
.bildbeispiel {
display: grid;
grid-template-columns: auto 1fr auto;
}
.bildbeispiel :nth-child(2) {
display: grid;
margin-top: auto;
margin-bottom: auto;
}
.bildbeispiel :nth-child(3) {
display: block;
}
}
</style>
</head>
<body>
<header class="pageheader">
<h1>Text zwischen zwei Grafiken</h1>
</header>
<main class="content">
<section class="bildbeispiel">
<figure>
<img src="https://upload.wikimedia.org/wikipedia/de/thumb/a/a9/Deutscher_Fu%C3%9Fball-Bund_logo.svg/255px-Deutscher_Fu%C3%9Fball-Bund_logo.svg.png" alt="Logo des DFB (Deutscher Fußball-Bund">
</figure>
<p>Bien­venue dans la</p>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/de/thumb/a/a9/Deutscher_Fu%C3%9Fball-Bund_logo.svg/255px-Deutscher_Fu%C3%9Fball-Bund_logo.svg.png" alt="Logo des DFB (Deutscher Fußball-Bund">
</figure>
</section>
</main>
<footer class="pagefooter">
<p>Originaldiskussion: <a href="https://forum.selfhtml.org/self/2025/feb/25/divs-ohne-zwischenabstande/1818972#m1818972">https://forum.selfhtml.org/</a></p>
</footer>
</body>
</html>
Rolf B
Gunnar Bittersmann
MudGuard
Matthias Scharwies
Tabellenkalk