drei Bilder mit Text über CSS positionieren

[Matthias Scharwies]

Servus!

Benötige Hilfe bei CSS, bin absoluter Neuling.

👍 Dann hast Du dir noch nichts falsches angewöhnt!

Zum Einstieg:

• CSS/Einstieg_in_CSS

Wollte drei Bilder mit Text über CSS positionieren so wie im Bild "BildEntwurf.JPG" aber irgendwie habe ich, da ein kleines Probleme siehe "BildBrowser.JPG" bei den ich Hilfe benötige.

Tipp: Verwende semantisches HTML, damit dein Markup „lesbarer“ wird:

<article class="gallery">
  <figure id="inhalt_1">
 		<img src="bild_1.jpg" alt="Beschreibungstext">
 		<figcaption>
 			TestTextTestTextTestTextTestText
 		</figcaption>
 	</figure>
  <figure id="inhalt_2">
  ...

Für diese drei figure-Elemente benötigst du jeweils nur den gleichen CSS-Code.

Ideen für die Präsentation findest du hier:

• CSS/Tutorials/Bilder_mit_Bildunterschriften

1. Die drei (id="indalt_xx") sollten alle von oben denn gleichen Abstand haben 25px und nicht versetzt sein.

Das geht mit grid Layout:

.gallery {
  	display: grid;
  	grid-template-columns: repeat(3, 1fr);
  	grid-gap: 1em;
}

Damit legst du für das Elternelement article mit der class gallery (Kann man anstelle einer id mehrfach verwenden) 3 Spalten an, die je ein Drittel des verfügbaren Platzes einnehmen.

Kindelemente verteilen sich jetzt automatisch ohne weiteres CSS.

Was dieses Beispiel nicht macht: feste Pixelgrößen. Die kann man nämlich nicht vorhersehen.

Mehr Info:

• HTML/Tutorials/responsive_Webdesign
• CSS/Tutorials/Layout_mit_Grid

Herzliche Grüße

Matthias Scharwies