Bild anhand einer Textlänge setzten.

[schaumstoff]

Bin gerade neu hier im Forum

ich habe ein Problem und bin mir nicht sicher ob es mit PHP lösbar ist.
Ich habe eine Seite da ist links text und rechts ein Bild von einer grösse 200px*200px. Der Text umfliesst idealerweise das Bild. unterhalb werden noch verschiedene Bilder (max 3) angehängt. Das problem dabei ist nun, das die Bilder direkt nach dem Text erscheinen. Wenn der Text die 200px des Bildes nicht überschreitet, überschneidet sich die Bilderreihe mit dem Bild.
So jetzt suche ich nach einer Funktion, die erkennt das der Text zu kurz ist und die Reihe tiefer setzt und ich hab jetzt gar keinen Durchblick wie ich das Bewerkstelligen könnte. Wenn mir jemand einen Tipp geben kann bin ich schon dankbar

 

[Matthias Reitinger]

Hallo und willkommen auf tutorials.de!

Könntest du vielleicht noch erklärende Screenshots oder einen Link zu einer Beispielseite liefern? Nur von der Beschreibung her habe ich nämlich Schwierigkeiten, das eigentliche Problem zu erfassen.

[edit]
Meinst du das vielleicht so?
Langer Text:

Lorem ipsum +----+
dolor sit a |    |
met consect |    |
etuer adipi +----+
scing elit. Etiam
est nisi, sucipit.
 +---+ +---+ +---+
 |   | |   | |   |
 +---+ +---+ +---+

(Zu) kurzer Text:

Lorem ipsum +----+
dolor.      |    |
 +---+ +---+ +---+
 |   | |   | |   |
 +---+ +---+ +---+

[/edit]

Grüße,
Matthias

 

[schaumstoff]

Genau soo, wollte gerade ein Bild reinsetzen...

 

[Matthias Reitinger]

Hallo,

das ist dann aber eher ein Problem, mit dem PHP an sich nichts zu tun hat. Das ist eher Sache von geschicktem CSS-Einsatz. Wie sieht denn der bisherige HTML-Quelltext aus?

Grüße,
Matthias

 

[Maik]

Vielleicht lässt sich das Problem dadurch lösen, indem du die 3 Bilder in ein Block-Element packst, und diesem mit der margin-top-Eigenschaft einen Außenabstand nach oben einrichtest?

 

[Matthias Reitinger]

Hallo,

ich wollte eigentlich auf den Quelltext warten, aber ich verrat trotzdem schon mal meine Idee: da das vom Text umflossene Bild vermutlich sowieso über ein float:right rechts rumschwebt, könnte man – wie von Michael schon vorgeschlagen – die drei unteren Bilder zunächst in ein Blockelement packen, das dann mittels clear:right dazu gebracht wird, immer unter dem großen Bild zu erscheinen.

Grüße,
Matthias

 

[schaumstoff]

boah ihr seit ja schon früh auf (oder noch gar nicht im Bett )
Mmh danke für deinen Tipp. Geht ja so einfach. Ich dachte zuerst das wird jetzt noch so eine ziemliche Arbeit dies zu bewerkstelligen.. tja liegt wohl daran, dass meine Kentnisse langsam einrosten..

aber nun noch was. die bilder werden zentriert ausgerichtet über margin-left:auto; und margin-right:auto
falls jetzt das Bild überschneidet wird die Reihe rechtsbündig gelegt... hast du noch nen tipp?

 

[Maik]

Wende mal text-align:center auf das Block-Element an, damit die Grafiken darin horizontal zentriert werden.

P.S. Ich gehöre zur Fraktion der "Frühaufsteher"