Set bullet color?

	Home Register Search Help Login

Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Set bullet color?

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets >> Set bullet color?

Page: [1] 2 next > >>


DarlingBri Posts: 3123 From: Left of Centre, Cork, Ireland Status: offline	Set bullet color? - 4/18/2004 18:08:42 Hey... I'd like to set bullet colour on unordered lists, and while I know I can use an image to do that, I would prefer not to if possible. It just seems simple to me: the <li> bullet is by default black, and I want the exact same thing, except orange. How hard can it be? Except I can't find anywhere that says how to do it! Can anyone tell me how to add this to my style sheet? Thanks! _____________________________ --Bri Bartlet for President 2008 Get a taste of religion. Lick a witch.


c1sissy Posts: 5084 Joined: 7/20/2002 From: NJ Status: offline	RE: Set bullet color? - 4/18/2004 18:32:45 Hi Bri, you have to use an image as far as I know. I think that there is a thread in here somewhere that this was discussed a while back. I'll see if I can find it. But as far as I can remember, you have to use an image. Found it Here I hope that this helps you out. < Message edited by c1sissy -- 4/18/2004 18:36:44 > _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/ (in reply to DarlingBri)


d a v e Posts: 4147 Joined: 7/24/2002 From: England (but live in Finland now) Status: offline	RE: Set bullet color? - 4/19/2004 2:47:46 http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-type it's a bit weird how they explain it but it seems that the bullet colour is the same as the text colour and if you want it different then use an image. _____________________________ David Prescott Gekko web design (in reply to c1sissy)


DarlingBri Posts: 3123 From: Left of Centre, Cork, Ireland Status: offline	RE: Set bullet color? - 4/19/2004 3:47:17 Okie-dokie, thanks. That makes sense, it's just a bummer, as we used to say. (Does anyone under 30 say that anymore?) _____________________________ --Bri Bartlet for President 2008 Get a taste of religion. Lick a witch. (in reply to d a v e)


Giomanach Posts: 6115 Joined: 11/19/2003 From: England Status: offline	RE: Set bullet color? - 4/19/2004 4:18:20 Bugger but not bummer (oops just did lol) _____________________________ (in reply to DarlingBri)


DarlingBri Posts: 3123 From: Left of Centre, Cork, Ireland Status: offline	RE: Set bullet color? - 4/19/2004 4:48:08 OK, so I used graphics instead and now this is all messed up. Here's my css: ul { margin: 10pt 0 0 0; padding: 0; } li { margin: 10; list-style-image: url('images/bullet.gif'); list-style-position: inside; border: 0px none;; padding-left:0; padding-right:15pt; padding-top:0; padding-bottom:0 } In mozilla, they appear as normal. In IE, there is no space between the bullet and the text and it looks awful. Is there a way to correct for that? Cheers! _____________________________ --Bri Bartlet for President 2008 Get a taste of religion. Lick a witch. (in reply to Giomanach)


Giomanach Posts: 6115 Joined: 11/19/2003 From: England Status: offline	RE: Set bullet color? - 4/19/2004 4:53:59 to your li add: padding-left: 5px; _____________________________ (in reply to DarlingBri)


DarlingBri Posts: 3123 From: Left of Centre, Cork, Ireland Status: offline	RE: Set bullet color? - 4/19/2004 5:26:07 that just shoved everything over 5, it didn't put any padding between the bullet and the text :( _____________________________ --Bri Bartlet for President 2008 Get a taste of religion. Lick a witch. (in reply to Giomanach)


d a v e Posts: 4147 Joined: 7/24/2002 From: England (but live in Finland now) Status: offline	RE: Set bullet color? - 4/19/2004 5:28:25 one thing is that you have margin: 10; but 10 what bummers, cabbages? try pixels, ems,. percentages (btw use points for print and pixels or percentages or other web based unit for visual work) _____________________________ David Prescott Gekko web design (in reply to DarlingBri)


