Der Martin: Bild im div lassen

Beitrag lesen

SELF-Forum

Bild im div lassen

Der Martin
– Informationen zu den Bewertungsregeln

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.
Beitrag melden
–
Informationen zu den Bewertungsregeln