Bild mit Text, der rechts unten rumfloated

[Schorsch]

Salut!

Im Quelltext habe Text und dan ein Bild. Nun möchte ich den Text rechts unten beim Bild haben:

+---------->--->--
|                 |
|                 |
| Höhe des Bildes |
| immer 300px;    |
|                 |  . . . . . . . . . . . .
| Breite des      | ^                      ^
| Bildes ist      | |                      |
| nicht angegeben | |                      |
| und ist         | | Der Text muss        |
| verschieden     | | unten beginnen       |
|                 | | und je nach Menge    |
|                 | | nach oben auffüllen  |
+---------->--->--- +------------------->---

Wichtig: Im Quelltext muss erst der Text erscheinen und erst nach dem Text das Bild.

Trotz angestrengten Versuchen gelang es mir nicht, oben abgebildetes Layout mit CSS zu erzeugen. Als besondere Schwierigkeit ist die dynamische Breite des Bildes, welche man nicht im Voraus weiss.

Folgendes habe ich versucht:

<div style="float:right; height:300px; width:200px; vertical-align:bottom; border: 1px red solid;">
    <p> Da haben wir einiges an Text. Machen wir auch mehrere Absätze rein. Nach diesem Satz machen wir den zweiten Absatz. </p>
    <p> hier haben wir den zweiten Absatz. Gut gell. Auch hier schreiben wir einiges rein. Wir können so viel schrieben, wie wir wollen.
    </p><p>hier ist noch ein Dritter Absatz. Cool gell!</p>
  </div>
  <div style="border: 3px solid black;">
    <IMG SRC="http://www.google.ch/images/firefox/fox1.gif" style="height:300px; border:2px blue solid;" ALT="">
  <p>unter dem bild</p>
  </div>

Fragen:

- Wie bringe ich die Textbox exakt an den rechten Bildrand???
   (Auch wenn ich gar nicht weiss, wie breit das Bild ist!)

- Warum greift "vertical-align:bottom;" nicht?

Kannst du mir helfen?

Gruss
Schorsch

[Anschinsan]

Saludos,

Angebot in CSS:

float:none;
clear:both;

In Html

<br clear="all" >

Bild immer Rechts schaffst du mit CSS:
float:right;

oder

position:relative;
top:0px;
right:0px;

oder mit Html:

<img align="right">
und danach eben das <br clear="all"> Dann erscheint der Text immer unter dem Bild.

Habe ich deinen Wunsch richtig verstanden?

Anschinsan

[Schorsch]

Saludos,

Ciau!

Ich versuche das ganze in CSS umzusetzen, mit dem, was du u.a. erwähnt hast:

<div style="float:right; height:300px; width:200px; vertical-align:bottom; border: 1px red solid;">
    Text
  </div>
  <div style="border: 3px solid black;">
    <!-- Bild -->
  </div>

Doch leider bringe ich den Text nicht an den linken unteren Bildrand.

Gruss
Schorsch

[Anschinsan]

Hallo Schorsch,

Deine Aussagen sind verwirrend!

Mein Vorschlag für das Bild oben rechts und den Text nach dem Bild links, ist wie folgt:

<div align="right"> Bild, dynamische Höhe </div>
<br clear="all">
<div align="left">Text links drunter</div>

in CSS

<div style="float:none; position:relative; top:0px; right:0px;"> Bild, dynamische Höhe </div>
<div style="clear:all;">Text links drunter</div>

Den Text im unteren Linken Rand kannst du mit position:absolute; positionieren - allerdings wird der Text dann immer über deinem Bild liegen und nicht mehr scrollbar sein. Ausserdem interpretiert das jeder Browser ein bisschen anders ... das ist nicht wirklich praktisch ;-)

Bei position:was auch immer; solltest du ausserdem Weite und Höhe angeben, das ist recht unflexibel - also nur wenns sein muss einsetzen.

mfg

Anschinsan

PS: Bevor jetzt alle CSS Gurus schimpfe - das ist natürlich nur mein persönlicher Gedankengang ;-)

[Ingo Turski]

Hi,

<div style="float:none; position:relative; top:0px; right:0px;"> Bild, dynamische Höhe </div>

was soll das bitte bringen? Kein float und keine Änderung der Position. Diese Angaben sind wirkungslos.
Außerdem war die Fragestellung:

Wichtig: Im Quelltext muss erst der Text erscheinen und erst nach dem Text das Bild.

<div style="clear:all;">Text links drunter</div>

Und das ist nun doppelt Unsinn. Einmal gibt es keinen CSS-Wert "all" für clear und zum anderen gibt's auch nichts zu clearen.

freundliche Grüße
Ingo

[Schorsch]

Salut Ingo

Hast du, oder sonstjemand, eine Idee wie ich weiterkomme?
Kann man mein Problem überhaupt lösen?

Irgendwie muss das doch gehen, oder nicht?

Gruss
Schorsch

[Ingo Turski]

Hi,

mit float (alleine) kommst Du hier nicht weiter. Du wirst ein umschließendes DIV benötigen, um hierin die Box(en) absolut positionieren zu können. Kannst Du davon ausgehen, daß die linke Box grundsätzlich höher ist als die rechte? Dann könntest Du sie im Textfluß lassen und müßtest nur die rechte Box positionieren.

freundliche Grüße
Ingo

[Schorsch]

Salut Ingo

