Conny: Bild, Bildunterschrift und Inhalt variabel positionieren

Hallo ihr,

ich habe ein Bild (B), eine Bildunterschrift (BU) und Text auf je einer Ebene liegen. Bild und Bildunterschrift befinden sich wiederum auf einer Ebene und alles zusammen ebenfalls auf einer. Also so:

--1-------------------------------------
|                                      |
|    --2-------  --5-----------------  |
|    | -3---  |  |                  |  |
|    | |    | |  |                  |  |
|    | | B  | |  |   Text           |  |
|    | |    | |  |                  |  |
|    | -----  |  |                  |  |
|    | --4--  |  |                  |  |
|    | | BU | |  |                  |  |
|    | -----  |  |                  |  |
|    ---------   -------------------   |
|                                      |
----------------------------------------

Für die Anordnung habe ich die Ebenen 3 und 4 gefloatet, ebenso 2 und 5.

Nun hätte ich gerne, dass sich das alles dem Bild anpasst. Ist es ein schmales Bild, soll der Text entsprechend nach links rücken, ist es ein breites, folglich nach rechts. Die Bildunterschrift soll die Breite des Bildes einnehmen. Eine feste Breite für die Ebenen 2, 3 und/oder 4 kommt also nicht in Frage.

Das Problem an der Sache ist, dass das Bild die Breite der Ebene 2 ja nicht automatisch beeinflusst. Ich habe mit min- und max-width, width:auto; herumgespielt und auch das Herausnehmen aus Ebenen (Style-Angaben über <p>, <span>,...) und dergleichen mehr ausprobiert, aber es will nicht funktionieren.

Kann mich jemand erleuchten?

Grüße,
Conny

  1. Hi,

    Nun hätte ich gerne, dass sich das alles dem Bild anpasst. Ist es ein schmales Bild, soll der Text entsprechend nach links rücken, ist es ein breites, folglich nach rechts. Die Bildunterschrift soll die Breite des Bildes einnehmen. Eine feste Breite für die Ebenen 2, 3 und/oder 4 kommt also nicht in Frage.

    aber sicher doch kommt das infrage. Die Breite des Bildes sollte Dir doch bekannt sein. Definiere also für Ebene 2 diese Breite und setze hier unmittelbar das Bild und den Text rein - weitere Ebenen hierin sind überflüssig.

    freundliche Grüße
    Ingo

    1. Hallo Ingo,

      aber sicher doch kommt das infrage. Die Breite des Bildes sollte Dir doch bekannt sein. Definiere also für Ebene 2 diese Breite [...]

      Das wäre einfach, klar. :-)
      Die Bilder wechseln aber automatisch. Da könnte ich natürlich jedesmal schauen, wie groß das ist, mich durch den Quelltext wühlen und per Hand den Eintrag ändern. Aber das ist nicht Sinn der Sache.

      Gibt es noch eine andere Lösung?

      Conny

      1. Hi,

        Die Bilder wechseln aber automatisch. Da könnte ich natürlich jedesmal schauen, wie groß das ist, mich durch den Quelltext wühlen und per Hand den Eintrag ändern. Aber das ist nicht Sinn der Sache.

        wieso? es ist ohnehin sehr zu empfehlen, die Dimensionen der Bilder anzugeben um Verschiebungen während des Ladens zu verhindern. Und ist der Quelltext so unübersichtlich? Das könntest Du ändern. ;-)

        Gibt es noch eine andere Lösung?

        Eine unsaubere: Du kannst die Weite weglassen, wenn Du im Text entsprechend passende Zeilenumbrüche einfügst. Zumindest die gängigen Windows-Browser geben dem floatenden blocklevel-Element dann nur die Breite des Inhalts, also des Bildes oder der längsten Textzeile. Wenn Dir andere Browser zur Verfügung stehen, kannst Du das mal bei dieser Seite testen.

        freundliche Grüße
        Ingo