Axel Richter: "schwebende" DIVs (float) ausrichten

Beitrag lesen

SELF-Forum

"schwebende" DIVs (float) ausrichten

Axel Richter
– Informationen zu den Bewertungsregeln

Hallo,

Skizze:
+----------------------------+
|           Seite            |
|   +--+  +--+  +--+  +--+   | Die Bilder haben per margin
|   |  |  |  |  |  |  |  |   | zwischen einander sinnvolle
|   +--+  +--+  +--+  +--+   | Abstände.
|   +--+  +--+  +--+  +--+   |
|   |  |  |  |  |  |  |  |   | Die Bilder-Zeilen sind zentriert ausgerichtet.
|   +--+  +--+  +--+  +--+   |
|      +--+  +--+  +--+      | Daher stehen die Bilder der letzten Zeile
|      |  |  |  |  |  |      | auch "zentriert", obwohl es weniger sind.
|      +--+  +--+  +--+      | Übrigens alles ohne float!
+----------------------------+

Ja, das funktioniert.

Wenn Du zu den Bildern gerne noch Bildunter- oder -überschriften haben möchtest, dann kannst Du ja kleine Tabellen notieren, in deren zwei Zeilen Bild und zugehöriger Text stehen. <table> mit display: inline verhält sich in einem großen <div> ähnlich, wie <img>s in einem <p>.

Hm, nein. TABLE mit display:inline verhält sich äußerst chaotisch. Üblich wäre hierfür display:inline-table. Das wird aber bisher nur von Opera8.5 umgesetzt. Im folgenden Beispiel kannst Du das mal ausprobieren. Das größte Problem ist hier leider der FireFox, der vertical-align:top allzu strict umsetzt. Für IE kann man ja CCs einsetzen. Im Opera8.5 wird es, wie gesagt nach Standard umgesetzt. Ich will es mir aber lieber nicht in früheren Operas oder im Safari oder im ...;-)) ansehen.

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">  
<head>  
<title>Thumbnails</title>  
<meta http-equiv="content-type" content="text/html; charset=utf-8" />  
<style type="text/css">  
<!--  
.container { border:solid 2px green; background-color:#77FF77; text-align:center; }  
.thumbnail { display:inline; display:inline-table; margin:5px; border:solid 2px red; background-color:#FF7777; } /*Fuer Opera8.5 wird display:inline-table definiert.*/  
/*.thumbnail { vertical-align:top; }*//*Das mag FireFox nicht*/  
.thumbnail td { width:120px; text-align:center; padding:5px; border:solid 2px blue; background-color:#7777FF; }  
.thumbnail img { display:block; }  
/* -->  
</style>  
<!--[if IE]>  
<style type="text/css">  
.thumbnail { display:inline; vertical-align:top; }  
</style>  
<![endif]-->  
</head>  
<body>  
<div class="container">  
 <table class="thumbnail">  
  <tr><td><img src="Beispiel.jpg" width="120" height="120" alt="Thumbnail" /></td></tr>  
  <tr><td>Bildbeschreibung</td></tr>  
 </table>  
 <table class="thumbnail">  
  <tr><td><img src="Beispiel.jpg" width="120" height="120" alt="Thumbnail" /></td></tr>  
  <tr><td>Bildbeschreibung viel laenger als ueblicherweise</td></tr>  
 </table>  
 <table class="thumbnail">  
  <tr><td><img src="Beispiel.jpg" width="120" height="120" alt="Thumbnail" /></td></tr>  
  <tr><td>Bildbeschr.</td></tr>  
 </table>  
 <table class="thumbnail">  
  <tr><td><img src="Beispiel.jpg" width="120" height="120" alt="Thumbnail" /></td></tr>  
  <tr><td>Bildbeschreibung</td></tr>  
 </table>  
 <table class="thumbnail">  
  <tr><td><img src="Beispiel.jpg" width="120" height="120" alt="Thumbnail" /></td></tr>  
  <tr><td>Bildbeschreibung viel laenger als ueblicherweise</td></tr>  
 </table>  
 <table class="thumbnail">  
  <tr><td><img src="Beispiel.jpg" width="120" height="120" alt="Thumbnail" /></td></tr>  
  <tr><td>Bildbeschr.</td></tr>  
 </table>  
</div>  
</body>  
</html>

viele Grüße

Axel

Beitrag melden
–
Informationen zu den Bewertungsregeln