Darstellung von Bild, Text, Bild

[Gerhard]

Hallo,
wie kann ich auf einfache Art links ein Bild, in der Mitte einen Text und rechts wieder ein Bild realisieren?
Zuerst denke ich da an die Erstellung einer Tabelle.

[Matthias Scharwies]

Servus!

Hallo,
wie kann ich auf einfache Art links ein Bild, in der Mitte einen Text und rechts wieder ein Bild realisieren?

Zuerst denke ich da an die Erstellung einer Tabelle.

Nein!

Nimm Grid Layout

frei adaptiert:

.gallery  {
    display: grid;
		gap: 0.5em;
}

@media (min-width: 45em) { 
	/* Breite beträgt mindestens 45em */ 
	.gallery {
    grid-template-columns: 1fr 2fr 1fr;	
	}
}

Die Werte für fr (Bruchteile) kannst du auch durch em oder px-Angaben ersetzen.

Dein Inhalt wäre so verteilt:

<div class="gallery">
  <img ...>
  <div  class="text">
    <p> ... </p>
   <p>  ... </p>
  </div>
  <img ...>
</div>

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

frei adaptiert:

@media (min-width: 45em) { 
	/* Breite beträgt mindestens 45em */ 
	.gallery {
    grid-template-columns: 1fr 2fr 1fr;	
	}
}

In der Vorlage nachgeschaut: Ach je, der Kommentar ist da schon drin.

Der sollte weg. Man sollte kommentieren, warum man etwas tut, nicht was – besonders nicht, wenn der Code selbsterklärend ist, was bei min-width: 45em der Fall ist.

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar,

Ein Hinweis darauf was die Media Query tut, ist sinnvoll, aber, ja, nicht im Kommentar, sondern im Beitext. Unser Wiki hat viele solcher Kommentare, weil der Code für Einsteiger ist. Da kommentiert man vieles, was für Experten selbsterklärend ist.

Dass das Grid auf schmaleren Viewports die Blöcke untereinander setzt, weil dann kein Column-Template gesetzt ist, könnte man auch anmerken. Und 1fr für die Außenspalten ist leider suboptimal, wenn die min-width nur knapp überschritten wird. Gerade auf meinem Handy bemerkt, die Navigation bricht dann um.

Ich bin bis Sonntag nicht ausgestattet, um das spontan zu verbessern.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Ein Hinweis darauf was die Media Query tut, ist sinnvoll, aber, ja, nicht im Kommentar, sondern im Beitext.

Genau, wenn etwas erklärt werden soll, dann in Prosa, nicht im Code.

Unser Wiki hat viele solcher Kommentare, weil der Code für Einsteiger ist. Da kommentiert man vieles, was für Experten selbsterklärend ist.

Kommentare, die lediglich eine Übersetzung von Bezeichnern oder Schlüsselwörtern sind, sollten weg. Ja, der Code ist für Einsteiger, aber wir sollten die nicht für dumm halten.

Ein evtl. sinnvoller Kommentar an der Stelle^[1] wäre

    /* 3-spaltiges Layout für breitere Viewports */
    @media (min-width: 45em) { 
      .gallery {
        grid-template-columns: 1fr 2fr 1fr;	
      }
    }

Kwakoni Yiquan

---

1. Nachtrag: nicht genau die Stelle, sondern über dem Mediaquery-Block ↩︎

[Giselle]

Hallo!

ich habe jetzt folgendes realisiert.

CSS

.gallery  {
    display: grid;
		gap: 0.5em;
}

