Axel Richter: Bilder in Liste dicht an dicht setzen

Beitrag lesen

Hallo,

Das hört sich nach der Unterlänge für die Bilder an.
Nee. Die Fläche, die die Bilder einnehmen, sind ok. Nur wenn ein Link dazu kommt, wird es mehr.
vertical-align für img könnte helfen.
Damit regle ich doch lediglich die Positionierung, reduziere aber keine Fläche, die eingenommen wird. Oder übersehe ich was? (Deine beiden Tipps halfen aber auch beide nicht.)

Doch, vertikal-align sollte helfen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Bilderliste</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
ul {list-style-type:none; margin:0; padding:0;}
li {margin:0; padding:0; border:1px solid black;}
-->
</style>
</head>
<body>
<p>Standard</p>
<ul>
<li><img src="back01.jpg" width="100" height="30" alt="button"></li>
<li><img src="back01.jpg" width="100" height="30" alt="button"></li>
<li><img src="back01.jpg" width="100" height="30" alt="button"></li>
</ul>
<p>Images mit vertical-align:bottom;</p>
<ul>
<li><img style="vertical-align:bottom;" src="back01.jpg" width="100" height="30" alt="button"></li>
<li><img style="vertical-align:bottom;" src="back01.jpg" width="100" height="30" alt="button"></li>
<li><img style="vertical-align:bottom;" src="back01.jpg" width="100" height="30" alt="button"></li>
</ul>
<p>Standard mit Link</p>
<ul>
<li><a href="#"><img src="back01.jpg" width="100" height="30" alt="button"></a></li>
<li><a href="#"><img src="back01.jpg" width="100" height="30" alt="button"></a></li>
<li><a href="#"><img src="back01.jpg" width="100" height="30" alt="button"></a></li>
</ul>
<p>Images mit vertical-align:bottom; und Link</p>
<ul>
<li><a href="#"><img style="vertical-align:bottom;" src="back01.jpg" width="100" height="30" alt="button"></a></li>
<li><a href="#"><img style="vertical-align:bottom;" src="back01.jpg" width="100" height="30" alt="button"></a></li>
<li><a href="#"><img style="vertical-align:bottom;" src="back01.jpg" width="100" height="30" alt="button"></a></li>
</ul>
</body>
</html>

Im Übrigen ineressiert bei dieser Fehlersuche nicht, wie das HTML entsteht, sondern nur das HTML, welches im Browser ankommt. Das hättest Du aber durchaus posten können (Browser-Quelltext anzeigen) oder einen Link auf die Seite setzen.

viele Grüße

Axel