Forum Moderators: not2easy

Message Too Old, No Replies

How to change the color of bullets on a horizontal navigation bar

My navigation text is white, but I want the bullets to be yellow...

         

Typester

5:37 am on Jun 4, 2003 (gmt 0)

10+ Year Member



Hello all,

I'm still quite new to CSS but I'm getting the hang of it after reading Nick W's great tutorials.

So, my nav bar looks like this:
home . contact . about . specials . news

The text is white on a dark blue background and I want to make the bullets yellow. Right now they are white. How would I zero in on just the bullets for that color?

Sorry for such a newbie question but, well, I am a newbie at this!

Thanks for any help!

Typester

outrun

7:10 am on Jun 4, 2003 (gmt 0)

10+ Year Member



The easiest way is to make a small yellow gif I guess and define it CSS im sure there are posts in here somewhere but I cant find them, put this in your css declarations

ul { list-style-image: url(youryellowimage.gif) }

regards,
Mark

Nick_W

7:20 am on Jun 4, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well, your navbar looks somthing like this right?


<div id="navbar">
<a href="#">Link1</a> . <a href="#">Link2 .
<a href="#">Link3
</div>

So, I'd style it something like this:


#navbar {
color: yellow;
}
#navbar a {
color: blue;
}

That's kind of simplified but it should demo the point well enough. Is that what you mean?

It's all about selection. The first rule selects everything contained in the #navbar div. The second specifically targets the links, and because it's a more specific rule will override the first for just those links.

Nick

Typester

1:56 pm on Jun 4, 2003 (gmt 0)

10+ Year Member



Exactly! So simple but it works. I'll get this CSS stuff eventually...

Thanks for the quick responses!