Bilder im Fließtext rechts und links positionieren
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anfang
bild
code
datenbank
dom
einzige idee
ende
erscheinen
festgelegten abstand
funktion
funktionieren
kombination
letzten bild
position
positionieren
regeln
tag
text
weglassen
zuweisung
-
Hallo,
mir geht es darum, in einem Fließtext (innerhalb eines divs) tag/bild">Bilder abwechselnd rechts und links so zu positionieren, dass die Bilder jeweils untereinander erscheinen (mit einem festgelegten Abstand zueinander, etwa 25px), dabei aber vom fortlaufenden Text "umflossen" werden. Der Text wird aus einer Datenbank geladen, die Bilder lassen sich also nicht innerhalb des Textes positionieren (im DOM), sondern nur am Anfang oder Ende. Bekannt ist zudem die Höhe und die Breite der Bilder.
Mit der Kombination aus "float: right; position:relative; top: 125 px;" als CSS-Zuweisung für die Bilder (oder das sie umgebende div) funktioniert es leider nicht, da die Bilder und der Text erst gefloatet werden, und dann die Bilder relativ zur ihrer ursprünglichen Position verschoben werden (was genau der Funktion von position: relative; entspricht), wodurch sie freilich den Text überdecken.
Die einzige Idee, die mir derzeit einfällt, ist, ein <table> zu kreieren, indem jeweils zwei Tabellenzellen in jeder ungeraden Tabellenspalte existieren, wobei abwechselnd die rechte oder linke Tabellenzelle für das Bild reserviert ist, die andere mittels rowspan mit der darunter liegenden (geraden) Tabellenspalte, die nur aus einer Tabellenzelle besteht, verbunden ist, die selbst wiederum mit der darunter liegenden Tabellenzelle, die nicht für das Bild reserviert ist, verbunden wird etc. In die zusammenhängende Tabellenzelle wird dann der Fließtext eingefügt. Ob das funktioniert, weiß ich aber noch nicht, es scheint mir auch etwas kompliziert. Gibt es vielleicht noch eine andere, einfachere Alternative?
Vielen Dank schon im Voraus,
Johannes -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
postion kannst du eigentlich weglassen.
mit
sollte das schon funktionieren.style="float:right; margin: 25px;"
Bzw. beim letzten Bild dann anstelle von right eben left (oder umgekehrt)
Mit margin kannst du die Abstände auch noch verfeinern z,B für das erste Bild, wenn es rechts angeordnet werden soll:
style="float:right; margin: 25px 0 0 25px;" -
table würde ich auf meiner hp soweit wie möglich weglassen..... lieber alles mit divs regeln.... da bist du viel flexibler.
Lg
chk89 -
Das gleiche würde auch mit dem Code "valign" im HTML-Tag wie zb.: ein Bild in einer Tabelle funktionieren:
<table><tr><td valign="top"><img src="pictures.png" alt="Bild"> Der Text fließt links oben vom Bild.</td></tr></table> -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
