Axel Richter: liste und i.e

Beitrag lesen

Hallo,

Ob die Listenelemente "outside" oder "inside" angezeigt werden, ist mir eigentlich egal. Wichtig ist, dass die 2. Zeile innerhalb eines <li> nach einem Umbruch bündig ist.

Die unterschiedlichen Browserdarstellungen bei UL/LI erkennst Du am Besten, wenn Du mal um beide Elemente border zeichnen lässt. Du musst mit margin und padding für UL und LI experimentieren, bis es in vielen Browsern gleich aussieht. Für normale Listen mit Standardbullets habe ich mit

  
ul { margin:0; padding:0; }  
li { margin:0; padding:0; margin-left:2.5ex; }  

die besten Erfahrungen gemacht.

Für Dein Problem, nämlich eigene List-Bullet-Grafiken, habe ich allerdings schlechte Erfahrungen mit den Standardlösungen. Jeder Browser positioniert die Bullet-Grafiken in der Höhe anders. besser ist es hier meiner Meinung nach, die Grafiken als Hintergrund für die LI-Elemente zu definieren.

Beispiel:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Titel</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
ul { margin:0; padding:0; width:25ex; }  
li { margin:0; padding:0; padding-left:1.5ex; list-style-type:none; background-image:url(listen_zeichen.gif); background-repeat:no-repeat; background-position:0 0.5em; }  
</style>  
</head>  
<body>  
<ul>  
<li>ein Testtext zum Testen</li>  
<li>noch ein Testtext zum Testen laenger Testtext zum Testen laenger</li>  
<li>und noch ein Testtext zum Testen noch laenger Testtext zum Testen noch laenger</li>  
<li>letzter Testtext zum Testen noch viel laenger Testtext zum Testen noch viel laenger</li>  
</ul>  
</body>  
</html>  

viele Grüße

Axel