...

View Full Version : CSS question



Li Gang
02-24-2011, 07:58 AM
Hi

I am new with html+CSS.

There is one line in my CSS file: li{list-style-type:none;}

What should I do if I want to use li{list-style-type:decimal;} in my html?

Many thanks in advance.

Li

Excavator
02-24-2011, 09:52 AM
Hello Li Gang,
Have you tried it yet? If you just change that none to decimal in your CSS you should see the change in your markup.

Li Gang
02-24-2011, 01:56 PM
Thanks for your response.

I mean I need both li{list-style-type:none;} and li{list-style-type:decimal;} in the same html.

VIPStephan
02-24-2011, 02:44 PM
Thanks for your response.

I mean I need both li{list-style-type:none;} and li{list-style-type:decimal;} in the same html.

You should be more specific in your CSS. I suppose you have an unordered (ul) and an ordered list (ol)? Then reflect that in your CSS so that the list style type of “none” only applies to unordered lists:


ul {list-style-type: none;}

teedoff
02-24-2011, 02:46 PM
You obviously cant do both in ONE lists. If you have two lists in your page, then you will have to specify which list gets the decimal and which list gets no list style.

You can either specify by targeting the list within a certain containing element, or give one list an id or class and target it that way.

Excavator
02-24-2011, 06:24 PM
Thanks for your response.

I mean I need both li{list-style-type:none;} and li{list-style-type:decimal;} in the same html.

By giving your ul an id you can be more specific about which CSS applies to which ul. See specificity here (http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/).

See this example that uses class names to be more specific -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
background: #FC6;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
h1 {
margin: 50px 0 0;
padding: 0 0 0 25px;
font-size: 1em;
}
.dot {list-style: disc;}
.number {list-style: decimal;}
.both {
width: 200px;
margin: 0 auto;
text-align: center;
}

</style>
</head>
<body>
<div id="container">
<h1>ul with disc</h1>
<ul class="dot">
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ul>
<h1>ul with decimal</h1>
<ul class="number">
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ul>
<h1 class="both">ul with both</h1>
<ul class="both">
<li class="dot">first</li>
<li class="number">second</li>
<li class="d0t">third</li>
<li class="number">fourth</li>
</ul>
<!--end container--></div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum