Servus! > Benötige Hilfe bei CSS, bin absoluter Neuling. 👍 Dann hast Du dir noch nichts falsches angewöhnt! Zum Einstieg: * [CSS/Einstieg_in_CSS](https://wiki.selfhtml.org/wiki/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: ~~~HTML <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](https://wiki.selfhtml.org/wiki/HTML/Textstrukturierung/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](https://wiki.selfhtml.org/wiki/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](https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/grid): ~~~CSS .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](https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Webdesign) * [CSS/Tutorials/Layout_mit_Grid](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Layout_mit_Grid) Herzliche Grüße Matthias Scharwies -- Es gibt viel zu tun: *[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}

Servus! > Benötige Hilfe bei CSS, bin absoluter Neuling. 👍 Dann hast Du dir noch nichts falsches angewöhnt! Zum Einstieg: * [CSS/Einstieg_in_CSS](https://wiki.selfhtml.org/wiki/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: ~~~HTML <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](https://wiki.selfhtml.org/wiki/HTML/Textstrukturierung/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](https://wiki.selfhtml.org/wiki/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](https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/grid): ~~~CSS .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. Was dieses Beispiel nicht macht: feste Pixelgrößen. Die kann man nämlich nicht vorhersehen. Mehr Info: * [HTML/Tutorials/responsive_Webdesign](https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Webdesign) * [CSS/Tutorials/Layout_mit_Grid](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Layout_mit_Grid) Herzliche Grüße Matthias Scharwies -- Es gibt viel zu tun: *[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}