Ersatz für min-width

[Tom²]

Hallo,

ich möchte "Teaser"-Bilder in Texte einfügen, also so:

+---------+  Lorem ipsum dolor sit amet, consetetur
|         |  sadipscing elitr, sed diam nonumy eirmod
| Teaser- |  tempor invidunt ut labore et dolore magna
| Bild    |  aliquyam erat, sed diam voluptua. At vero
|         |  eos et accusam et justo duo dolores et ea
+---------+  rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.

Die Bilder haben die Eigenschaft float:left; Das Problem ist nun, wenn der Teaser wenig Text hat (bzw. bei großem Browserfenster), rutscht der darunterstehende Teser darüber:

+---------+  Lorem ipsum dolor sit amet, consetetur
|         |  sadipscing elitr, ...
| Teaser- |
| Bild    |  +---------+  Lorem ipsum dolor sit amet, consetetur
|         |  |         |  sadipscing elitr, ...
+---------+  | Teaser- |
             | Bild    |
             |         |
             +---------+

Mit clear:left; kann man das zwar verhindern, aber die Abstände zwischen den Tesern lassen sich so nicht richtig festlegen, da der Abstand vom Textende, nicht aber vom Bild gemessen wird.
Die Lösung ist eigentlich, dem <p>-Element der Teaser eine Mindest-Höhe (min-height) zu geben. Diese müsste so hoch wie die Höhe der Bilder sein. Leider versteht das der sch*** IE nicht! Gibt es deshalb noch eine andere Möglichkeit?

Danke und Grüße!
Tom

[Benjamin Wilfing]

Hi,

Die Lösung ist eigentlich, dem <p>-Element der Teaser eine Mindest-Höhe (min-height) zu geben. Diese müsste so hoch wie die Höhe der Bilder sein. Leider versteht das der sch*** IE nicht! Gibt es deshalb noch eine andere Möglichkeit?

man kann mittels der proprietären expression()-Eigenschaft im Internet Explorer Dinge wie z.B. max/min-height/width simulieren. Lies dir dazu doch mal http://www.svendtofte.com/code/max_width_in_ie durch. Ganz unten ist dort auch ein Beispiel für min-height angegeben.

Viele Grüße
 Benjamin

[Sven Rautenberg]

Moin!

Mit clear:left; kann man das zwar verhindern, aber die Abstände zwischen den Tesern lassen sich so nicht richtig festlegen, da der Abstand vom Textende, nicht aber vom Bild gemessen wird.

Das verstehe ich nicht. Mit clear:left (oder clear:both) würde der zweite Teaser garantiert nicht neben dem gefloateten Bild beginnen, sondern immer darunter.

- Sven Rautenberg

[Tom²]

Hallo Sven,

Das verstehe ich nicht. Mit clear:left (oder clear:both) würde der zweite Teaser garantiert nicht neben dem gefloateten Bild beginnen, sondern immer darunter.

Ja, aber die Abstände, je nach Browserfenster-Größe und Textlänge, sind dann etwas unschön, da sie vom Textende und nicht vom Bild berechnet werden:

+---------+  Lorem ipsum dolor sit amet, consetetur
|         |  sadipscing elitr, sed diam nonumy eirmod
| Teaser- |  tempor invidunt ut labore et dolore magna
| Bild    |  aliquyam erat, sed diam voluptua...
|         |
+---------+
+---------+  Lorem ipsum dolor sit amet, consetetur
|         |  sadipscing elitr, sed diam nonumy eirmod
| Teaser- |  tempor invidunt ut labore et dolore magna
| Bild    |  aliquyam erat, sed diam voluptua...
|         |  eos et accusam et justo duo dolores et ea
+---------+  rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.

+---------+  Lorem ipsum dolor sit amet, consetetur
|         |  sadipscing elitr, sed diam nonumy eirmod
| Teaser- |  tempor invidunt ut labore et dolore magna
| Bild    |  aliquyam erat, sed diam voluptua...
|         |
+---------+

Ich hätte gerne immer den gleichen Abstand entweder zwischen Bild und neuem Absatz (wenn wenig Text) oder zwischen Textende und neuem Absatz, also so:

