Mehrere Boxen jeweils mit Bild, H1 und P darin - untereinander angeordnet

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tueftler

Neues Mitglied
22 Januar 2020
5
0
1
35
Hallo Webmasters,

ich bin Anfänger in HTML und CSS und möchte ein Layout wie folgt erstellen.

Ein Div über die ganze Breite der Website.
Darin:
-links ein Bild
-rechts daneben eine Überschrift und unter der Überschrift ein Paragraph (beides zusammen in etwa so hoch wie das Bild).

Hier mein HTML:

<div class="content">

<article>
<div class="article">
<img src="img/bidl1.jpg" class="bild" alt="office">
<h1>Überschrift</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
</div>
</article>

<br> <!--Break-Tag nur eine Notlösung, um nachrücken des Paragraphs zu verhindern.-->

<article>
<div class="article">
<img src="img/bild.jpg" class="bild" alt="geheim">
<h1>Überschrift</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
</div>
</article>

<br> <!--Break-Tag nur eine Notlösung, um nachrücken des Paragraphs zu verhindern.-->
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>

</div>

Hier mein CSS:

.bild {
margin-right:15px;
width:30%;
height:auto;
float:left;
}
.article {
width:100%;
margin:40px auto;
}
.article h1 {
font-size:30px;
}

Problem:
Die Anordnung innerhalb des ersten article-Divs passt so weit. Aber der Inhalt des zweiten "article" containters rutscht nach oben direkt unter den <p> des vorherigen divs. Der Margin-Abstand des Article-Divs ist da, aber die Inhalte des 2. Article rutschen in den ersten. Wenn ich ein popliges <br> dazwischen baue, sieht es zwar korrekt aus, aber da gibts bestimmt eine elegantere Lösung.

Das ist hier jetzt nur ein Beispiel. Was habt Ihr allgemein für Tipps, dass Container mit verschiedenen Inhalten (Bilder und Paragraphs, Überschriften usw.) untereinander oder nebeneinander oder auch in anderer Andordnung responsive platziert werden können, ohne dass die Inhalte sich ungünstig verschieben.

In Grid, Flex und hier eben float hab ich schon reingeschnuppert, aber für dieses Beispiel finde ich gerade keine Lösung.

Hoffe auf Eure weisen Ratschläge.

Vielen Dank im Voraus
Markus
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.615
314
83
67
der Inhalt des zweiten "article" containters rutscht nach oben direkt unter den <p> des vorherigen divs. Der Margin-Abstand des Article-Divs ist da, aber die Inhalte des 2. Article rutschen in den ersten. Wenn ich ein popliges <br> dazwischen baue, sieht es zwar korrekt aus, aber da gibts bestimmt eine elegantere Lösung.
Diese Probleme sind typisch für float-Layout und treten nicht auf, wenn man Flex verwendet.

Was habt Ihr allgemein für Tipps, dass Container mit verschiedenen Inhalten (Bilder und Paragraphs, Überschriften usw.) untereinander oder nebeneinander oder auch in anderer Andordnung responsive platziert werden können, ohne dass die Inhalte sich ungünstig verschieben.
Auch dafür ist Flexlayout die Lösung, weil man die Anordnung (nebeneinander/untereinander) und die Ausrichtung (zentriert etc.) damit sehr einfach steuern kann.

Außerdem bietet sich für dein Beispiel die Verwendung des figure-Tags an.

Code:
    <style>
        figure {
            display: flex;
        }

        figure figcaption {
            flex: 1;
            margin: 1em;
        }

        figure div {
            flex: 1;
        }

        figure img {
            width: 100%;
            height: auto;
        }
    </style>
    <div class="content">

        <figure>
            <div>
                <img src="images/dia0.jpg" class="bild" alt="office">
            </div>
            <figcaption>
                <h1>Überschrift</h1>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                    labore
                    et dolore magna aliquyam erat, sed diam voluptua. </p>
            </figcaption>
        </figure>
        <figure>
            <div>
                <img src="images/dia1.jpg" class="bild" alt="office">
            </div>
            <figcaption>
                <h1>Überschrift</h1>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                    labore
                    et dolore magna aliquyam erat, sed diam voluptua. </p>
            </figcaption>
        </figure>
    </div>
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.615
314
83
67
PS: Durch diese Frage bei Stackoverflow:
ist mir klar geworden, wie man auf den unschönen Container um das img verzichten kann: Indem man min-width und min-height auf 0 setzt.
Einschränkung: Funktioniert nur solange die Höhe der Caption kleiner als die Höhe des Bildes ist.
Code:
    <style>
        figure {
            display: flex;
        }

        figure figcaption {
            overflow: hidden;
            flex: 1;
            padding: 1em;
        }

        figure img {
            overflow: hidden;
            width: 100%;
            flex: 1;
            min-width: 0;
            min-height: 0;
            height: auto;
        }

        figure img {
            height: auto;
        }
    </style>
    <div class="content">
        <figure>
            <img src="images/dia0.jpg" class="bild" alt="office">
            <figcaption>
                <h1>Überschrift</h1>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                    labore
                    et dolore magna aliquyam erat, sed diam voluptua. </p>
            </figcaption>
        </figure>
        <figure>
            <img src="images/dia1.jpg" class="bild" alt="office">
            <figcaption>
                <h1>Überschrift</h1>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
                    labore
                    et dolore magna aliquyam erat, sed diam voluptua. </p>
            </figcaption>
        </figure>
    </div>
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.615
314
83
67
PPS:
Einschränkung: Funktioniert nur solange die Höhe der Caption kleiner als die Höhe des Bildes ist.
Dazu ist mir eingefallen, dass die Ursache dafür ist, dass der Default-Wert für align-items stretch ist - das führt dazu, dass das Bild auf die Höhe des Flexcontainers gestreckt wird. Kann man unterbinden, indem man es auf center, flex-start oder flex-end setzt.
 

Tueftler

Neues Mitglied
22 Januar 2020
5
0
1
35
Hey Sempervivum,
erneut hast Du mir den Weg erleuchtet. Vielen Dank für die Hilfe.

Das <figure> und <figcaption> passt für meine Zwecke wirklich absolut perfekt und die Flexbox ist ja eine echte Zauberkiste. Bin grad am experimentieren.

VIELEN DANK, Du genialer Typ! :cool:
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.615
314
83
67
Gern geschehen!
Wie man an dem min-height sieht, hat aber auch Flexbox einige Fallstricke bereit. Ich habe erst durch die Überlegungen in diesem Thread gelernt, wie es ohne den Container um das img geht und warum es ohne das min-height: 0; nicht funktioniert.
 
Werbung:

Latest posts