DarlingBri Posts: 3123 From: Left of Centre, Cork, Ireland Status: offline	RE: Set bullet color? - 4/19/2004 5:47:22 Thanks for that catch :) OK now I have: ul { margin: 10px 0 0 0; padding: 0; } li { margin: 10px; list-style-image: url('images/bullet.gif'); list-style-position: inside; border: 0px none; padding-left:5px; padding-right:15pt; padding-top:0; padding-bottom:0 And I STILL have no spaces! http://dev.bb4l.org.uk/default.asp?f_id=9 Lovely in mozilla, ugly in IE :( _____________________________ --Bri Bartlet for President 2008 Get a taste of religion. Lick a witch. (in reply to d a v e)


Giomanach Posts: 6115 Joined: 11/19/2003 From: England Status: offline	RE: Set bullet color? - 4/19/2004 5:51:38 If using an image, why not add a little transparency the right hand side of it? _____________________________ (in reply to DarlingBri)


d a v e Posts: 4147 Joined: 7/24/2002 From: England (but live in Finland now) Status: offline	RE: Set bullet color? - 4/19/2004 5:59:11 have you tried it without the list style position 'inside' ? or did you specifically want that? also you have border: 0px none; which should be border: 0; or border:0px; _____________________________ David Prescott Gekko web design (in reply to Giomanach)


jaybee Posts: 14176 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Set bullet color? - 4/19/2004 6:18:35 I did it by setting the list colour in the style sheet and using a span on the text. Not brilliant but it works. <li><span class="orangebold">creative</span></li> You can see it on my homepage < Message edited by jaybee -- 4/19/2004 11:25:47 > _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to d a v e)


c1sissy Posts: 5084 Joined: 7/20/2002 From: NJ Status: offline	RE: Set bullet color? - 4/19/2004 6:49:35 Bri, you might need to do a different style sheet for IE. There are so many things that IE looks at differently. I posted soemthing earlier this week in regards to different style sheet for IE, and it works. This way in Mozilla your page will stay as it is while you try to tweak the page in IE. I wish I knew more to help you out on this one. I have to be out most of the day today, if you dont' have an answer later on I'll do a search and see if I can find anything to help you out on this. I'm sure though that if Fiachra stops by, he might and most likely does know the answer to this one. <edit>ul { margin: 10px 0 0 0; padding: 0; } should be ul { margin: 10px 0px 0px 0px; padding: 0px; } Also, your order with your values should be top right bottom left. Not sure if this will help you or not. Right now, unless you know this already, and forgive me if you do, you have a top margin of 10 px. </edit> < Message edited by c1sissy -- 4/19/2004 7:33:33 > _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/ (in reply to jaybee)


Kitka Posts: 2515 Joined: 1/31/2002 From: Australia Status: offline	RE: Set bullet color? - 4/19/2004 7:57:49 quote: And I STILL have no spaces! Hello Bri, I think you might have the image in the wrong place. The following seems to work for me, but you'll probably need to adjust the left margin. ul { list-style-image: url('images/bullet.gif'); margin: 10px 0 0 0; padding: 0; } li { margin: 10px; list-style-position: inside; border: 0px none; padding-left:5px; padding-right:15pt; padding-top:0; padding-bottom:0 ; } Good luck. _____________________________ Kitka It is impossible to make anything foolproof because fools are so ingenious. (in reply to DarlingBri)


DarlingBri Posts: 3123 From: Left of Centre, Cork, Ireland Status: offline	RE: Set bullet color? - 4/19/2004 10:54:20 Arrgh :) OK, I appreciate all the help but I couldn't make anything work, so I switched tactics. I used this menthod: http://css.maxdesign.com.au/listamatic/vertical05.htm And glory be, it works very similarly across all browsers! _____________________________ --Bri Bartlet for President 2008 Get a taste of religion. Lick a witch. (in reply to Kitka)


c1sissy Posts: 5084 Joined: 7/20/2002 From: NJ Status: offline	RE: Set bullet color? - 4/19/2004 19:09:39 quote: ORIGINAL: DarlingBri Arrgh :) OK, I appreciate all the help but I couldn't make anything work, so I switched tactics. I used this menthod: http://css.maxdesign.com.au/listamatic/vertical05.htm And glory be, it works very similarly across all browsers! Good site Bri, I should have thought about this one as I visit this site often for learning. They have some good things through out the max design site. Well worth spending some time going through all of the things in there. Hi Kitka, how are you doing? Great to see you! < Message edited by c1sissy -- 4/19/2004 19:10:10 > _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/ (in reply to DarlingBri)


Kitka Posts: 2515 Joined: 1/31/2002 From: Australia Status: offline	RE: Set bullet color? - 4/20/2004 8:16:47 quote: Hi Kitka, how are you doing? Great to see you! Many thanks for the greeting Deb! Great to see you too. I'm fine I guess, just terminally busy I don't get to stop by here anywhere near as much as I used to, but I guess life is like that, nothing stays the same. Hope all is well with you, and I'm praying that Mike gets home safely. _____________________________ Kitka It is impossible to make anything foolproof because fools are so ingenious. (in reply to c1sissy)


c1sissy Posts: 5084 Joined: 7/20/2002 From: NJ Status: offline	RE: Set bullet color? - 4/20/2004 8:40:15 quote: Hope all is well with you, and I'm praying that Mike gets home safely. All is grand here. And thank you very much for the prayers for Mike. I know that all the prayers going upwards for him and his troops are working. I'll be so happy when he is home. Now we just need to pray that he is here for his sisters wedding In January. They changed their leave time. It was the begining of January, but now it is in december sometime. _____________________________ Deb-aka-c4Ksissy high panjandurum and alpha female of the silverback tribe As decreed by Jesper 5-24-2003. The only stupid question is... the one that is never asked!! http://directory.css-styling.com http://fmsforum.com http://positioniseverything.net/ http://www.tanfa.co.uk/ (in reply to Kitka)


gorilla Posts: 2974 From: Denmark Status: offline	RE: Set bullet color? - 4/20/2004 10:09:25 If you want you can use an • as a leader character and then offset the text as a hanging indent type thing. Its a bit crude and you have to use spans but it does work. _____________________________ Mh�ircaish Signature self-censored to protect the sensibilities of the thin-skinned . May we never confuse honest dissent with disloyal subversion. � Dwight D. Eisenhower (in reply to c1sissy)


dmwhipp Posts: 1 Joined: 5/16/2004 Status: offline	RE: Set bullet color? - 5/16/2004 2:12:42 HI. I came across this thread while trying to solve the same problem for a site I'm creating. I found a quick and easy CSS solution. I've only tested it in IE and Netscape, but it's working perfectly in both. Here's the site where I found the solution: http://www.sens.buffalo.edu/assistance/advwebpage/bullets.html and here's where I have it implemented: http://www.dwwebdesigns.com/flcompact/flcompact4.html Hope this helps. Deborah (in reply to DarlingBri)


Donkey Posts: 3895 Joined: 11/13/2001 From: Blackfield United Kingdom Status: offline	RE: Set bullet color? - 5/16/2004 7:12:39 That's exactly the same solution posted above by jaybee but using <div> instead of <span> BTW welcome to the forum. < Message edited by Donkey -- 5/16/2004 12:13:28 > _____________________________ I have a higher and grander standard of principle than George Washington. He could not lie; I can, but I won't. Samuel Clemens (in reply to dmwhipp)


d a v e Posts: 4147 Joined: 7/24/2002 From: England (but live in Finland now) Status: offline	RE: Set bullet color? - 5/16/2004 7:25:31 quote: I'd like to set bullet colour on unordered lists, and while I know I can use an image to do that, I would prefer not to if possible. it all seems a lot of trouble to go to when css has a mechanism for setting bullet colour via image use (with your bullet of choice, should images be turned off, i.e. disc, etc). have you got a good enough reason not to use images that warrants all these work-arounds?! _____________________________ David Prescott Gekko web design (in reply to Donkey)

Donkey

