10 svar · 357 visningar · startad av maqe
Jag använder inte tabeller i den mån det går att slippa det men när man ska göra en lista med rubriker och brödtext hur löser man det på snyggast sett?
Alltså vad jag försöker skapa är en tabelliknande struktur med 3 kolumner och 2 rader med rubrik o dom tre översta kolumnerna och brödtext i dom undre kolumnerna. Ska man göra en lista i en lista?
Det handlar ju om vad det är för innehåll.
Vad vill du visa för något?
det är bara text jag skall visa med med rubrik och brödtext
Det låter precis som att det är tabell du skall använda om jag uppfattat dig rätt. Man ska inte gå över ån efter vatten ;)
Okay, det är de jag gör nu men då skiter sig valideringen och WAI tänket väl :)
Om det är textstycken du vill dela upp i 3 kolumner, sida vid sida så är det nog fel med en tabell och lika fel med en lista.
I detta fall är det väl då <div> som gäller?
Ok
Sätter du float: left på alla tre divvarna så bör de hamna bredvid varandra i kolumner.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title lang="sv">Kolumner</title>
<style type="text/css">
.section { min-width:5em; width:31%; max-width:30em; padding:0 1%; float:left; }
</style>
</head>
<body>
<h1 lang="sv">Kolumner</h1>
<div class="section">
<h2>foo</h2>
<p lang="la">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam scelerisque
arcu a sem. Quisque rutrum ipsum vel ligula. Morbi quam. Nam ac mi. Etiam auctor
viverra turpis. Mauris mauris. Quisque et nisl. Aliquam pellentesque, augue in
eleifend consequat, velit tellus vestibulum nisl, at gravida odio enim sed risus.
Integer dapibus, elit vitae volutpat placerat, purus ante porta pede, id interdum
tortor neque ut ante. Praesent facilisis wisi ac pede.</p>
</div>
<div class="section">
<h2>bar</h2>
<p lang="la">Fusce sollicitudin. Morbi id risus. Donec risus nibh, facilisis a, rutrum
et, ornare at, sem. Fusce at tortor. Maecenas felis enim, ultricies porta, sodales a,
auctor vitae, dolor. Nullam mi elit, accumsan vel, porttitor lacinia, facilisis nec,
risus. Maecenas vitae nibh ut lectus ornare congue. Nam sed urna a odio aliquam
tincidunt. Sed eget tortor at est varius pellentesque. Nam id leo. Morbi suscipit
volutpat diam. Aliquam erat volutpat. Fusce tincidunt bibendum justo.</p>
</div>
<div class="section">
<h2>baz</h2>
<p lang="la">Nullam blandit lorem non purus. Nullam sapien pede, dictum eget,
facilisis et, tempus et, wisi. Integer ut neque. Sed auctor dolor in leo. Maecenas
wisi. Etiam et felis at libero facilisis elementum. Donec pharetra. Nullam lacus
felis, auctor eu, volutpat vitae, commodo sed, ante. Fusce ultrices, velit id
ullamcorper accumsan, diam purus cursus diam, a viverra risus nunc non urna. Donec nec
nisl quis urna faucibus rhoncus. Etiam aliquet lacus nec turpis. Cras dolor tellus,
vulputate ut, volutpat et, cursus tristique, elit. Vivamus rhoncus tristique nunc.
Nullam risus tortor, tempus eget, bibendum vehicula, porttitor et, sapien.</p>
</div>
</body>
</html>
Det blev ju vettigt ... tack för hjälpen ...