Teil von SELFHTML Forum Teil von SELFHTML Forumsarchiv Teil von 2007 Teil von Juni

SELFHTML Forumsarchiv
Gefloatetes Bild unten links positionieren

Informationsseite
  1. Seite (CSS) Gefloatetes Bild unten links positionieren von Sandra, 30. 06. 2007, 20:30
nach unten

Gefloatetes Bild unten links positionieren

Die folgende Nachricht zum Thema stammt von: Sandra, 30. 06. 2007, 20:30

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
   

nach obennach unten

Gefloatetes Bild unten links positionieren

Die folgende Nachricht zum Thema stammt von: imho_tep, 01. 07. 2007, 00:27

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
--
HAL 9000: Ich fürchte, wir haben ein Problem, Dave.

nach obennach unten

Inline Bild unten links positionieren

Die folgende Nachricht zum Thema stammt von: Gernot Back, 01. 07. 2007, 01:55

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
--
super me

nach obennach unten

Gefloatetes Bild unten links positionieren

Die folgende Nachricht zum Thema stammt von: Detlef G., 01. 07. 2007, 02:14

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

--
- Wissen ist gut
- Können ist besser

- aber das Beste und Interessanteste ist der Weg dahin!

nach obennach unten

Gefloatetes Bild unten links positionieren

Die folgende Nachricht zum Thema stammt von: Engin, 01. 07. 2007, 03:59

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
--
Dilated peoples|Team Vestax
Gut ist der, der nach dem finden noch weiß, was er suchte.

nach obennach unten

Gefloatetes Bild unten links positionieren (nachtrag)

Die folgende Nachricht zum Thema stammt von: Engin, 01. 07. 2007, 04:34

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
--
Dilated peoples|Team Vestax
Gut ist der, der nach dem finden noch weiß, was er suchte.

nach obennach unten

Gefloatetes Bild unten links positionieren

Die folgende Nachricht zum Thema stammt von: Gernot Back, 01. 07. 2007, 11:26

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
--
super me

nach obennach unten

Gefloatetes Bild unten links positionieren

Die folgende Nachricht zum Thema stammt von: Engin, 01. 07. 2007, 20:44

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
--
Dilated peoples|Team Vestax
Gut ist der, der nach dem finden noch weiß, was er suchte.

nach oben
Teil von SELFHTML Forum Teil von SELFHTML Forumsarchiv Teil von 2007 Teil von Juni

© 1998-2006 Seite Impressum, Software: Classic Forum