6 replies to this topic

[moldboy]

I have a little handbook for CSS by O'reilly and can't seem to find in it how to remove the bullets from an <li> that is inside a <ul>. Any help?

[Saint_Michael]

This is how you do it.

CSS CODE
#navcontainer ul { list-style-type: none; }


HTML CODE
<div id="navcontainer">
<ul>
<li><a href="#">Milk</a>
   <ul>
   <li><a href="#">Goat</a></li>
   <li><a href="#">Cow</a></li>
   </ul>
</li>
<li><a href="#">Eggs</a>
   <ul>
   <li><a href="#">Free-range</a></li>
   <li><a href="#">Other</a></li>
   </ul>
</li>
<li><a href="#">Cheese</a>
   <ul>
   <li><a href="#">Smelly</a></li>
   <li><a href="#">Extra smelly</a></li>
   </ul>
</li>
</ul>
</div> 

it surprised me when i googled it and it came up. but that should help you out.

Edited by Saint_Michael, 18 November 2005 - 04:07 AM.

[jlhaslip]

Google? for that?
Use this next time. It will be handier, because it explains the css and html all in one spot. Look on the left hand side for CSS2 Reference. Lots of info at the w3schools.

Notice from jlhaslip:

edit to correct link

Edited by jlhaslip, 18 November 2005 - 04:46 AM.

[snlildude87]

Yep. The key is the keyword "none" in list-style-type. This is also how CSS rollover menus are created.

[moldboy]

Thanks that did do the trick,

Quote

This is also how CSS rollover menus are created.

I was aware of this already but I am wondering if you have a particular site in mind that would show how?

[Lozbo]

I have a site under development where you can see this applied.

http://www.cucea.udg.mx/pmic/

If you have firefox and the webdeveloper tools extension installed, it will be easier and faster to locate the css, which is attached to the documents by a style which @imports the main style. _Im currently working (hehe not true but planning to work in) the other media styles.

The shorthand for style is like this:

list-style-type
list-style-position
list-style-image

for example

#liststyle ul {list-style: none inside url(bullet.gif)}

Greetings...

-10730