textumfluss um bild per float

[pete]

hallo ihr alle,

ich wollte mal fragen, welche möglichkeiten es gibt via css inhalte (texte, linien, überschriften, tabellen etc.) um ein bild herumfließen zu lassen?

wenn ich ein bild bspw. so auszeichne:
  <img src=........ style="float:left" />
dann fließt zwar der text um das bild herum,
aber überschriften, <hr>'s und tabellen schieben sich "unter" das bild, bzw. ignorieren die tatsache, daß da ein bild ist.
(ist ja auch nicht im elemtenfluss dank float....)

kann man das irgendwie vermeiden?
und hinbekommen, daß es sich verhält wie als wenn das bild mit dem alten html-attribut align="left" gemacht worden wäre?

vielen dank für eure hilfe,
grüße,
pete

[WauWau]

Hola,

und hinbekommen, daß es sich verhält wie als wenn das bild mit dem alten html-attribut align="left" gemacht worden wäre?

GEnau so verhält es sich auch. Achte mal drauf, wo dein Bild steht. Wenn du z.B.

<h1>Einewunderschöneüberschrift</h1>
<hr>
<img src="bigimage.jpg" style="float:left;">
<p>und das ist viel text</p>

hast, wird da nix fließen, außer das <p> um das <img> rum (rechts). Stattdessen musst du

<img src="bigimage.jpg" style="float:left;">
<h1>Einewunderschöneüberschrift</h1>
<hr>
<p>und das ist viel text</p>

schreiben. Und hier ist die Gefahr gegeben, dass unser bigimage.jpg, welches 600*100 Pixel groß ist, evv. rechts keinen Platz mehr für unsere dicke, große Überschrift sowie eine Linie lässt. Deswegen ja auch "float" -  es fließt, wenn es kann. Und wenn da kein PLatz mehr ist, fließt es eben unten weiter.

WauWau

[pete]

hi,

vielen dank für deine antwort.
eigentlich leuchtet das ein.

wenn ich nun aber das float:left einfach weglasse,
würde ich annehmen, das das bild am linken rand ausgerichtet wird.

wirds aber nicht ;-)
zumindest nicht im IE6.
mozilla stellt das bild ganz am linken rand dar...

wie bekomme ich das bild also an den linken rand auch im IE?
sodaß es auch im IE ungefähr so aussieht?

+-----------------+
|                 |
+----+tfsdkskdöfkö|
|BILD|dasödklsadka|
|    |kdaskdölösss|
+----+skkdökdöldas|
|     dasddsasdass|
|     asdjkassadsa|
+-----------------+

grüße,
pete

[WauWau]

Hallo pete,

wenn ich nun aber das float:left einfach weglasse,
würde ich annehmen, das das bild am linken rand ausgerichtet wird.

Nö. Das Bild wird dann einfach dort im Text ausgerichtet, wo es steht. Wir können das ja ganz einfach testen:

Dies ist viel Fließtext. Dies ist viel Fließtext. Dies ist viel Fließtext. Dies ist viel Fließtext. Dies ist viel Fließtext. Dies ist viel Fließtext. Dies ist viel Fließtext. Dies ist viel Fließtext. [img:http://www.science-shop.de/sixcms/media.php/370/beispielbild.jpg]. Dies ist viel Fließtext... blablabla [Das bild finde ich irgendwie sehr einleuchtend ;-)

mozilla stellt das bild ganz am linken rand dar...

Sehr seltsam. Kann ich mir nicht vorstellen. Kann es sein, dass da irgendein CSS klammheimlich rumfuchtelt, von dessen Existenz du nix weißt? Wo wird denn das Bild da oben in meinem Beispieltext eingebunden?

+-----------------+
|                 |
+----+tfsdkskdöfkö|
|BILD|dasödklsadka|
|    |kdaskdölösss|
+----+skkdökdöldas|
|     dasddsasdass|
|     asdjkassadsa|
+-----------------+

ui! Na das bekommst du ganz gewiss _nicht_ mit Float hin. Entweder du nimmest eine <table> (altmodische ARt und weise ;) oder du machst es per CSS: _z.b._ Rechtsliegendes mit "margin-left: blabla;" ausweisen, dann das Bild oben drüber, und den text per "margin-top: -bildhöhe" hochziehen. Oder das Bild per background einbinden und dem rechtsliegenden einen padding-left verpassen. Da gibt es sehr viele möglichkeiten, was am intelligentesten ist, darüber lässt sich streiten.

gruß,

WauWau

[pete]

hmm...

du hast recht mit der anzeige...

shit, ich hatte schon befürchtet, das das so einfach nicht wird.
ich meine per table layout kein thema, aber genau davon will ja versuchen wegzukommen (gott, das klingt als würde ich versuchen von den zigaretten wegzukommen ;-))

