Problem mit Vorlage: Bilder mit Texten untereinander

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

Wildmops

Neues Mitglied
30 September 2020
5
0
1
49
Hallo!
Ich bin erst vor ein paar Wochen per Selbstkurs in HTML eingestiegen (und habe mich gefreut, dass die ersten HTML-Übungsseiten wie das Internet in den Neunzigern aussahen).
Aktuell bastele ich eine Homepage nach der PHANTOM-Vorlage von HTML5UP! Dabei bin ich auf folgendes Problem gestoßen: Ich möchte mehrere Bilder mit kurzen Texten untereinander positionieren, wobei die Bilder abwechselnd links oder rechts stehen sollen. Da meine Texte aber viel kürzer als in der Vorlage sind, rutschen Überschrift und Text des zweiten Bildes noch in das Textfeld des Bildes übereinander.

Ich habe vergeblich versucht, die einzelnen Bild+Text-Blöcke durch <p> oder <section> oder als Listenelemente <ul> zu trennen. Kann mir vielleicht jemand von euch helfen?

<
HTML:
<h3>Überschrift Bild 1</h3>
                                    <p><span class="image left"><img src="images/pic1.jpg" alt="" /></span>Hier steht mein kurzer Text Nr. 1.</p>

 <h3>Überschrift Bild 2</h3>
                                    <p><span class="image right"><img src="images/pic2.jpg" alt="" /></span>Hier steht der Text darunter, der mit der Überschrift hochrutscht.</p>
 

MrMurphy

Senior HTML'ler
28 Juli 2009
1.564
232
63
Deine Problembeschreibung ist verwirrend und deinem Quelltextschnipsel kann ich auch nichts entnehmen. Das CSS fehlt völlig.

Ich meine bislang folgendes zu verstehen:

Auf der Seite soll links eine Überschrift stehen. Rechts daneben ein Bild und unter dem Bild ein dazugehöriger Text.

Darunter soll zunächst ein Bild stehen, darunter wieder ein dazugehörige Text und rechts von dem Bild die dazugehörige Überschrift.

Das ganze soll wahrscheinlich erweiterbar sein. Die Überschriften und Bilder/Texte abwechselnd links und rechts.

Meinst du das?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.074
404
83
67
Hallo Wildmops und willkommen im Forum!
Wenn ich das richtig verstehe, ist das eine Standardaufgabe und das figure-Tag das Mittel der Wahl, jedenfalls wenn die Texte einen Bezug zu den Bildern haben. Prüfe ob dies deine Vorstellungen realisiert:
HTML:
<div id="container">
    <figure>
        <img src="images/dia0.jpg">
        <figcaption>
            <h2>Die Überschrift</h2>
            <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>
        <figcaption>
            <h2>Die Überschrift</h2>
            <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>
        <img src="images/dia1.jpg">
    </figure>
    <figure>
        <img src="images/dia2.jpg">
        <figcaption>
            <h2>Die Überschrift</h2>
            <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>
        <figcaption>
            <h2>Die Überschrift</h2>
            <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>
        <img src="images/dia3.jpg">
    </figure>
</div>
CSS:
        figure {
            display: flex;
            align-items: center;
        }

        figure img {
            flex: 1;
            width: 100%;
            height: auto;
            min-width: 1px;
            min-height: 1px;
        }

        figure figcaption {
            flex: 1;
            padding: 0.5em;
        }
 
Zuletzt bearbeitet:
  • Like
Reaktionen: Wildmops

Wildmops

Neues Mitglied
30 September 2020
5
0
1
49
Vielen Dank - ich probiere das aus. Ich wollte hier nur noch die Bilder nachreichen, da ich mich offensichtlich etwas umständlich ausgedrückt habe. Das obere Bild zeigt die Vorlage und das untere die verrutschten Texte.

Phantom-1.jpgPhantom-2.jpg
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.074
404
83
67
Ah, das sieht jetzt etwas anders aus als ich es verstanden hatte. Anscheinend ist da in der Vorlage der Wurm drin. Poste doch Mal das HTML und CSS.
 

Wildmops

Neues Mitglied
30 September 2020
5
0
1
49
@Sempervivum
Vielen Dank - das hat mir wirklich sehr geholfen! Eine letzte Frage, aus ästhetischen und Verständnisgründen: Wie kann ich die Überschrift am oberen Bildkanten ausrichten? Momentan ist der Überschrift-Text-Block mittig orientiert:
Phantom-3.jpg
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.074
404
83
67
Das sieht jetzt etwas anders aus als in dem Screenshot von deinem Template aber wenn Du so damit zufrieden bist ist es ja OK.

Die Überschrift kannst Du sehr leicht oben ausrichten durch align-items: flex-start;:
CSS:
        figure {
            display: flex;
            align-items: flex-start;
        }
Ist dann alles hier erklärt:
 

Wildmops

Neues Mitglied
30 September 2020
5
0
1
49
Sorry, meine Antwort hatte sich überschnitten. Wie ich gerade festgestellt habe, ist der HTML-Code zu lang für ein Posting... :frown:
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.074
404
83
67
Wenn Du damit, wie es in deinem letzten Screenshot aussieht, zufrieden bist, brauchen wir ja das HTML und CSS gar nicht.
 

Wildmops

Neues Mitglied
30 September 2020
5
0
1
49
Ja, ich habe es jetzt geändert und es sieht nun genau so aus, wie ich es wollte.

Nochmals vielen Dank für Deine Hilfe und für die Zeit, die Du Dir dafür genommen hast!
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.074
404
83
67
Gern geschehen! Lies dir am besten auch die Beschreibung bei css-tricks durch, dann kannst Du so etwas in Zukunft selber anpassen.
Wie bist Du denn jetzt überhaupt vorgegangen, hast Du das Template für die betr. Seite ganz verworfen?
 
Werbung:

Neueste Beiträge