Back to definition list article

Definition list with CSS

See HTML source for comments in its included CSS...

Scales well to font sizes of 30+px, minimal markup, and (I would argue) a fully semantic usage of a DL (per the W3 spec).

Note that a subtle indent error remains at the beginning of the first line of second and following pages in IE printout. (Turn on "Print background colors and images" in Advanced tab of Internet options under Tools to see this.) The error goes away when the "text-indent" directive is removed from the CSS for the DD element. This apparently is a rather minor bug in IE, but I have not tested to verify this...

1.
[dd begin]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dolor. Mauris interdum convallis tortor. Quisque at tellus. Nullam sit amet enim. Curabitur hendrerit. Sed porta fermentum diam. Aenean tempus mauris ut ante. Proin hendrerit wisi id purus. Praesent vel sem. Sed auctor hendrerit mauris. Integer pulvinar urna sed massa. Nulla facilisi. Quisque nunc dolor, scelerisque dictum, lacinia in, convallis id, lectus. Integer feugiat, orci vitae rutrum pulvinar, odio eros scelerisque tortor, quis ornare dolor ante a erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis arcu augue, auctor a, ultrices quis, pharetra nec, quam. Fusce hendrerit sapien et metus. Quisque aliquam imperdiet urna.[end dd]
2.
[dd begin]Sed ut lectus vitae eros rutrum volutpat. Nullam vitae metus ut metus pulvinar ultrices. Phasellus faucibus. Quisque auctor accumsan neque. Sed volutpat consectetuer libero. Pellentesque lectus. Donec ultricies metus nec lorem. Quisque fermentum ipsum ac ante. Phasellus velit leo, nonummy ut, laoreet eget, interdum id, mi. Donec dictum neque eget ligula. Suspendisse ultrices leo et nunc. Mauris rhoncus condimentum diam. Proin purus massa, molestie hendrerit, sagittis ac, blandit in, sem. Nam quis turpis. Quisque placerat, erat a pretium aliquet, lacus dolor cursus arcu, nec porttitor nisl risus eget libero. Donec quam. Praesent quis nulla et quam lobortis venenatis. Ut et ipsum quis nibh elementum fermentum.[end dd]
3.
[dd begin]Aliquam tempor vestibulum leo. Nam eget turpis. Suspendisse nulla lacus, rhoncus vel, tristique ac, fringilla non, diam. Suspendisse nunc ipsum, elementum eget, faucibus et, auctor eu, orci. Aenean tincidunt consequat mauris. Mauris sodales justo id nibh. Suspendisse adipiscing, mi at lobortis molestie, augue orci aliquam ante, vitae eleifend tortor ipsum lobortis est. Nunc magna dolor, malesuada at, pulvinar non, consequat vitae, odio. Sed ullamcorper tincidunt ipsum. Mauris gravida nunc et enim. Mauris sollicitudin, wisi in iaculis rutrum, justo ante dignissim augue, et egestas metus wisi at nulla. Nunc non justo blandit metus molestie vehicula. Aenean nec massa. Phasellus tellus felis, ultricies nec, placerat nec, luctus vitae, nibh. Mauris a massa. Phasellus vel mauris. Fusce turpis ante, ullamcorper vel, bibendum vel, sagittis nec, sem.[end dd]
4.
[dd begin]Sed vulputate iaculis diam. Nam lobortis wisi et ante. In non diam. Praesent id elit. Morbi fringilla aliquam odio. Ut fermentum faucibus risus. Vestibulum ut wisi. Morbi dignissim felis in lectus eleifend fermentum. Cras mi urna, gravida quis, aliquet eget, cursus quis, purus. Proin dictum lacus sit amet ligula. In elementum ullamcorper mi. Nullam purus. Cras commodo neque vitae odio. Maecenas non quam nec nisl dignissim vehicula.[end dd]
5.
[dd begin]Nam lacinia urna et dui. Maecenas pede mi, bibendum in, rhoncus eget, consequat nec, nisl. Donec vel diam ut velit commodo feugiat. Nulla interdum vestibulum neque. Nulla aliquet. Pellentesque at eros eu magna tempus porttitor. Nullam suscipit elementum urna. Integer aliquam, tellus ac pharetra consectetuer, nulla dui molestie nulla, a volutpat diam erat vel sapien. Pellentesque libero pede, elementum at, semper in, accumsan in, metus. Quisque lorem mi, consequat sit amet, vehicula at, hendrerit non, sapien. Curabitur ut erat. Vivamus consectetuer varius augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam et eros vulputate ipsum imperdiet condimentum. Sed nec est. Pellentesque eros quam, ullamcorper ultricies, accumsan sit amet, nonummy non, purus. Ut sollicitudin euismod diam.[end dd]
6.
[dd begin]Fusce id nibh. Etiam rutrum ante nec diam. Nam viverra lacinia enim. Phasellus laoreet ante id ipsum. Nullam scelerisque commodo libero. Nunc erat. Ut laoreet erat id eros. Nunc cursus auctor ligula. Duis nunc eros, gravida nec, volutpat id, eleifend non, dolor. Nullam lacus ante, commodo in, porttitor ut, vestibulum sed, purus. Praesent facilisis enim in quam. Donec nec sapien quis odio sodales auctor. Pellentesque elementum. Sed ut eros non enim cursus rhoncus. Vestibulum non ante id neque lobortis eleifend. Praesent accumsan volutpat nunc. Sed vitae arcu. Nulla facilisi. Etiam commodo, ipsum sed gravida nonummy, risus mi faucibus nibh, ac mollis ipsum lorem sit amet metus. Vestibulum condimentum lectus ac mauris.[end dd]
7.
[dd begin]Duis lacus mi, pretium non, tincidunt quis, adipiscing vitae, purus. Phasellus fermentum. Vestibulum sollicitudin ligula scelerisque ligula. Morbi nonummy dui at metus. Donec mattis risus sit amet arcu. Cras viverra sodales turpis. Phasellus porta. Praesent vel lacus. Duis vulputate risus sit amet metus. Sed ullamcorper purus in tellus. Curabitur arcu elit, tincidunt at, volutpat eget, euismod eget, est. Praesent libero.[end dd]
8.
[dd begin]Aenean blandit interdum lectus. Aenean rutrum tellus cursus mauris. Etiam vulputate mi at orci. Integer sapien neque, congue at, viverra eu, fringilla at, tellus. Sed vulputate. Pellentesque pulvinar sem. Sed adipiscing sagittis nisl. Integer nec felis eget orci pharetra gravida. Nunc adipiscing dolor sit amet arcu. Nullam vehicula. Aliquam facilisis mi quis sem. Maecenas leo mi, pulvinar et, suscipit fermentum, ornare quis, nunc. Nulla dictum, orci ut consectetuer viverra, diam odio vestibulum massa, sed dapibus nibh augue ut eros. Sed sed quam eget nibh eleifend luctus. In scelerisque semper lacus. Nullam eu wisi et erat semper semper. Nunc vitae augue ac arcu euismod hendrerit. Nam viverra. Nulla facilisi. Vivamus tempor scelerisque tellus.[end dd]
9.
[dd begin]Nulla dolor. Ut et quam eget elit tristique rutrum. Praesent eleifend risus in enim. Etiam imperdiet, nibh id scelerisque laoreet, dolor augue egestas felis, nec cursus odio felis eu arcu. Phasellus vestibulum ornare massa. Maecenas dapibus quam nec nulla. Mauris enim. Nullam et justo eget est varius congue. Vestibulum aliquet. Quisque purus massa, faucibus sed, tempor at, dapibus non, lacus. Vivamus dapibus arcu nec turpis. Proin eu felis nec nulla lobortis placerat. Curabitur ligula. Phasellus consectetuer wisi volutpat felis facilisis iaculis. Praesent convallis eros sed erat. Nunc imperdiet mi ut augue. Mauris arcu dolor, hendrerit in, faucibus quis, faucibus quis, erat. Sed vitae lectus.[end dd]
10.
[dd begin]Pellentesque ac nibh. Praesent justo est, congue vitae, interdum quis, rhoncus sed, mi. Curabitur sed arcu at urna lacinia iaculis. Quisque quis lacus eget leo pretium consectetuer. Mauris sapien. Suspendisse rhoncus est quis diam. Phasellus ligula. Mauris arcu. Sed sed est. Praesent tristique, justo a pulvinar auctor, mi erat elementum leo, non luctus erat turpis at augue. Praesent hendrerit feugiat quam. In rutrum lacus et nunc. Suspendisse quis risus sit amet enim aliquam fringilla. Vestibulum dictum fringilla velit. Nullam lacinia. Mauris fermentum enim vitae ante. Nunc ornare faucibus nulla. Aliquam et diam. Aenean pellentesque augue sit amet mauris tristique tincidunt. Integer tortor ante, ultricies vitae, sollicitudin nec, condimentum ut, mi.[end dd]
11.
[dd begin]Duis tincidunt est ac justo. Proin eros. Suspendisse semper sagittis mauris. Morbi sit amet sem ac felis vestibulum fermentum. Etiam vel risus malesuada metus sollicitudin tempus. Fusce est. Aenean sit amet nibh a risus auctor dignissim. Cras eget pede. Vivamus fermentum. Vivamus vel wisi sit amet nisl pellentesque scelerisque.[end dd]
12.
[dd begin]Vivamus in mauris vitae sem congue placerat. Integer fringilla pede vel est. Mauris tincidunt pretium mi. Proin augue nulla, rutrum eget, mollis eu, commodo mattis, pede. Nam odio neque, mollis vel, lobortis ac, accumsan in, leo. Cras suscipit nonummy nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean venenatis. Proin erat urna, sodales nec, fermentum sit amet, condimentum sed, magna. In velit. Nullam arcu. Nulla placerat lobortis felis. Integer quis nibh. Proin sollicitudin diam vitae augue egestas adipiscing. Donec fermentum, lorem quis accumsan cursus, sapien nunc tempor ligula, sed dapibus erat ligula sed diam. Aliquam luctus. Nunc elementum mauris vel libero. Aenean rhoncus magna eu turpis.[end dd]
13.
[dd begin]Maecenas nec lectus. Aliquam erat volutpat. Vestibulum a libero. Etiam rutrum, urna sit amet venenatis laoreet, turpis ante facilisis risus, molestie euismod nibh quam vel eros. Sed ligula. Etiam dui felis, egestas nec, nonummy ac, porta eu, urna. Nulla facilisi. Sed felis wisi, malesuada ac, placerat sit amet, porttitor vitae, lorem. Fusce a nisl eu mauris faucibus porta. Pellentesque ac nulla tempus augue sodales adipiscing. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras aliquam, sapien at elementum elementum, dolor mi feugiat nulla, eu vulputate velit pede ut magna. Sed dui.[end dd]
14.
[dd begin]Morbi a felis non justo sagittis blandit. Nullam ornare, libero ut ullamcorper sodales, felis ligula pretium wisi, ut semper ligula sapien ac massa. Suspendisse a libero quis wisi hendrerit imperdiet. Nam ac massa. In cursus, libero mattis ultricies ornare, eros leo dictum ipsum, et bibendum lorem neque ac neque. Sed a justo ac elit dapibus ullamcorper. Aliquam quis ligula eget nibh pretium malesuada. Vivamus eu eros. Fusce facilisis leo a quam. Sed a lorem ut sapien tempor pretium. Suspendisse sed ipsum. Integer rhoncus tempus arcu. Duis nonummy ante ut lectus facilisis ultrices. Etiam id risus at lorem posuere suscipit. Sed ac quam ut mauris varius ultricies. Morbi bibendum, ligula dapibus dignissim dignissim, lectus massa porttitor lectus, vitae blandit orci magna vel wisi.[end dd]
15.
[dd begin]Pellentesque ac urna id urna bibendum euismod. Morbi vitae mauris a nibh ultrices pulvinar. Donec pellentesque. Etiam wisi. Vestibulum gravida scelerisque ipsum. Aliquam erat volutpat. Etiam congue gravida dui. Morbi lectus ante, pellentesque at, malesuada et, tristique in, libero. Proin sit amet urna. Quisque eget massa. Suspendisse et urna. Quisque urna metus, tristique at, cursus non, molestie ut, ante. Mauris nec wisi ut mauris vulputate vestibulum.[end dd]
16.
[dd begin]Nunc diam nunc, dapibus sed, tincidunt eget, iaculis fermentum, tortor. Nunc gravida tempor tortor. Vestibulum wisi eros, ornare id, aliquam et, porta eget, pede. Curabitur ornare. Etiam scelerisque bibendum dolor. In pede. Sed quam turpis, adipiscing non, dignissim sed, porttitor vestibulum, ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam eros. Pellentesque ac turpis tempus odio feugiat rutrum. Praesent consectetuer consequat wisi. Nam orci nisl, hendrerit vel, iaculis sed, consectetuer eu, dolor. Duis interdum dui nec augue. Praesent vulputate dolor venenatis metus. In convallis cursus felis. Proin eleifend tincidunt metus. Nullam orci. Nulla facilisi.[end dd]
17.
[dd begin]Morbi accumsan semper metus. Vivamus tempor aliquam tellus. Donec pulvinar eros sit amet mi. Nunc odio erat, rutrum vitae, congue ac, consectetuer vitae, nunc. Aliquam ut enim. Phasellus porttitor elit et lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam gravida laoreet metus. In hac habitasse platea dictumst. Donec mi eros, laoreet id, nonummy molestie, imperdiet nec, justo. Vivamus mattis urna at nibh. Nullam eget sem. Nulla eu pede.[end dd]
18a.
[dd begin]Nulla sollicitudin, felis a pretium ultrices, felis orci hendrerit odio, sit amet vestibulum sapien tortor vitae sapien. Fusce sed sapien. Quisque ligula purus, bibendum ut, sagittis vitae, dignissim eu, dolor. Ut bibendum. Cras fringilla. Donec placerat mauris consectetuer wisi. Aenean malesuada orci id purus. Proin semper, diam sit amet convallis lacinia, eros justo ultricies risus, nec rutrum neque mauris eget sem. Integer a arcu. Suspendisse leo sapien, rhoncus in, congue nec, pellentesque id, sapien. Aliquam enim turpis, porttitor et, euismod quis, varius ut, quam. Duis justo ligula, suscipit bibendum, viverra id, lobortis et, risus. Donec tempor bibendum turpis. Aliquam vitae purus. Phasellus in nibh. Phasellus sollicitudin posuere augue. Nullam vel purus.[end dd]
18b.
[dd begin]Mauris eget tellus sed dui vestibulum euismod. Proin pulvinar tellus ut lectus. Sed sem ligula, dapibus eget, nonummy a, ultricies non, purus. In in turpis. Nullam et lorem sit amet ante imperdiet aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sollicitudin diam nec mi. Suspendisse lacinia orci et quam. Nulla sed ipsum. Aenean risus.[end dd]
XXXIV.
[dd begin]Mauris a mauris ac eros ultricies viverra. Ut tempor quam in ipsum. Sed nec ligula eget justo euismod vulputate. Proin quis felis quis metus fringilla varius. Morbi sem. Sed a justo sit amet turpis gravida convallis. Pellentesque lobortis. Proin at wisi. Etiam fringilla, enim eu convallis ornare, tortor mauris consequat elit, eu convallis sapien ligula id ipsum. Duis fermentum dictum sapien. Ut vitae wisi. Vestibulum metus lectus, varius quis, tristique vitae, accumsan vel, velit. Maecenas tellus. Pellentesque in mi. Aenean convallis. Maecenas fringilla faucibus sem.[end dd]
21.c.1
[dd begin]Praesent vitae felis. In vitae odio. Vestibulum vitae magna eget purus aliquam interdum. Nulla eu eros eget sem elementum porta. Vivamus id mauris id leo tempus convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris adipiscing ipsum non mi. Praesent auctor tortor sed leo. Donec eleifend metus vel dolor malesuada dictum. Suspendisse interdum eros ac lectus. Suspendisse vehicula vestibulum arcu. Cras egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut enim ipsum, tempor vel, ultricies a, mollis ac, ante. Duis mollis dolor at wisi.[end dd]
22.
[dd begin]Cras leo lectus, dapibus vel, aliquet sit amet, porttitor vel, lectus. Sed sed sem. Etiam nonummy velit ac velit. Aenean in enim. Aenean a sapien. Sed viverra, nibh consequat ullamcorper rutrum, lectus orci lobortis magna, ac nonummy mauris mauris sed lectus. Proin sit amet wisi vel pede fermentum tempor. Suspendisse ornare sapien id tortor. Aenean enim nibh, ullamcorper accumsan, malesuada vel, porta at, turpis. Quisque sit amet risus. Sed ipsum massa, porta a, vestibulum vel, ornare sed, orci. Integer faucibus, orci condimentum mattis rhoncus, ante justo feugiat enim, vel ornare lectus ipsum sed elit. Vestibulum nec odio. Ut pharetra lacinia sapien. Duis eu diam id massa volutpat scelerisque. Aliquam erat volutpat. Ut tempus. Curabitur posuere, pede non nonummy elementum, elit risus commodo augue, vel porttitor tortor leo a est.[end dd]