Gefloatetes Bild unten links positionieren

[Sandra]

Huhu,
Hab mich mittlerweile totprobiert und totgesucht. Vielleicht könnt ihr mir helfen.
Folgendes: Ich habe ein Div (lieber mit variabler Größe, zur Not aber auch fixed), darin einen Text und ein Bild. Das Bild soll unten links in der Ecke positioniert sein, der Text soll es umfließen:

+++++++++++++++++++

• jksdjklasj ksal +
• kldask kdsaj das+
• sdakk ksjd ksad +
  +------- ksdk dak +
  +------- ksdasksd +
  +------- dks ksda +
  +------- dsakd das+
  +++++++++++++++++++

Wenn ich das Bild himterm Text einfüge und absolut positioniere, floatet der Text nicht mehr und wenn ich es nicht absolut positioniere, hängt es unten aus dem div raus.
Wenn ich das Bild vor den Text einfüge und nicht absolut positioniere, floatet es sehr hübsch, aber leider nicht unten :/

Irgendeine Idee?

Vg,
Sandra

[imho_tep]

Auch Huhu,

deine Darstellung hilft wenig, solange du dein dafür zuständiges css
nicht offenbarst.

+++++++++++++++++++

• jksdjklasj ksal +
• kldask kdsaj das+
• sdakk ksjd ksad +
  +------- ksdk dak +
  +------- ksdasksd +
  +------- dks ksda +
  +------- dsakd das+
  +++++++++++++++++++

Best wishes, imho_tep

[Gernot Back]

Hallo imho_tep,

deine Darstellung hilft wenig, solange du dein dafür zuständiges css
nicht offenbarst.

+++++++++++++++++++

• jksdjklasj ksal +
• kldask kdsaj das+
• sdakk ksjd ksad +
  +------- ksdk dak +
  +------- ksdasksd +
  +------- dks ksda +
  +------- dsakd das+
  +++++++++++++++++++

Ich würde jetzt mal die Behauptung wagen, dass das Problem mit CSS gar nicht zu lösen ist, wohl aber (beim Verändern der Fenstergröße mackenbehaftet) mit JavaScript.

http://www.lernspielwiese.de/floatbottom/

Gruß Gernot

[Detlef G.]

Hallo Sandra

Hab mich mittlerweile totprobiert und totgesucht.

Oh, wie kannst du dann noch hier posten?

Folgendes: Ich habe ein Div (lieber mit variabler Größe, zur Not aber auch fixed), darin einen Text und ein Bild. Das Bild soll unten links in der Ecke positioniert sein, der Text soll es umfließen:

Leider ist das nicht vorgesehen. Es gibt kein float:bottom;.
Ohne komplizierte Javascriptfummeleien, die ich mir auch noch nicht angetan habe, könntest du es nicht wirklich sondern nur für genau eine Div- und Schriftgröße passend bekommen.

Gib dem Bild float:left und setze an der Stelle in den Text, die bei einer üblichen Schrift- und Browserfenstergröße dafür sorgt, dass es dann an der gewünschten Position erscheint.
Bei anderen Fenster- und/oder Schriftgrößen kann es dann allerdings passieren, dass sich der Text unter dem Bild fortsetzt, oder dass das Bild weiter reicht, als der Text.

Wenn dein Div mehrere Elemente (z.B. Absätze) enthält, könntest du auch noch denen, die eventuell unter dem Bild fortgesetzt würden einen linken Rand (margin-left) in der Breite des Bildes verpassen, um wenigstens die Fortsetzung unter dem Bild zu verhindern.

Auf Wiederlesen
Detlef

[Engin]

Hi Sandra,

Folgendes: Ich habe ein Div (lieber mit variabler Größe, zur Not aber auch fixed), darin einen Text und ein Bild. Das Bild soll unten links in der Ecke positioniert sein, der Text soll es umfließen:

+++++++++++++++++++

• jksdjklasj ksal +
• kldask kdsaj das+
• sdakk ksjd ksad +
  +------- ksdk dak +
  +------- ksdasksd +
  +------- dks ksda +
  +------- dsakd das+
  +++++++++++++++++++

Hab auch mal ein bisschen rumprobiert und bin zu dem Schluss gekommen,
das du daß Bild als

background-img

in das Div einbinden solltest.
Das Bild kannst du dann mittels

background-position:bottom 0;

unten Links festtackern, den Div gibts du dann noch innere Padding in der Grösse des Bildes, dann brauchst du nicht einmal zu floaten.

Grüße,
Engin
 GYRO

[Engin]

Hi,

sorry, hatte mein vorschlag nicht so ganz getestet, (nur im IE vor´n Kopp klatsch),
hier die Uptodate Version meines vorschlags.

Grüße,
Engin
 GYRO

[Gernot Back]

Hallo Engin,

sorry, hatte mein vorschlag nicht so ganz getestet, (nur im IE vor´n Kopp klatsch),
hier die Uptodate Version meines vorschlags.

Das Bild als Hintergrundbild in ein gefloatetes DIV-Element zu packen, bringt aber gar keine Vorteile. Da kann man doch ganz ohne DIV-Suppe auch gleich das Bild selbst an passender Stelle im Text floaten lassen oder ohne Float inline rechts bzw. links ausrichten.

Dann lässt sich das Bild strukturell sinnvoll sogar auch valide in den Textabsatz (das P-Element) einbauen, auf den es sich beziehen soll, was mit DIV in P (verboten!) nicht möglich ist. Ganz abgesehen davon werden  Hintergrundbilder durch die Browsereinstellungen beim Ausdrucken meist unterschlagenn, lassen sie sich nicht in jedem Browser so ohne weiteres per Rechtsklick abspeichern und bieten keinen Alternativtext (Alt-Attribut), wenn sie mal nicht verfügbar sind.

Gruß Gernot

[Engin]

Hi Gernot,

Das Bild als Hintergrundbild in ein gefloatetes DIV-Element zu packen, bringt aber gar keine Vorteile. Da kann man doch ganz ohne DIV-Suppe auch gleich das Bild selbst an passender Stelle im Text floaten lassen oder ohne Float inline rechts bzw. links ausrichten.

Mist ;-)

Hab es nochmal probiert, hoffe das ist jetzt wenigstens vom Ansatz richtig.
hier die Upgdatete Update Version meines vorschlags.

Grüße,
Engin
 GYRO