gut, dann werde ich mal experimentieren.

vielen dank für deine hilfe !!

grüße,
pete

[wahsaga]

hi,

+-----------------+
|                 |
+----+tfsdkskdöfkö|
|BILD|dasödklsadka|
|    |kdaskdölösss|
+----+skkdökdöldas|
|     dasddsasdass|
|     asdjkassadsa|
+-----------------+

ui! Na das bekommst du ganz gewiss _nicht_ mit Float hin.

wieso nicht?

Entweder du nimmest eine <table> (altmodische ARt und weise ;) oder du machst es per CSS: _z.b._ Rechtsliegendes mit "margin-left: blabla;" ausweisen, dann das Bild oben drüber, und den text per "margin-top: -bildhöhe" hochziehen.

nein, das bild nach links floaten lassen, und für den text-container (<p> o.ä.) eine entsprechendes margin-left vergeben.
that's it.

gruss,
wahsaga

[WauWau]

Hallo wahsaga,

+-----------------+
|                 |
+----+tfsdkskdöfkö|
|BILD|dasödklsadka|
|    |kdaskdölösss|
+----+skkdökdöldas|
|     dasddsasdass|
|     asdjkassadsa|
+-----------------+
ui! Na das bekommst du ganz gewiss _nicht_ mit Float hin.
wieso nicht?

Sagen wir mal das Bild ist 400px groß. Der Text rechts aber 1200. DAnn floatet er solange um das Bild rechts rum, bis es "vorbei" ist (...), und danach wird er eben wieder von links an angezeigt. Es sieht also so aus:

+-----------------+
+----+tfsdkskdöfkö|
|BILD|dasödklsadka|
|    |kdaskdölösss|
+----+skkdökdöldas|
|dasddsasdassasdjk|
|laksdlkgalassadsa|
+-----------------+

nein, das bild nach links floaten lassen, und für den text-container (<p> o.ä.) eine entsprechendes margin-left vergeben.
that's it.

Ich kann mir nicht vorstellen, dass das so funktioniert. Du meinst also folgendes:

<img src="..." style="float:left; width: 200px; height:100px;">
<p style="margin-left: 200px; padding: 20px;">blablabla.....</p>

Ich kann mir nicht vorstellen, dass das jetzt wie gewünscht aussieht. Ansonsten hätte ich mir nämlich bei einigen Designs viel viel Umstand sparen können! Afaik müsste das jetzt so aussehen:

+-----------------+
+----+    tfkdöfkö|
|BILD|    dalsadka|
|    |    kdölösss|
+----+    skdöldas|
|    sfasdassasdjk|
|    dlkgalassadsa|
+-----------------+

Sollte ich vielleicht mal ausprobieren.

WauWau

[wahsaga]

hi,

Sagen wir mal das Bild ist 400px groß. Der Text rechts aber 1200. DAnn floatet er solange um das Bild rechts rum, bis es "vorbei" ist (...), und danach wird er eben wieder von links an angezeigt.

nicht, wenn der text-container mit margin-left:410px formatiert ist.
das bild ist durch das floaten ja aus dem textfluss entfernt.

Ich kann mir nicht vorstellen, dass das so funktioniert. [...]
Sollte ich vielleicht mal ausprobieren.

ja.

gruss,
wahsaga