[thelist] Use CSS to control appearance of list items

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>