PDA

Click to See Complete Forum and Search --> : independent UL?

Siddan
01-23-2005, 10:15 PM
hmm

I have tried and I have tried setting the margins of one ul list a bit wider.. but nothing happens. first now I have realized that my other UL is the priority.

ok, I have 3 different ULs so far with different margings, so how would I do so they are independent of eachother without having to insert a class into every LI tag on the entire site?... would be enough for UL only

it would be easy to set this in inbedded styles, but in external style I find it very difficult.


hehe itīs late and I am tired, hope I made some sense


better make an example anyways:

external stylesheet --
ul.style1, li {padding:10px}
ul.style2, li {padding:20px}
ul.style3, li {padding:0px}

Page 1 --
<ul class="style1">
<li> link1 </li>
<li> link2 </li>
<li> link3 </li>
</ul>

Page 2 --
<ul class="style2">
<li> home </li>
<li> start </li>
<li> end </li>
</ul>

Page 3 --
<ul class="style3">
<li> get </li>
<li> set </li>
<li> go </li>
</ul>
--------------------------------------

thatīs how I thought it would be,, but it isnīt, one style affects them all. and again... I really do not prefer setting a class for every LI :/
Daniel T
01-23-2005, 10:35 PM
Remove the commas from the CSS. The commas are used for a group of elements that have the same styles. Therefore, you are resetting the padding of ALL LI's in every line of your CSS. If you don't use a comma, it will only format the LI's within the UL.
Siddan
01-24-2005, 07:19 AM
hehe hum... I believe I have tried that but thanks for the verification. I just might have removed the coma on one line and not on the others..


iīll try
heavenly_blue
01-24-2005, 06:41 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>OMG! CSS Unordered Lists!!!</title>
<style type="text/css">
.ul1 li{padding:10px;}
.ul2 li{padding:20px;}
.ul3 li{padding:0;}
</style>
</head>
<body>
Halogens:
<ul class="ul1">
<li>Fluorine</li>
<li>Clorine</li>
<li>Bromine</li>
<li>Iodine</li>
</ul>
You don't want things like:
<ul class="ul2">
<li>Cancer</li>
<li>Serious injuries</li>
<li>Probation</li>
</ul>
Random words:
<ul class="ul3">
<li>commercial</li>
<li>definition</li>
<li>independant</li>
</ul>
</body>
</html>