Gürgen II: Bild im div lassen

Hallo, ich schon wieder.
Das Bild (height:500px;) ragt unten aus dem div heraus (padding:10px wirkt nur auf den Text). Wie kann ich das <div> um den geamten Inhalt (also auch um das Bild) legen?

<html>  
<head>  
  <style type="text/css">  
    .inhalt {vertical-align:top; background-color:#CCCCCC; padding:10px;}  
    .thumbnail {border:0; float:left; margin-right:5px; height:500px;}  
  </style>  
</head>  
<body>  
   <div class="inhalt">  
     <a href="Ergebnisse/Machbarkeitsstudie.pdf" target="_blank"><img src="Bilder/thumbnails/Machbarkeitsstudie.gif" alt="Machbarkeitsstudie" class="thumbnail">  
     <b>Machbarkeitsstudie (.pdf)</b></a>&nbsp;(<i>ca. 1,3 MB</i>)<br>  
     Die "Machbarkeitsstudie zur Erstellung eines ...  
   </div>  
</body>

Gürgen II

  1. Hallo,

    Das Bild (height:500px;) ragt unten aus dem div heraus (padding:10px wirkt nur auf den Text).

    kein Wunder: Du hast das Bild ja aus dem Elementfluss genommen, indem du es floatest. Works as designed. Davon abgesehen ist das hier auch noch strukturell ungünstig, da das Bild im Quelltext *innerhalb* eines Links steht und daher wahrscheinlich auch klicksensitiv sein soll. Durch das float nimmst du es aber vom funktionalen Aspekt her auch aus dem Link heraus.

    Wie kann ich das <div> um den geamten Inhalt (also auch um das Bild) legen?

    Entweder ...
     * das umgebende Element ebenfalls floaten (verlagert das Problem evtl. zum Elternelement)
     * dem nachfolgenden Element ein clear geben, das wäre hier das b-Element.

    <html>

    <head>
      <style type="text/css">
        .inhalt {vertical-align:top; background-color:#CCCCCC; padding:10px;}
        .thumbnail {border:0; float:left; margin-right:5px; height:500px;}
      </style>
    </head>
    <body>
       <div class="inhalt">
         <a href="Ergebnisse/Machbarkeitsstudie.pdf" target="_blank"><img src="Bilder/thumbnails/Machbarkeitsstudie.gif" alt="Machbarkeitsstudie" class="thumbnail">
         <b>Machbarkeitsstudie (.pdf)</b></a>&nbsp;(<i>ca. 1,3 MB</i>)<br>
         Die "Machbarkeitsstudie zur Erstellung eines ...
       </div>
    </body>

      
    Übrigens gilt <b> auch als deprecated; die damit vermittelte Darstellung sollte besser über CSS angegeben werden. Das b-Element könnte dann ein span werden, vielleicht auch ein em oder strong.  
      
    Ciao,  
     Martin  
    
    -- 
    Die letzten Worte des Hardware-Bastlers:  
    Das Netzkabel lass ich wegen der Erdung lieber dran.
    
    1. Works as designed.

      guter spruch, muss ich mir merken wenn mich mal wieder wer fragt warum das und das so und so ist :-)

      da das Bild im Quelltext *innerhalb* eines Links steht und daher wahrscheinlich auch klicksensitiv sein soll. Durch das float nimmst du es aber vom funktionalen Aspekt her auch aus dem Link heraus.

      hm... läuft aber.

      Entweder ...
      * das umgebende Element ebenfalls floaten (verlagert das Problem evtl. zum Elternelement)

      Tja, wie Du schon berichtet hast "vererben" hier mal die Kinder das Problem an die Eltern.

      * dem nachfolgenden Element ein clear geben, das wäre hier das b-Element.

      Habe das <b> durch <span style="font-weight:bold; clear:both;"> ersetzt. Lüppt aber nicht (Bild wird weiterhin rausgezogen).

      Gürgen

    2. @@Der Martin:

      nuqneH

      Wie kann ich das <div> um den geamten Inhalt (also auch um das Bild) legen?

      Entweder ...
      * das umgebende Element ebenfalls floaten (verlagert das Problem evtl. zum Elternelement)
      * dem nachfolgenden Element ein clear geben, das wäre hier das b-Element.

      Oder ganz einfach fürs umgebende Element: .inhalt { overflow: hidden }

      .inhalt {vertical-align:top; background-color:#CCCCCC; padding:10px;}

      BTW, die 'vertical-align'-Angabe ist unsinnig.

      <b>Machbarkeitsstudie (.pdf)</b></a>&nbsp;(<i>ca. 1,3 MB</i>)<br>
           Die "Machbarkeitsstudie zur Erstellung eines ...

      Das NBSP hat ich an der Stelle für unsinnig: "(.pdf)" gehört doch zu "Machbarkeitsstudie", der Umbruch sollte auch so erfolgen können:

      Machbarkeitsstudie (.pdf)
      ca. 1,3 MB
      Die "Machbarkeitsstudie zur Erstellung eines ...

      Übrigens gilt <b> auch als deprecated; die damit vermittelte Darstellung sollte besser über CSS angegeben werden. Das b-Element könnte dann ein span werden, vielleicht auch ein em oder strong.

      'span'? Damit ginge jegliche Hervorhebung verloren.

      Ich würde es eher so machen:

         <div class="inhalt">  
           <a href="Ergebnisse/Machbarkeitsstudie.pdf" target="_blank">  
             <img src="Bilder/thumbnails/Machbarkeitsstudie.gif" alt="Machbarkeitsstudie" class="thumbnail">  
             Machbarkeitsstudie (.pdf)  
           </a>  
           <span class="size">(ca. 1,3 MB)</span><br>  
           Die "Machbarkeitsstudie zur Erstellung eines ...  
         </div>
      
      .inhalt { font-weight: bold }  
      .size { font-weight: normal }
      

      Qapla'

      --
      Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
      1. Oder ganz einfach fürs umgebende Element: .inhalt { overflow: hidden }

        LÄUFT!!!

        BTW, die 'vertical-align'-Angabe ist unsinnig.

        stimmt

        Das NBSP hat ich an der Stelle für unsinnig: "(.pdf)" gehört doch zu "Machbarkeitsstudie", der Umbruch sollte auch so erfolgen können:

        Ne, will ich so !-)

        'span'? Damit ginge jegliche Hervorhebung verloren.

        aber nicht mit <span style="bla">

        Danke Euch beiden für die Hilfe!
        overflow:hidden ist akzeptiert.

        1. Hi,

          Das NBSP hat ich an der Stelle für unsinnig: "(.pdf)" gehört doch zu "Machbarkeitsstudie", der Umbruch sollte auch so erfolgen können:
          Ne, will ich so !-)

          wieso willst Du es falsch machen?

          Ein Nonbreaking Space hat den Zweck, zusammen gehörende Inhalte zusammen zu fügen. Dies ist beispielsweise ideal bei Werten mit Einheiten nutzbar (42,99&nbsp;€). Bei zufällig aufeinander stoßenden Textfragmenten wie "(.pdf)" und "(ca." ist es jedoch absolut fehl am Platz.

          'span'? Damit ginge jegliche Hervorhebung verloren.
          aber nicht mit <span style="bla">

          Es geht hier um semantische Hervorhebung. Kein CSS-Code des Universums kann diese einem <span> verpassen.

          Cheatah

          --
          X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
          X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
          X-Will-Answer-Email: No
          X-Please-Search-Archive-First: Absolutely Yes
          1. Bei zufällig aufeinander stoßenden Textfragmenten wie "(.pdf)" und "(ca." ist es jedoch absolut fehl am Platz.

            Diese Textfragmente gehören zusammen. Ich will es halt so!

            Es geht hier um semantische Hervorhebung. Kein CSS-Code des Universums kann diese einem <span> verpassen.

            Ich mach jetzt Wochenende. Euch auch ein schönes!

            1. Hi,

              Diese Textfragmente gehören zusammen.

              "ca.", "1,3" und "MB" gehören zusammen. Zumindest die letzten beiden, bei den ersten beiden kann man streiten. Nicht zusammen gehören "(.pdf)" und "(ca.", denn das daraus resultierende Fragment:

              (.pdf) (ca.

              ergibt alleinstehend nicht den geringsten Sinn.

              Ich will es halt so!

              Das ist ein waaahnsinnig schlechtes Argument.

              Cheatah

              --
              X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
              X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
              X-Will-Answer-Email: No
              X-Please-Search-Archive-First: Absolutely Yes