+---------+  Lorem ipsum dolor sit amet, consetetur
|         |  sadipscing elitr, sed diam nonumy eirmod
| Teaser- |  tempor invidunt ut labore et dolore magna
| Bild    |  aliquyam erat, sed diam voluptua...
|         |
+---------+

+---------+  Lorem ipsum dolor sit amet, consetetur
|         |  sadipscing elitr, sed diam nonumy eirmod
| Teaser- |  tempor invidunt ut labore et dolore magna
| Bild    |  aliquyam erat, sed diam voluptua. At vero
|         |  eos et accusam et justo duo dolores et ea
+---------+  rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.

+---------+  Lorem ipsum dolor sit amet, consetetur
|         |  sadipscing elitr, sed diam nonumy eirmod
| Teaser- |  tempor invidunt ut labore et dolore magna
| Bild    |  aliquyam erat, sed diam voluptua...
|         |
+---------+

Grüße!
Tom

[Sven Rautenberg]

Moin!

Das verstehe ich nicht. Mit clear:left (oder clear:both) würde der zweite Teaser garantiert nicht neben dem gefloateten Bild beginnen, sondern immer darunter.

Ja, aber die Abstände, je nach Browserfenster-Größe und Textlänge, sind dann etwas unschön, da sie vom Textende und nicht vom Bild berechnet werden:

Das geht doch aber niemals, solange du beliebig langen Text reinschreiben kannst bzw. mit Pech der Browser mehr als eine einzige Zeile unterhalb des zugehörigen Bildes umbricht. Denn eine halb angefangene Zeile Text unter dem Bild sieht blöd aus.

Ich hätte gerne immer den gleichen Abstand entweder zwischen Bild und neuem Absatz (wenn wenig Text) oder zwischen Textende und neuem Absatz, also so:

Du brauchst also kein min-height, sondern height. Nutze es doch einfach.

- Sven Rautenberg

[Tom²]

Hallo,

Du brauchst also kein min-height, sondern height. Nutze es doch einfach.

Doch, wenn der Text länger ist, passt er sonst nicht mehr rein! Der IE dehnt das <p> dann zwar aus, nicht aber Mozilla. Da schiebt sich dann der Text unter das folgende <p>.

Tom

[Jeena Paradies]

Hallo,

Ich hatte vor einer halben Woche genau das gleiche Problem gehabt. Die einzige Lösung die ich dafür gefunden habe war dem Bild ein margin-bottom: 1.3em zu geben damit es immer eine Texthöhe zum clear hat, und somit genau so wie der normale Absatz. Leider hat es das auch wenn kein clear kommt und da bleibt immer eine Zeile frei was mich persönlich nicht so stört wie dass es dranklebt. So sieht es dann aus (siehe zweites Bild):

+---------+  Lorem ipsum dolor sit amet, consetetur
|         |  sadipscing elitr, sed diam nonumy eirmod
| Teaser- |  tempor invidunt ut labore et dolore magna
| Bild    |  aliquyam erat, sed diam voluptua...
|         |
+---------+

+---------+  Lorem ipsum dolor sit amet, consetetur
|         |  sadipscing elitr, sed diam nonumy eirmod
| Teaser- |  tempor invidunt ut labore et dolore magna
| Bild    |  aliquyam erat, sed diam voluptua. At vero
|         |  eos et accusam et justo duo dolores et ea
+---------+  rebum. Stet clita kasd gubergren, no sea
             takimata sanctus est Lorem ipsum dolor sit
rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. amet.

+---------+  Lorem ipsum dolor sit amet, consetetur
|         |  sadipscing elitr, sed diam nonumy eirmod
| Teaser- |  tempor invidunt ut labore et dolore magna
| Bild    |  aliquyam erat, sed diam voluptua...
|         |
+---------+

Grüße
Jeena Paradies

[Viennamade]

Hallo!

Sicher nicht optimal, aber doch eine Lösung - Du könntest nach Bild + Text jeweils ein div ohne Höhe machen:
{ height:0;font-size:0;line-height:0;padding:0;margin:0; }

Beste Grüße
Viennamade