Centered bullet in .css
Question posted by: Louise06
(Newbie)
on
June 25th, 2008 07:56 AM
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.
Code: ( text )
.links ul li { list-style-image: url(r_square.gif); }
Thanks for your advice!
L
Last edited by eWish : June 27th, 2008 at 12:30 AM.
Reason: Added Code Tags
Would you like to answer this question?
Sign up for a free account, or Login (if you're already a member).
|
|
June 25th, 2008 01:00 PM
# 2
|
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.
Code: ( text )
|
|
June 25th, 2008 02:08 PM
# 3
|
Re: Centered bullet in .css
Rather than use an align attribute for presentation directly in the HTML, use text-align in the CSS:
Code: ( text )
Hope that helps.
|
|
June 30th, 2008 11:30 AM
# 4
|
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.
|
|
|
June 30th, 2008 02:45 PM
# 5
|
Re: Centered bullet in .css
Does this not work in IE6?
Code: ( text )
.links ul li { list-style-image: url(r_square.gif); text-align:center; }
If not, post the corresponding HTML.
|
|
|
June 30th, 2008 04:00 PM
# 6
|
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
|
|
|
June 30th, 2008 05:55 PM
# 7
|
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:
Code: ( text )
.guidelines { list-style-image:none; list-style-position:outside; list-style-type:square; }
and the li:
Code: ( text )
.guidelines li { font-size:9pt; margin:0px; padding:3px; }
|
|
|
July 2nd, 2008 09:31 AM
# 8
|
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
|
|
|
July 2nd, 2008 10:14 AM
# 9
|
Re: Centered bullet in .css
Have you got a test page that you can show? If not, attach the image here.
|
|
|
July 4th, 2008 09:24 AM
# 10
|
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:
Code: ( text )
.links ul { list-style-image:url(/images/uploaded/Image/Intranet%20pics%20for%20CH/b_d_square.gif); list-style-position:outside; .links li { font-size:9pt; margin:0px; padding:3px; }
[IMG[/IMG] Idon't know how to attach an image.
Louise
Last edited by acoder : July 4th, 2008 at 10:12 AM.
Reason: Added [code] tags
|
|
|
July 4th, 2008 10:16 AM
# 11
|
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!
|
|
|
July 4th, 2008 01:37 PM
# 12
|
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.
Code: ( text )
.links ul { list-style-image:url(/images/uploaded/Image/Intranet%20pics%20for%20CH/b_d_square.gif); list-style-position:outside; } .links li { font-size: 9pt; margin:0px; padding:3px; }
|
|
|
July 4th, 2008 01:39 PM
# 13
|
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
|
|
|
July 4th, 2008 03:02 PM
# 14
|
Re: Centered bullet in .css
Yes, just add
Code: ( text )
to the style rule.
|
|
|
July 8th, 2008 03:00 PM
# 15
|
Re: Centered bullet in .css
Thank you!
This time it works
Louise
|
|
|
July 8th, 2008 03:33 PM
# 16
|
Re: Centered bullet in .css
You're welcome. Glad it's working :)
Not the answer you were looking for? Post your question . . .
183,909 Experts ready to help you find a solution.
Sign up for a free account, or Login (if you're already a member).
|
|
|
Latest Articles: Read & Comment
Top HTML / CSS Forum Contributors
|
