[thelist] Use CSS to control appearance of list items
Jorah Lavin
madstone at madstone.net
Thu Apr 12 09:46:07 CDT 2001
At 10:26 AM 04/12/01, djc at members.evolt.org wrote:
>For more control on your bullets or list elements ,ever consider
>using a table and placing you <li> tag in seperate cells?
<tip type="CSS control of LIST items">
Don't mangle your HTML by putting individual LI tags in separate cells in
an attempt to control the look of a list. Use CSS instead:
===========================
<html>
<head>
<title>Sample List Showing Control of Spacing Using CSS</title>
<style type="text/css">
<!--
LI
{color: #000000;
font-family: Verdana, Helvetica, Arial, sans-serif;
padding-bottom: 9px}
.tight
{color: #000000;
font-family: Verdana, Helvetica, Arial, sans-serif;
padding-bottom: 1px}
-->
</style>
</head>
<body>
<h1>This is a sample of controlling the spacing of list items using CSS</h1>
<p>First, here is a list with lots of room between items...</p>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li></ul>
<p>And here is one with less room between items:</p>
<ul>
<li class="tight">One</li>
<li class="tight">Two</li>
<li class="tight">Three</li>
<li class="tight">Four</li></ul>
</body>
</html>
===========================
</tip>
More information about the thelist
mailing list