Zur Navigation

Liste (UL/OL) neben floatendem IMG

1 Rudy

Hallo,

wie löst man das Problem von überstehenden Listenbeschriftungen bei floatenden Bildern, ohne die ul/ol insgesamt mit mehr padding / margin zu versehen (was dann nach dem Bild im Text nicht gut aussieht) oder den list-style auf "inside" zu setzen?

<!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" xml:lang="de" lang="de">
<head>
  <style type="text/css">
    * { margin:0; padding:0; }
    body { font:normal 14px Courier; }
    h1 { font-size:16px; margin-bottom:0.5em; }
    p, ul, ol { margin-bottom:1em; }
    ul, ol { padding-left:2em; }
    ul { list-style:square; }
    ol { list-style:decimal; }
    div#all { background:#fafafa; border:1px solid #aaa; width:350px; margin:20px auto; padding:1em; }
    div.picture { width:150px; height:250px; border:1px solid #aaa; background:white; float:left; margin:0 1em 1em 0; }
  </style>
</head>
<body>
  <div id="all">
    <h1>Etiam tortor massa!</h1>
    <div class="picture">:)</div>
    <ul>
    <li>Etiam tortor massa</li>
    <li>pretium id</li>
    <li>fringilla ac lobortis</li> 
    <li>eu, urna. Sed neque. Nullam venenatis sapien at libero.</li> 
    </ul>
    <p>Vivamus porttitor erat vitae nunc. Nunc vitae turpis id leo porta placerat.</p>
    <ol>
    <li>Etiam tortor massa</li>
    <li>pretium id</li>
    <li>fringilla ac lobortis</li> 
    <li>eu, urna. Sed neque. Nullam venenatis sapien at libero.</li> 
    <li>Vivamus porttitor erat vitae nunc. Nunc vitae turpis id leo porta placerat. </li>
    </ol>
    <p>In hac habitasse platea dictumst. In a diam. Duis tempor magna ut ante iaculis pharetra! Etiam feugiat. Integer augue tellus, sagittis vel, sodales tempor; fermentum tempus, nibh. Proin quis massa. Sed in massa a est elementum posuere. Nulla gravida leo ut velit. Aliquam et lacus quis massa auctor porta. Vivamus nunc. </p>
        <ul>
    <li>Etiam tortor massa</li>
    <li>pretium id</li>
    <li>fringilla ac lobortis</li> 
    <li>eu, urna. Sed neque. Nullam venenatis sapien at libero.</li> 
    <li>Vivamus porttitor erat vitae nunc. Nunc vitae turpis id leo porta placerat. </li>
    </ul>

    <p>Vestibulum aliquam molestie est. Etiam non tellus? Etiam eleifend! Curabitur quis mauris.</p>
    <ol>
    <li>Etiam tortor massa</li>
    <li>pretium id</li>
    <li>fringilla ac lobortis</li> 
    <li>eu, urna. Sed neque. Nullam venenatis sapien at libero.</li> 
    <li>Vivamus porttitor erat vitae nunc. Nunc vitae turpis id leo porta placerat. </li>
    </ol>
    <p>
     Quisque tellus! Donec volutpat ligula a mauris. Mauris id felis! Praesent lacinia nibh molestie ante. Cras congue, erat id interdum pharetra, augue ligula molestie pede, at gravida tellus mi at pede. Donec auctor fringilla risus. Nunc cursus massa vitae augue. Suspendisse eget risus! Nam rhoncus accumsan nibh. Pellentesque consectetur. Curabitur interdum aliquet elit. Aliquam iaculis, pede fringilla mollis feugiat, est diam pellentesque nunc, eget placerat ante arcu at nisi! Suspendisse sed turpis ultrices urna lacinia lacinia. Proin nec tellus. Cras ullamcorper, felis nec ornare porttitor, erat ipsum aliquam nibh; facilisis convallis neque enim vitae nisi. Integer vestibulum, velit a tempus placerat, nunc nisl consectetur sapien, interdum aliquet sapien eros a odio. Curabitur gravida.    
    </p>
  </div>
</body>
</html>

Gibts da überhaupt eine Lösung? Danke für Tips

01.01.2009 18:19 | geändert: 01.01.2009 18:22

2 Jörg Kruse

Eine perfekte Lösung kenne ich leider auch nicht. Mit text-indent statt padding-left für ul und ol würde man zwar keine Überlappungen haben, aber dafür nur die jeweils erste Zeile eines Listenpunktes einrücken. Mit einem größeren margin-right für div.picture würden die normalen Texte neben dem Bild weiter weggerückt.

01.01.2009 23:02

3 Rudy

Exakt. Und das haben "die" damals, als sie die Standards definiert haben, so gewollt? Oder sind die Browser zu blöd?

01.01.2009 23:15 | geändert: 01.01.2009 23:15

... 2 Jahre später ...

4 Rudy

Inzwischen (nach langer Zeit) habe ich eine Lösung gefunden, die auf allen relevanten Browsern konsistent zu sein scheint. Wenn man anstatt der browsereigenen Listenpunkte ein Bild verwendet, welches man den <li>s als Hintergrund setzt und die Liste selbst auf overflow:hidden stellt, überlappen die Listenpunkte ein links floatendes Bild nicht. Durch das eingestellte padding ist auch der Einzug bei umbrechenden Listenpunkten richtig (nicht wie bei list-style-position: inside)

p, ul { font-size:12px; line-height:1.5em; margin-bottom:1em; }
ul { overflow:hidden; list-style:none; }
ul li { padding-left: 16px; background:url(bullet.png) no-repeat 2px 7px; }

(bullet.png ist ein schwarzer Punkt 5x5px)

19.01.2011 10:29

1 Forenmitglied fand diesen Beitrag gut

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]