Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > html css > answers

Centered bullet in .css

Newbie
  
Join Date: Feb 2007
Posts: 26
#1: Jun 25 '08
Hi All,

I inserted this attribute in my .css file.
I wish to know how the centre the text after each bullet.
I also would like to make sure that there is no problem with other browsers.

Expand|Select|Wrap|Line Numbers
  1. .links ul li {
  2.     list-style-image: url(r_square.gif);
  3.         }
Thanks for your advice!

L

Stang02GT's Avatar
Moderator
  
Join Date: Jun 2007
Location: USA
Posts: 1,152
#2: Jun 25 '08

re: Centered bullet in .css

Quote:

Originally Posted by Louise06

Hi All,

I inserted this attribute in my .css file.
I wish to know how the centre the text after each bullet.
I also would like to make sure that there is no problem with other browsers.

.links ul li {
list-style-image: url(r_square.gif);
}

Thanks for your advice!

L

Use this.

[HTML]align="center"[/HTML]
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#3: Jun 25 '08

re: Centered bullet in .css

Rather than use an align attribute for presentation directly in the HTML, use text-align in the CSS:
Expand|Select|Wrap|Line Numbers
  1. text-align: center;
Hope that helps.
Newbie
  
Join Date: Feb 2007
Posts: 26
#4: Jun 30 '08

re: Centered bullet in .css

Hi
Thanks for your reply but it works with FireFox but not for IE 6.0.

Also you suggested to have a text-align = center: where can I add this as I have a lot of text styles in the .css?
I can also do it in HTML directly. Please advice.

Thanks

L.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#5: Jun 30 '08

re: Centered bullet in .css

Does this not work in IE6?
Expand|Select|Wrap|Line Numbers
  1. .links ul li {
  2.     list-style-image: url(r_square.gif);
  3.     text-align:center;
  4. }
If not, post the corresponding HTML.
Newbie
  
Join Date: Feb 2007
Posts: 26
#6: Jun 30 '08

re: Centered bullet in .css

Sorry, I need to clarify.

I would like the bullet (in this case a customed square) to be aligned with the text. The text is usually in aligned in the left.

As an example, you can see the "
REPLY GUIDELINES" used bulltes on the right of this page.

Thanks

Louise
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#7: Jun 30 '08

re: Centered bullet in .css

Quote:

Originally Posted by Louise06

As an example, you can see the "
REPLY GUIDELINES" used bulltes on the right of this page.

Those are left-aligned. The guidelines ul has the following CSS properties:
Expand|Select|Wrap|Line Numbers
  1. .guidelines {
  2.     list-style-image:none;
  3.     list-style-position:outside;
  4.     list-style-type:square;
  5. }
and the li:
Expand|Select|Wrap|Line Numbers
  1. .guidelines li {
  2.     font-size:9pt;
  3.     margin:0px;
  4.     padding:3px;
  5. }
Newbie
  
Join Date: Feb 2007
Posts: 26
#8: Jul 2 '08

re: Centered bullet in .css

Thanks for the guidelines, but my text is centered instead of being left.

Maybe the bullet image is wrong (.gif), red square (4 by 4 pixel).

Thanks

L
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#9: Jul 2 '08

re: Centered bullet in .css

Have you got a test page that you can show? If not, attach the image here.
Newbie
  
Join Date: Feb 2007
Posts: 26
#10: Jul 4 '08

re: Centered bullet in .css

Quote:

Originally Posted by acoder

Have you got a test page that you can show? If not, attach the image here.

Thanks

Here is a similar script to Guidelines:

Expand|Select|Wrap|Line Numbers
  1. .links ul {
  2.     list-style-image:url(/images/uploaded/Image/Intranet%20pics%20for%20CH/b_d_square.gif);
  3.     list-style-position:outside;
  4.  
  5. .links li {
  6.     font-size:9pt;
  7.     margin:0px;
  8.     padding:3px;
  9. }
  10.  
[IMG[/img] Idon't know how to attach an image.

Louise
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#11: Jul 4 '08

re: Centered bullet in .css

You forgot to close the ul CSS rule.

To attach an image, make a post, then edit it, or use the img tag if you've got the image online.

PS. please use [code] tags when posting code. Thanks!
Newbie
  
Join Date: Feb 2007
Posts: 26
#12: Jul 4 '08

re: Centered bullet in .css

Quote:

Originally Posted by acoder

You forgot to close the ul CSS rule.

To attach an image, make a post, then edit it, or use the img tag if you've got the image online.

PS. please use code tags when posting code. Thanks!

Thanks sure.

It still does not work, the bullets are higher than the text.
Expand|Select|Wrap|Line Numbers
  1.  
  2. .links ul {
  3.     list-style-image:url(/images/uploaded/Image/Intranet%20pics%20for%20CH/b_d_square.gif);
  4.     list-style-position:outside;
  5.  }
  6. .links li {
  7.     font-size: 9pt;
  8.     margin:0px;
  9.     padding:3px;
  10. }
  11.  
Newbie
  
Join Date: Feb 2007
Posts: 26
#13: Jul 4 '08

re: Centered bullet in .css

Sorry I forgot to ask, I am quite happy with the
list-style-type:square; instead. Could I change the color?

Thanks Louise
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#14: Jul 4 '08

re: Centered bullet in .css

Yes, just add
Expand|Select|Wrap|Line Numbers
  1. color:whatevercolor;
to the style rule.
Newbie
  
Join Date: Feb 2007
Posts: 26
#15: Jul 8 '08

re: Centered bullet in .css

Thank you!
This time it works

Louise
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#16: Jul 8 '08

re: Centered bullet in .css

You're welcome. Glad it's working :)
Reply

« previous question | next question »

Similar HTML / CSS bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,439 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved