Welcome to WebmasterWorld Guest from 174.129.151.95

Forum Moderators: not2easy

Message Too Old, No Replies

list-style-type:circle for <li> elements?

   
9:19 pm on Mar 13, 2008 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Hello,

I often see those menus where seemingly the list-style-circle (or a small arrow) is used for a menu (for a:hover and a:active - though I'm not sure if these are used).

Unfortunately the list-style-type:circle command(?) can only be used for <ul>, <ol> and display:list.

Is it possible to create such an effect with simple CSS or is java script or another language needed for that?

thanks!

10:01 pm on Mar 13, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Adding a background image on hover is simple:


#menu a {padding-left: 10px}
/*or however many you need to fit the image later on*/
#menu a:hover {background: url(bullet.gif) no-repeat left center}

You can also reposition an already existing background image etc.

10:19 pm on Mar 13, 2008 (gmt 0)

5+ Year Member



Does this do what you had in mind?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv = 'Content-Type' content = 'text/html; charset = UTF-8'>
<style>
*.withDot:hover:before{content:attr(dot)}
</style>
</head><body>
<a href='#' class='withDot' dot='&#164;'>Menu Item 1</a>
</body></html>

edit: Be sure you specify UTF-8 or the character won't be right.
more-edit: Try changing the dot attribute to '&#183;'. That really is a dot. See the various unicode charts for other characters that will work.

[edited by: MarkFilipak at 10:33 pm (utc) on Mar. 13, 2008]

12:21 am on Mar 14, 2008 (gmt 0)

5+ Year Member



The following has a nice effect.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv = 'Content-Type' content = 'text/html; charset = UTF-8'>
<style>
*.withDingbat:before{content:attr(dingbat);color:white}
*.withDingbat:hover:before{content:attr(dingbat);color:black}
</style>
</head><body>
<a href='#' class='withDingbat' dingbat='&#149;&nbsp;'>Go Here</a><br />
<a href='#' class='withDingbat' dingbat='&#149;&nbsp;'>Go There</a><br />
<a href='#' class='withDingbat' dingbat='&#149;&nbsp;'>Go Somewhere Else</a>
</body></html>
10:30 am on Mar 14, 2008 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



edit: Be sure you specify UTF-8 or the character won't be right.

Just as an aside... If you specify the numeric character reference (ie. "&#164;") then you don't need to save as/specify a UTF-8 character encoding. If, however, you want to type the character directly into the document then may be. But these particular characters (&#164; &#183; and &#149; - '&#164;', '&#183;' and '&#8226;') are part of the ISO-8859-1 (and US-ASCII) standard so I don't think it matters in this case either way. (?)

4:37 pm on Mar 14, 2008 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



EDIT: The last three numeric char refs above were the actual characters when I first posted and they did seem OK at first!? However, I notice they have since been 'parsed' into numeric char refs!?
8:07 pm on Mar 14, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> 
<head>
<meta http-equiv = 'Content-Type' content = 'text/html; charset = UTF-8'>
<style>
*.withDingbat:before{content:attr(dingbat);color:white}
*.withDingbat:hover:before{content:attr(dingbat);color:black}
</style>
</head><body>
<a href='#' class='withDingbat' dingbat='&#149;&nbsp;'>Go Here</a><br />
<a href='#' class='withDingbat' dingbat='&#149;&nbsp;'>Go There</a><br />
<a href='#' class='withDingbat' dingbat='&#149;&nbsp;'>Go Somewhere Else</a>
</body></html>

I'm not even going to try to imagine what IE6 doesn't get in this one,
but with a strict dtd, I strongly doubt this will come close to validate.

12:29 am on Mar 15, 2008 (gmt 0)

5+ Year Member



> what IE6 doesn't get...

You're right swa66. IE6 doesn't show this effect. Guess I got carried away, eh? I'll do better next time.

7:37 pm on Mar 15, 2008 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



thanks guys! I'll try the one using a background image, if that works it should do the trick really easily for me (and shouldn't cause any problems in IE6 for which I'd have to find a hack, etc.)..or is there any disadvantage associated with using a background image as opposed to using MarkFilipak's way?
9:18 pm on Mar 15, 2008 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



...or is there any disadvantage associated with using a background image...

It probably won't print. But if it's for a menu you probably don't want/need the menu to print anyway? Or supply a print-only stylesheet that includes a list-style-type (if you are indeed using a list)...?

2:17 am on Mar 16, 2008 (gmt 0)

5+ Year Member



penders wrote:
> I notice they have since been 'parsed' into numeric char refs!?
Perhaps because they are beyond &#127, eh? Hence, the need to specify UTF-8.
2:38 am on Mar 16, 2008 (gmt 0)

5+ Year Member



Here's a version that is x-browser. It doesn't use an image (but it is ugly!).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta http-equiv = 'Content-Type' content = 'text/html; charset = UTF-8'>
<style>
*.withDingbat{color:white}
*.withDingbat:hover{color:black}
*.withDingbat span{color:black}
</style>
</head><body>
<a href='#' class='withDingbat'>&#149;&nbsp;<span>Go Here</span></a><br />
<a href='#' class='withDingbat'>&#149;&nbsp;<span>Go There</span></a><br />
<a href='#' class='withDingbat'>&#149;&nbsp;<span>Go Somewhere Else</span></a>
</body></html>

[edited by: MarkFilipak at 2:49 am (utc) on Mar. 16, 2008]

9:01 pm on Mar 16, 2008 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



penders wrote:
> I notice they have since been 'parsed' into numeric char refs!?
Perhaps because they are beyond &#127, eh? Hence, the need to specify UTF-8.

I think the webmasterworld forum software simply converts any 'slightly out of range' characters into numeric character references. Let's give this a try... I will now type your 'dot' (as used in your first example above) by keying Alt+0164:

It appears as the actual character as I type this, like a little pointy square. The character encoding of this page is "Western (ISO-8859-1)".

EDIT: Immediately after submitting the post, the little character is still displaying as intended.

10:12 pm on Mar 16, 2008 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Over an hour later and the little pointy square is still there in my previous post (it hasn't yet been converted into a numeric character reference).
11:22 pm on Mar 16, 2008 (gmt 0)

5+ Year Member



> Over an hour later and the little pointy square is still there

Well, you just haven't given it enough time! (ROFL)

OK, I admit that, for the first 256 chars, UTF-8 is superfluous. But how about beyond that? Is that covered by UTF-8 or do we have to go to UTF-16? Seriously, I don't know.

12:56 pm on Mar 17, 2008 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



OK, I admit that, for the first 256 chars, UTF-8 is superfluous. But how about beyond that? Is that covered by UTF-8 or do we have to go to UTF-16? Seriously, I don't know.

As I understand it, UTF-8 and UTF-16 are just two different ways of encoding the same set of unicode characters, of which there are over 100,000. UTF-16 does not enable us to display any more characters. The real difference is the amount of space the different encodings take up. UTF-8 is generally the most space efficient and backwards compatible and so has gained popularity with the web.

But these particular characters (&#164; &#183; and &#149; ...) are part of the ISO-8859-1 (and US-ASCII) standard...

I best correct myself... those chars are not part of the US-ASCII standard as I implied above as US-ASCII only share the first 128 characters.

(The little pointy square is still there!)

Hhhhmmm, I think this thread has digressed a tad - there's been one [webmasterworld.com] or two [webmasterworld.com] threads on this subject recently.

7:00 pm on Mar 19, 2008 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



@penders: yeah the 'image' not displaying when somebody wants to print it won't be a problem. If I make anything of the site printable (which I might) I'll supply a print-version anyway. So I'll do it like that, thx!
8:21 pm on Mar 19, 2008 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Umm..I think using a background image is only a solid solution if I go with pixels for the menu-size. If I go with % or em, I'll have to use em or % for the arrow-background-picture, too which would be very hard to handle?

or wouldn't it, if I 'do it right'?:-)

8:36 pm on Mar 19, 2008 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



The X-browser version is essentially just coding in the bullets by hand... that's a kind of obvious solution, and tedious.
The other versions can be done more effectively so that you do not need to give it the special attribute for each element.

The reason this method does not work in IE6, is because it does not support the :before or:after pseudo-elements. This can be fixed using a javascript emulation, such as "IE7.js"

11:32 pm on Mar 19, 2008 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Umm..I think using a background image is only a solid solution if I go with pixels for the menu-size. If I go with % or em, I'll have to use em or % for the arrow-background-picture, too which would be very hard to handle?

Unfortunately you can't specify the background-image dimensions at all in CSS - it is always px (although could potentially get scaled if output to other media perhaps)?

However, I wouldn't necessarily sacrifice a flexible layout for the sake of your bullets. Look at

background-position
(ie. left center - as given above) which should allow you to at least position the bullet correctly. And modern browsers (IE7, Opera9) may cope with this OK anyway as they default to zooming the page rather than simply changing text-size - which I think might zoom the background-image's as well?