Du wirst ein umschließendes DIV benötigen, um hierin die Box(en) absolut positionieren zu können.

Die Rechte Box (das Bild) ist je nachdem mal breiter, mal schmäler. Die Position der Rechten Box orientiert sich also an der Bereite des Bildes. Wie kann ich da absolut positionieren?

Kann ich die rechte untere Ecke als absoluter Positionspunkt nehmen?!

Hmmm, werde da mal weiterforschen...

Merci!
Schorsch

[Ingo Turski]

Hi,

Die Rechte Box (das Bild) ist je nachdem mal breiter, mal schmäler.

Nach Deinem Eingangspoting liegt das Bild in der linken Box!?

Die Position der Rechten Box orientiert sich also an der Bereite des Bildes.

Was denn nun? ;-)
Falls sich der Textbereich der rechten Box den neben dem Bild zur Verfügung stehenden Platz nehmen soll, dann dürfte das nach Deinen Vorgaben nicht zu realisieren sein.

Kann ich die rechte untere Ecke als absoluter Positionspunkt nehmen?!

Wenn das Elternelement anders als static positioniert ist: Ja.

freundliche Grüße
Ingo

[Schorsch]

Salut

Hab's glaub geschafft. Funktioniert jedenfalls im IE 5.5 und muss warscheinlich noch etwas überarbeitet werden, damit es überall läuft.
Der Tipp mit der absoluten Positionierung innerhalb eines Elementes war mein Schlüsselerlebnis!

Merci
Schorsch

Lösung

<style type="text/css">
p{width:20em;}
</style>

</head>
<body>

<span style="position:relative; height:300px;">
  <span style="position:absolute; bottom:0px; right:0px; margin-right:-20em;">
      <p>Judihui, dieser Text steht schön rechts vom Bild und beginnt unten...</p>
      <p>Das ist noch ein Sätzli mehr. Da haben wir ein paar Sätze drin. </p>
      <p>Und noch ein letzter Absatz. </p>
  </span>
  <img src="http://www.google.ch/images/firefox/fox1.gif" style="height:300px;" />
</span>

</body>
</html>

[Ingo Turski]

Hi,

<span style="position:relative; height:300px;">
  <span style="position:absolute; bottom:0px; right:0px; margin-right:-20em;">
      <p>Judihui, dieser Text steht schön rechts vom Bild und beginnt unten...</p>

Du solltest aber keine Block-Elemente in inline-Elementen setzen.

freundliche Grüße
Ingo

[Schorsch]

Salut

Du solltest aber keine Block-Elemente in inline-Elementen setzen.

Ou, merci für den Hinweis. Das heisst ja keine <p> im <span> drin...
Ich frage mich aber, ob man in diesem Fall die Span in Blockelemente umwandeln soll oder aber auf die <p> verzichten und zwecks Absatzformatierung ein <span class="meinAbsatz"> verwenden soll.

Was ist wohl besser? Was gibts da eigentlich so für Argumente?

Gruss
Schorsch

[Ingo Turski]

Hi,

Ich frage mich aber, ob man in diesem Fall die Span in Blockelemente umwandeln soll

das ändert nichts an der fehlerhaften HTML-Auszeichnung.

oder aber auf die <p> verzichten und zwecks Absatzformatierung ein <span class="meinAbsatz"> verwenden soll.

Du willst doch bewußt Block-Elemente verwenden, dann mach' das auch. Und Block-Elemente gruppiert man normalerweise mit DIV.

freundliche Grüße
Ingo

[Schorsch]

Salut

Du willst doch bewußt Block-Elemente verwenden, dann mach' das auch. Und Block-Elemente gruppiert man normalerweise mit DIV.

<div style="width:310px; position:relative; height:300px; border: 1px solid red;">
  <div style="position:absolute; bottom:0px; right:-20em; width:20em; border: 1px solid black;">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
  </div>
  <img src="http://www.google.ch/images/firefox/fox1.gif" style="height:300px;" />
</div>

OK, jetzt habe ich aber ein arges Problem:
Dem obersten Div muss ich sagen wie breit er ist ("width:310px;") und genau das weiss ich nicht.

Wie kann ich einem Div sagen: "Bitte sei einfach so breit, wie das Bild in dir dirn???"
Der Div muss sich ja exakt der Breite des Bildes anpassen.

Gruss Schorsch

[Ingo Turski]

Hi,

Wie kann ich einem Div sagen: "Bitte sei einfach so breit, wie das Bild in dir dirn???"

das ist in der Tat ein Problem. Du könntest es natürlich display:inline definieren, aber das könnte Probleme mit den enthaltenen Block-Elementen ergeben.

Der Div muss sich ja exakt der Breite des Bildes anpassen.

Du solltest die Bildgröße schon kennen - wenn Du die Seite dynamisch erzeugst, kannst Du sie doch in Erfahrung bringen, oder?

freundliche Grüße
Ingo

[Schorsch]

Guten Tag

Der Div muss sich ja exakt der Breite des Bildes anpassen.
Du solltest die Bildgröße schon kennen - wenn Du die Seite dynamisch erzeugst, kannst Du sie doch in Erfahrung bringen, oder?

Ja genau, zu diesem Schluss bin ich nun auch gekommen. Ist in meinem Fall sehr warscheinlich unumgänglich.

Ingo: Vielen Dank für deine Mitgedanken!

Gruss
Schorsch