CSS list style - remove bullets

HTML & CSS
1

Hi folks,

I’d like a bullet applied to the majority of my UL lists.

For lists of links to .pdf or .doc documents, I’d like to have a background image which I currently do using this css:

	
background: url(images/pdf.png) no-repeat left center;
  	padding: 40px 0 40px 88px;
	line-height:60px;

Can anyone please tell me the best way to setup my stylesheet?

Is there a way to do this other than mannually applying lots of classes or selectors to an element. As there are lots of them in my site.

Any help much appreciated.

Thankyou

2

If the entire list is of this kind of link, then you only need a class on the ul to enable you to target the links. If the majority of your ul lists will share one style, you could set that style as the default for ul, and then just add classes to over-ride the styling on the few lists that are different.

3

If your going to have a bunch of different ones, classes are pretty much your best choice… though if you have a LOT of them, it might help to automate them with a server side language like ASP or PHP so the class is added to them automatically for you instead of manually setting it in the PHP.

Also, if there’s one type that’s more common than others, that type could go without a class, then only apply classes to the ones that are different.

If there’s LOTS of types each getting their own icon (doc, xls, pdf, gif, png, etc) it may also be useful to put in a sandbag span in the markup for the image to be applied to instead of putting it on the LI (or anchor)… then you can make this element a fixed size and use the incorrectly named method of ‘CSS Sprites’ to use a single image file for all the different images. While this ends up more markup and more CSS, it can turn many file handshakes into one, resulting in a faster/smoother loading page.

Do you have an example page we can look at or sample markup of what you’re trying to do? Snippets are cute, but really don’t give us the whole picture of what you are trying to do. We could probably help you dial it in better if we could see an example of your content, markup and images being applied.

4

The key here , as with any CSS styling issue is PATTERN RECOGNITION. :slight_smile:

Is there a REASON you are styling SOME but not all? Does that reason cause it pattern ( there should be a reason, btw./. otherwise it just simply not good anything… let alone coding). as TB said if it some lists… you can give a class to the UL… or better yest is there a reason why THAT UL is styled differently than the others? Then you can target it that way…

Some examples:

Reason: The first UL but not any other ul within the class .topics
.topics ul li { your bullets styling;}
.topics ul~ul li { reset bullets styling;}

Reason: ULs that come after a H3 within the class .segment
.segment h3+ul li { your bullets styling;}

Reason: UL that is RIGHT after another UL the class .example
.example ul+ul li { your bullets styling;}

And so forth. If you are just styling willy-nilly… then there really is no larger “style” or pattern… and am afraid the only way to target those is to manually add classes.

5

Thanks for all the great replies.