How do I style multiple lists ???

I have one list style that I use for 6 different divs on my homepage. Right now the list is only named ul li etc in the style sheet.

I know I have to create a class for that list but each time I try the whole thing breaks. Any help or points in the right direction would be appreciated.

Here is my html

<div style="width:138px; float:left;">
<ul id="border">
<li id="email"><a title="Travel Insurance" href="#">Travel Insurance</a></li>
<li id="email"><a title="Home Insurance" href="#">Home Insurance</a></li>
<li id="email"><a title="Auto Insurance" href="#">Auto Insurance</a></li>
<li id="email"><a title="Life Insurance" href="#">Life Insurance</a></li>
</ul>
</div>

Code (markup):

and css

ul {
margin: 0;
padding-left: 10px;
padding-right: 10px;
list-style: none;
float:left;
}

ul li {
margin: 2px 0 6px 0;
padding-left: 10px;
font:13px Arial, Helvetica, sans-serif ;
font-weight: bold;
line-height: 15px; 
background-repeat: no-repeat;
background-position: 0 50%;
}

ul li a {
padding-left: 0px;
text-decoration:none;
color:#000000; 
}
  
ul li a:hover {
text-decoration: underline;
}
	
#email { 
background-image: url(blue-bullet.gif) ;
}

#border {
border-right: 1px dotted #CAB851;
}

Code (markup):

 

Well for part of it, you're over-writing your elements over and over again.

If you define ul { margin-left: 0; } and then further down define ul {margin-left: 5px; } you might as well not have had the first margin-left there at all.

 

Thanks, i know the code is not the cleanest, its all a learning process.

Any comments or help on how to add a unique class to this list?

LR

 

Well first of all, if you want the same style to work on -all- lists in a particular section, but not all lists site wide, you need to use class="name" not id="name".

Then, you create a class attached to that name, rather than a generic one. There are two ways to do this.

If you have all of your lists inside of a div, you can name the div "spiffy" and then you can assign stiles to unordered lists descending from that div as follows.

<div class="spiffy"></div>

Code (markup):

.spiffy ul { insert style here }

Code (markup):

Or you can assign each ul to a class, and denote the class that way, as follows.

<ul class="buddy"></ul>
<ul class="buddy"></ul>

Code (markup):

ul.buddy { insert style here }

Code (markup):

 

Thanks for the help. Green added.

 

^_^ Glad I could be of help. And thanks for the greenie, but it unfortunately looks like you're still a bit to new for your reputation modifications to take effect. You should be able to affect people's Rep at about the same time you are allowed to create a signature.