Menu
I have a navigation menu, footer, and a slideshow which use listed style to list links and images. I have the css list-style:none; set to hide the bullets next to the links and images in the nav and footer but I want to show the bullets for list normal text.
How can I do this?
886
Adding the "list-style: none" CSS class to the unordered list (<ul>) or ordered list (<ol>) tag removes any bullet or number.
For this we use the CSS list-style-type Property. It specifies the appearance of the list item marker (such as a disc, character, or custom counter style) if 'list-style-image' has the value 'none'. IF we set the none value it will not create the markers or the bullets for the lists.
The removal of the list bullets is not a complex task using CSS. It can be easily done by setting the CSS list-style or list-style-type property to none. The list-style-type CSS property is used to set the marker (like a disc, character, or the custom counter style) of a list item element.
It is possible to remove bullets from ul lists by setting the CSS list-style-type property to none . As a result, the bullets disappear from the list.
The example bellow explains how to remove bullets using a css style class. You can use , similar to css class, by identifier (#id), by parent tag, etc. The same way you can use to define a css to remove bullets from the page footer.
I've used this site as a starting point.
<html> <head> <style type="text/css"> div.ui-menu li { list-style:none; background-image:none; background-repeat:none; background-position:0; } ul { list-style-type:none; padding:0px; margin:0px; } li { background-image:url(sqpurple.gif); background-repeat:no-repeat; background-position:0px 5px; padding-left:14px; } </style> </head> <body> <div class="ui-menu"> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </div> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