@media (min-width: 45em) { 
	.gallery {
    grid-template-columns: 1fr 2fr 1fr;	
	}

html

<div class="gallery"  style="margin-top:2em;">
  <div>
    <img src="/bilder/bild1.webp" style="max-width:150px; width:100%; height:auto;">
  </div>
  <div>
    <center style="margin-top:2em;">
	<h2>Willkommen</h2>
	<h3>in ............</h3>
	</center>
  </div>
  <div>
  <img src="/bilder/bild2.webp" style="max-width:150px;  width:100%; height:auto;">
  </div>
 </div>

Ergebnis Bilder und Text liegen untereinander statt nebeneinander.

[Duncan Idaho]

Hallo!

ich habe jetzt folgendes realisiert.

Ergebnis Bilder und Text liegen untereinander statt nebeneinander.

Wie breit ist dein Viewport?

Du könntest

a. die media query kleiner machen

b. die 150px Maximalbreite ins Grid packen:

@media (min-width: 25em) { 
	.gallery {
    grid-template-columns: minmax(5em, 150px) 1fr minmax(5em, 150px) ;
	}

Dabei wird eine minmax-Funktion verwendet.

[Gunnar Bittersmann]

@@Giselle

ich habe jetzt folgendes realisiert.

Wo kann man sich deinen Versuch denn ansehen? (Und mit „ansehen“ meine ich keinen Screenshot.)

    <center style="margin-top:2em;">
	<h2>Willkommen</h2>
	<h3>in ............</h3>
	</center>

Das Markup ist falsch: „in ............“ ist keine Unterüberschrift zu „Willkommen“, sollte also nicht h3 sein.

„Willkommen“ und „in ............“ bilden zusammen eine Überschrift, beides gehört also in h2.

Die richtige Überschriften-Hierarchie ist insbesondere wichtig für Nutzer, die Webseiten nicht visuell erfassen, sondern mit assistiven Technologien wie Screenreadern.

Wenn du beides unterschiedlich stylen willst (verschiedene Schriftgröße? Warum eigentlich?), dann setze eins davon (oder beides) in ein span:

<h2>
  Willkommen
  <span>in ............</span>
</h2>

Im Stylesheet könnte dann sowas stehen wie

h2 {
  margin-top: 2em;
  text-align: center;

  span {
    font-size: 0.8em;
  }
}

Wie du siehst, geht die Zentrierung auch mit CSS. <center> hat im Markup nichts zu suchen.

Oben gezeigt die Variante mit Nesting. Ohne sieht’s so aus:

h2 {
  margin-top: 2em;
  text-align: center;
}

h2 span {
  font-size: 0.8em;
}

Kwakoni Yiquan

[Felix Riesterer]

Bist Du jetzt Gerhard, oder Giselle?

<div>
 <img src="/bilder/bild2.webp" style="max-width:150px;  width:100%; height:auto;">
</div>

Es gibt keinen Grund, die <img>-Elemente zusätzlich in <div>-Elemente zu verpacken, da sie bereits in einem passenden Eltern-Element (<div>) sind.

Man kann ganz klar erkennen, dass Du zwei Grafiken als Schmuckelemente verwendest. Das sind keine Inhaltsgrafiken wie z. B. Abbildungen, sondern im Wesentlichen Tapeten, die eine Art Vereinswappen oder -logo zeigen. Das bedeutet, dass Du dafür besser keine <img>-Elemente verwendest, sondern Hintergrundbilder!

Wenn Du doch diese Grafiken als Inhaltselemente verwenden möchtest, dann sollte da auch ein passender Text dazu, womit Du sie gleich in ein <figure>-Element mit <figcaption> stecken kannst.

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo Gerhard,

Das HTML dazu folgt dem Muster

<div id="xy">
  <img src="..." alt="...">
  <p>...</p>
  <img ...>
</div>

Der Rest ist CSS. Statt xy nimmst du eine passende id, oder eine class. Vielleicht ist das Element auch anders im CSS identifizierbar.

Je nach Kontext kann das div auch ein semantisch passenderes Element sein (header, footer, aside, etc). Statt img vielleicht auch picture oder svg.

Bitte mach Dir zuerst Gedanken, wie das Layout auf einem schmalen Display aussehen soll.

Abhängig von Ergebnis dieser Planung sollte die Antwort Flexbox- oder Grid-Layout für das div sein. Infos dazu findest du unter diesen Stichwörtern im Selfhtml Wiki.

Tabelle scheidet aus, du hast keine tabellarischen Daten.

Rolf