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

Problem mit Vorlage: Bilder mit Texten untereinander

Wildmops

Neues Mitglied
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>
 
Werbung:
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?
 
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
 
Werbung:
@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
 
Sorry, meine Antwort hatte sich überschnitten. Wie ich gerade festgestellt habe, ist der HTML-Code zu lang für ein Posting... :frown:
 
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!
 
Werbung:
Zurück
Oben