Hallo,
habe folgendes Problem: Ich moechte ein Bild an einem Textblock ausrichten, so das obere Kante des Bildes auf der selben Höhe wie die obere Kante des Textblockes liegt. Der Text des Textblockes soll das Bild nicht umfliessen, wenn die Hoehe des Textblockes grösser als die Hohe des Bildes ist. Zwischen Bild und Text soll es einen "Spalt" von 5 bis 10 px geben.

Konkretes Beispiel:
Unter verschiedenen Bilder soll es einen Bildtext geben, der in der Regel mehrzeilig ist. In Front dieses Bildtextes soll es eine kleine Grafik (lupe) geben, die auf Klick eine grösseres Bild liefert.
Momentan ist das Bild in der ersten Zeile und wird am unteren Ende von Zeile 2 des Textes umflossen.

Danke fuer jede Anregung.

aNtiCHrist

Mit Umfließen:

Code:

<div>
  <img src="foo" alt="bar" style="float:right; margin:10px;">
  <p>Lorem ipsum</p>
  <div style="clear:both;"><!--float beenden--></div>
</div>

Ohne umfließen müsste man wohl etwas tricksen, etwa mit margin-right bei dem Absatz. Dazu müsste man aber die Breite des Bilds wissen. Oder man lässt den Absatz selbst auch rechts floaten.

ak74

Danke, das ging ja schnell (ist ja nicht umsonst mein Lieblingsboard

)

Greg5000

Hat die Lupe eine inhaltliche Funktion? Sonst könntest du es so machen:

Code:

<div>
  <p style="background: url('lupe.gif') no-repeat left top; padding-left: 15px;">Lorem ipsum</p>
</div>

Die 15px musst du natürlich durch die Bildbreite der Lupe + den gewünschten Abstand ersetzen.

//edit
habe überlesen, dass die Lupe auch als Link dienen soll. Dann würde mir ohne umfließen auch keine Methode mehr einfallen...

//edit²
mit einer festen Breite:

Code:

<div style="width: 500px;">
  <a href="#" style="float:right; margin:10px;"><img src="foo.gif" alt="bar"></a>
  <p style="float: left; width: 400px">Konkretes Beispiel</p>
  <div style="clear:both;"><!--float beenden--></div>
</div>

ak74

Danke nochmals .
Ich arbeite zur Zeit an einem groesseren Webprojekt und hab mir vorgenommen, diesmal 100prozent xhtml/css-konform zu werkeln.
Und da gibts immer wieder kleine Rückschläge.

Anzeige

Anmelden

Weitere Tipps