Jump to content

list styles in css


olking
 Share

Recommended Posts

I have an unordered list and am trying to apply markers to it.The code I am using is as follows:In the head:-ul.list{position:absolute;left:100px;width:100%;padding:0;margin:0;list-style-type:disc;font: 900 15px arial;color:#996600;}Then in the body:-<ul class="list"> <li> Road accidents</li><br> <li> Habitat destruction - urban development</li><br> <li> Dog and cat attacks - be responsible with your pets</li><br> <li> Disease - adverse weather conditions</li><br> <li> Flying into windows</li><br> <li> Poisons in the environment -many household substances are toxic to wildlife eg. fly spray, herbicides</li></ul>I get the list as I expected except there are no disc markers.I have tried it without the position absolute, but that is no good either.Can anyone help me with this?

help.htm

Link to comment
Share on other sites

I think you should apply the style to the List item -

li.list{position:absolute;left:100px;width:100%;padding:0;margin:0;list-style-type:disc;font: 900 15px arial;color:#996600;}

Then in the body:-

<ul><li class="list"> Road accidents</li><br><li class="list"> Habitat destruction - urban development</li><br><li class="list"> Dog and cat attacks - be responsible with your pets</li><br><li class="list"> Disease - adverse weather conditions</li><br><li class="list"> Flying into windows</li><br><li class="list"> Poisons in the environment -many household substances are toxic to wildlifeeg. fly spray, herbicides</li></ul>

Link to comment
Share on other sites

I think you should apply the style to the List item -
li.list{position:absolute;left:100px;width:100%;padding:0;margin:0;list-style-type:disc;font: 900 15px arial;color:#996600;}

Then in the body:-

<ul><li class="list"> Road accidents</li><br><li class="list"> Habitat destruction - urban development</li><br><li class="list"> Dog and cat attacks - be responsible with your pets</li><br><li class="list"> Disease - adverse weather conditions</li><br><li class="list"> Flying into windows</li><br><li class="list"> Poisons in the environment -many household substances are toxic to wildlifeeg. fly spray, herbicides</li></ul>

Thank you for your suggestion, but I have tried it and am sorry to say that it doesn't work
Link to comment
Share on other sites

Put all this inside a <DIV> and change its style through CSS!

Link to comment
Share on other sites

You just quoted me...does that mean it worked :-/

Link to comment
Share on other sites

did you mean like this :div.list{position:absolute;left:100px;width:100%;padding:0;margin:0;list-style-type:disc;font: 900 15px arial;color:#996600;}and in body:<div class="list"><ul><li> Road accidents</li><br><li> Habitat destruction - urban development</li><br><li> Dog and cat attacks - be responsible with your pets</li><br><li> Disease - adverse weather conditions</li><br><li> Flying into windows</li><br><li> Poisons in the environment -many household substances are toxic to wildlifeeg. fly spray, herbicides</li></ul></div>I tried that and still no luck.I am very much a newbie in css one very strange thing.I am writing in dreamweaver and the markers show up ok in the wysiwyg but when I view them in firefox or ie6 they dont show

Link to comment
Share on other sites

You needed to be more specific in your use of the styling and I reordered some stuff. The <a> styles are above the li styles now. I think maybe they were overriding the li styles.And I removed the <br />'s from the list. Use padding or margins to space them apart instead.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>North Queensland Wildlife Care Home Page</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">body{ background: url('images/logo.gif') no-repeat fixed 750px 80px;}p { font-family: arial; }li.menu{display:inline} a{float:left;width:11em;text-decoration:none;color:#996600;background-color:white;padding:0.2em 0.6em;border-right:1px solid white;}a:hover{background-color:whitetext-decoration:none;color:#333300;}ul.menu{float:left;width:100%;padding:0;margin:0;list-style-type:none;font: italic small-caps 900 15px arial}ul.list{position:absolute;left:100px;width:100%;padding:0;margin:0;list-style-type:disc;font:  900 15px arial;color:#996600;}</style></head><body><ul class="menu">   <li>	<div align="center"><a href="index.htm">Home</a></div>  </li>  <li>	<div align="center"><a href="help.htm">Help for animals</a></div>  </li>  <li>	<div align="center"><a href="contact.htm">Contact us</a></div>  </li>  <li>	<div align="center"><a href="links.htm">Other wildlife sites</a></div>  </li>  <li>	<div align="center"><a href="query.htm">Submit questions</a></div>  </li></ul><p> </p><p> </p><p> </p><p> <font size="4" color="#996600">Why do native animals come into care?</font></p><br><ul class="list">  <li> Road accidents</li>  <li> 	Habitat destruction - urban development</li>  <li> 	Dog and cat attacks - be responsible with your pets</li>  <li> 	Disease - adverse weather conditions</li>  <li> 	Flying into windows</li>  <li>  Poisons in the environment -many household substances are toxic to wildlife 	eg. fly spray, herbicides</li></ul></body></html>

Link to comment
Share on other sites

Precedence is determined by the Cascade (they call them Cascading Style Sheets for a reason) and the "weight" of a selector.It is a bit technical, but here is a link you should read a couple of times. It discusses how selectors can over-ride or be over-ridden by being "more specific" with your element selectors. Example, when does a class help or hinder a selection...http://www.w3.org/TR/CSS21/cascade.html#cascade

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...