1
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?
Gibts da überhaupt eine Lösung? Danke für Tips
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