Daniel Sun: Breite eines DIV

hi,

kurz zu meinem Problem: Ich habe eine Division, wo ein Bild eingebettet ist. Sieht also so aus:

----------------
<div>
  <img src="bild.gif" width="100" height="50" alt="" />
</div>
----------------

Ok, nun sollte unterhalb dieses Bildes ein Bild-Beschreibungstext angezeigt werden, z.B. so:

----------------
<div>
  <img src="bild.gif" width="100" height="50" alt="" />
</div>
<div>
  Hier kommt eine kurze Bildbeschreibung unterhalb des Bildes.
</div>
----------------

Mein Problem: Das Bild muss nicht immer die selbe Breite haben (kann z.B. 50px breit sein oder 300px breit sein). Die Bildbeschreibung darunter kann auch kürzer oder länger sein, sollte aber NIEMALS über den rechten Rand des Bildes hinausgehen (falls der Text also länger ist, soll er beim rechten Bildrand umgebrochen werden).

Leider kann ich die Div's keine fixe Breite geben, weil es ja vom Bild abhängt.

Hat jemand eine Idee?

lg, Daniel

  1. Hy,

    der DIV-Container, der bisher nur dein Bild umschliesst, umschliesst jetzt auch den DIV-Container für die Bildbeschreibung und passt sich wg.  des Wertes "auto" immer den Maßen des Bildes an.
    Der DIV-Container für die Beschreibung erhält noch text-align:right, damit die Beschreibung grundsätzlich rechts steht. Fertig.

    Mfg Berti

    <html>
    <head>
    <title>&nbsp;</title>
    <style type="text/css">
    <!--

    #box
    {
    position:absolute;
    width:auto;
    height:auto;
    background-color:red;
    }

    img
    {
    display:block;
    }

    //-->
    </style>
    </head>
    <body>

    <div id="box">
    <img src="bild.jpg" name="bild" id="motiv01" width="200" height="150" alt="">
    <div id="text" style="text-align:right">Beschreibung</div>
    </div>

    </body>
    </html>

    1. hi,

      Fertig.

      Und unsinnig.

      #box
      {
      position:absolute;

      Bei einer Bildergalerie (sowas wird angestrebt, wenn ich es richtig verstanden) mit mehreren solchen Elementen aus Bild + Beschreibung dürfte ein absolutes Positionieren ziemlicher Unfug sein.

      gruß,
      wahsaga

      --
      /voodoo.css:
      #GeorgeWBush { position:absolute; bottom:-6ft; }
      1. Bei einer Bildergalerie (sowas wird angestrebt, wenn ich es richtig verstanden) mit mehreren solchen Elementen aus Bild + Beschreibung dürfte ein absolutes Positionieren ziemlicher Unfug sein.

        Schon wieder der Klugsch ... woher weisst du das denn ? Beschäftige dich mit der Ausgangsfrage, wenn dir langweilig ist.

        1. Hallo Berti.

          Schon wieder der Klugsch ... woher weisst du das denn ? Beschäftige dich mit der Ausgangsfrage, wenn dir langweilig ist.

          Learn to cool down.

          Einen schönen Donnerstag noch.

          Gruß, Ashura

          --
          sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
          mathbr:del.icio.us/ mathbr:w00t/
    2. Hi Berti,

      leider funktioniert das nicht so, wie ich es will. Ich habe dein Beispiel ausprobiert und es sieht so aus, dass die Bildbeschreibung nicht automatisch beim rechten Bildrand umbricht, sondern ganz normal weiterläuft.

      Ich möchte gerne, dass der Text der unterhalb des Bildes angezeigt wird, nicht über den rechten Rand hinausgeht.

      Ich hoffe du verstehst was ich meine ;-)

      lg, Dai

      Hy,

      der DIV-Container, der bisher nur dein Bild umschliesst, umschliesst jetzt auch den DIV-Container für die Bildbeschreibung und passt sich wg.  des Wertes "auto" immer den Maßen des Bildes an.
      Der DIV-Container für die Beschreibung erhält noch text-align:right, damit die Beschreibung grundsätzlich rechts steht. Fertig.

      Mfg Berti

      <html>
      <head>
      <title>&nbsp;</title>
      <style type="text/css">
      <!--

      #box
      {
      position:absolute;
      width:auto;
      height:auto;
      background-color:red;
      }

      img
      {
      display:block;
      }

      //-->
      </style>
      </head>
      <body>

      <div id="box">
      <img src="bild.jpg" name="bild" id="motiv01" width="200" height="150" alt="">
      <div id="text" style="text-align:right">Beschreibung</div>
      </div>

      </body>

      » </html>

  2. hi,

    kurz zu meinem Problem: Ich habe eine Division, wo ein Bild eingebettet ist. Sieht also so aus:


    <div>
      <img src="bild.gif" width="100" height="50" alt="" />
    </div>

    Ok, nun sollte unterhalb dieses Bildes ein Bild-Beschreibungstext angezeigt werden, z.B. so:


    <div>
      <img src="bild.gif" width="100" height="50" alt="" />
    </div>
    <div>
      Hier kommt eine kurze Bildbeschreibung unterhalb des Bildes.
    </div>

    Mein Problem: Das Bild muss nicht immer die selbe Breite haben (kann z.B. 50px breit sein oder 300px breit sein). Die Bildbeschreibung darunter kann auch kürzer oder länger sein, sollte aber NIEMALS über den rechten Rand des Bildes hinausgehen (falls der Text also länger ist, soll er beim rechten Bildrand umgebrochen werden).

    Leider kann ich die Div's keine fixe Breite geben, weil es ja vom Bild abhängt.

    Hat jemand eine Idee?

    lg, Daniel

    Hallo Daniel,

    so gehts:
    <div>
      <img id="img1" src="bild.gif" width="100" height="50" alt="" />
    </div>
    <div id="beschreibung">
      Hier steht die Beschreibung
    </div>
    <script type="text/javascript">
      breite = document.getElementById("img1").width;
      document.getElementById("beschreibung").style.width = breite;
    </script>

    Gruß Jörg