jac: Ueberlappende div's mit Fliesstext

Hallo zusammen,

ich habe da ein Problem, dass ich einfach nicht gelöst bekomme. Und zwar will ich mir ein Layout zusammenbasteln dass etwa so aussieht:

+------------+
                |            |
   +------------|            |
   |            |  [Bild]    |
   |  [Fliess-  |            |
   |    text    +------------+
   |    .            |
   |    .            |
   |    .            |
   |    .]           |
   |                 |
   +-----------------+

Wie muss ich das Bild-div positionieren, damit der Text an ihm vorbei fliesst? Das ganze sollte wen möglich auf der Seite zentriert sein. Hat jemand eine Idee?

vielen Dank und Gruss

jac

  1. Hallo jac.

    ich habe da ein Problem, dass ich einfach nicht gelöst bekomme. Und zwar will ich mir ein Layout zusammenbasteln dass etwa so aussieht:

    +------------+
                    |            |
       +------------|            |
       |            |  [Bild]    |
       |  [Fliess-  |            |
       |    text    +------------+
       |    .            |
       |    .            |
       |    .            |
       |    .]           |
       |                 |
       +-----------------+

    Wie muss ich das Bild-div positionieren, damit der Text an ihm vorbei fliesst?

    Was für ein „Bild–div“? Ein zusätzliches div–Element, welches lediglich das img–Element enthält, ist hier gänzlich überflüssig.

    Das ganze sollte wen möglich auf der Seite zentriert sein. Hat jemand eine Idee?

    Platziere Bild und Text in einem Absatz, lasse das Bild <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=rechts floaten> und ziehe es mit negativen Werten für die http://de.selfhtml.org/css/eigenschaften/randabstand.htm@title=margin–Eigenschaft an die gewünschte Position.

    Einen schönen Donnerstag noch.

    Gruß, Ashura

    --
    sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
    „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
    [HTML Design Constraints: Logical Markup]
    1. Platziere Bild und Text in einem Absatz, lasse das Bild <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=rechts floaten> und ziehe es mit negativen Werten für die http://de.selfhtml.org/css/eigenschaften/randabstand.htm@title=margin–Eigenschaft an die gewünschte Position.

      hab das jetzt gerate erfolgreich getestet. Im FF geht das tiptop, allerdings verschwindet das Bild im IE unter dem Absatztag:

      --> http://jac.demda.ch/__scoutV2/

      wie kann ich das verhindern?

      Danke und Gruss
      jac

      1. Hallo jac.

        hab das jetzt gerate erfolgreich getestet. Im FF geht das tiptop, allerdings verschwindet das Bild im IE unter dem Absatztag:

        --> http://jac.demda.ch/__scoutV2/

        wie kann ich das verhindern?

        Indem du das img–Element einen Z–Index von 1 verpasst; hierzu ist eine Positionierung erforderlich und den Umständen entsprechend bietet sich eine relative an. Infolgedessen kannst du nun auch die top–, right–, bottom– und left–Eigenschaft zur Positionierung verwenden. Du kannst aber auch einfach die negativen Außenabstände beibehalten.

        Einen schönen Donnerstag noch.

        Gruß, Ashura

        --
        sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
        „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
        [HTML Design Constraints: Logical Markup]
        1. Indem du das img–Element einen Z–Index von 1 verpasst; hierzu ist eine Positionierung erforderlich und den Umständen entsprechend bietet sich eine relative an. Infolgedessen kannst du nun auch die top–, right–, bottom– und left–Eigenschaft zur Positionierung verwenden. Du kannst aber auch einfach die negativen Außenabstände beibehalten.

          Super, funktioniert alles. Vielen Dank für die schnelle und kompetente Hilfe.

          Gruss

          jac

  2. Verstehe nicht wirklich wie du das jetzt meinst, aber schon mal probiert dem Bild Element Float:left; zuzuweisen?