Posts: 3895
Joined: 11/13/2001
From: Blackfield United Kingdom
Status: offline

RE: Set bullet color? - 7/8/2004 20:28:57

I've just worked out a very easy way to do this using css and the first-line property. The first line property defines the text colour. Obviously you can't have two line bullet points, but then if you do they are too long anyway.

This gives you a red bullet and black lettering.
Write this in the css

ul.red { 
position:relative;
list-style-position: outside;
color: #E5002B; 
text-indent: -2px; 
list-style-type: square; 
text-align: left;
left:-5%;
}
ul.red li{
font-family: Arial, Helvetica, Sans-serif;
font-size: 1em;
text-align:left;
}
ul.red li:first-line{color:#000;}

And the html:

<ul class="red">
 <li>A list item</li>
 <li>Another list item</li>
 <li>More of the same</li>
 <li>Etc etc etc</li>
 <li>Ad nauseum</li>
   </ul>

_____________________________

I have a higher and grander standard of principle than George Washington. He could not lie; I can, but I won't.
Samuel Clemens

(in reply to d a v e)


d a v e Posts: 4147 Joined: 7/24/2002 From: England (but live in Finland now) Status: offline	RE: Set bullet color? - 7/9/2004 2:00:32 interesting though this is , i'm so sorry but i don't understand why you can't just use an an image instead of these workarounds. _____________________________ David Prescott Gekko web design (in reply to Donkey)


Donkey Posts: 3895 Joined: 11/13/2001 From: Blackfield United Kingdom Status: offline	RE: Set bullet color? - 7/9/2004 2:55:35 It just seems easier and simpler code to me that's all. It's interesting that you say this is a workaround, as a non-professional I see the use of an image as the workaround, because it involves more work. I can see a reason for using an image if you want to have a specific bullet design (say part of a logo), but if you just want a square or circle then surely css is the easiest way. _____________________________ I have a higher and grander standard of principle than George Washington. He could not lie; I can, but I won't. Samuel Clemens (in reply to d a v e)


d a v e Posts: 4147 Joined: 7/24/2002 From: England (but live in Finland now) Status: offline	RE: Set bullet color? - 7/9/2004 3:35:11 well i'm just going on the recommended way according to the spec, but maybe i'm just being too narrow-minded about this?! it would have been so much easier if they had specified bullet colour in the css spec! _____________________________ David Prescott Gekko web design (in reply to Donkey)


Donkey Posts: 3895 Joined: 11/13/2001 From: Blackfield United Kingdom Status: offline	RE: Set bullet color? - 7/9/2004 4:46:42 quote: it would have been so much easier if they had specified bullet colour in the css spec! I agree. My way does validate though. _____________________________ I have a higher and grander standard of principle than George Washington. He could not lie; I can, but I won't. Samuel Clemens (in reply to d a v e)


jaybee Posts: 14176 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Set bullet color? - 7/9/2004 5:32:17 So does mine. _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to Donkey)


Donkey Posts: 3895 Joined: 11/13/2001 From: Blackfield United Kingdom Status: offline	RE: Set bullet color? - 7/9/2004 6:51:30 quote: So does mine. I know, I was using your way before I "saw the light" so to speak, and it works perfectly, but the way I described above involves less effort and being fairly lazy by nature that's the clincher with me. Of course your way is best if the bullet points run into 2 or more lines each, but bullet points are meant to be on one line and short and to the point anyway. _____________________________ I have a higher and grander standard of principle than George Washington. He could not lie; I can, but I won't. Samuel Clemens (in reply to jaybee)

Page: [1] 2 next > >>

All Forums >> Web Development >> Cascading Style Sheets >> Set bullet color?

Page: [1] 2 next > >>

Jump to: 1

New Messages	No New Messages
Hot Topic w/ New Messages	Hot Topic w/o New Messages
Locked w/ New Messages	Locked w/o New Messages

Post New Thread

Reply to Message

Post New Poll

Submit Vote

Delete My Own Post

Delete My Own Thread

Rate Posts