homepage Welcome to WebmasterWorld Guest from 54.196.62.132
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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




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

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!

 

swa66




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

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.

MarkFilipak




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

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]

MarkFilipak




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

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>

penders




msg:3600407
 10:30 am on Mar 14, 2008 (gmt 0)

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. (?)

penders




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

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!?

swa66




msg:3600944
 8:07 pm on Mar 14, 2008 (gmt 0)

<!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.

MarkFilipak




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

> 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.

Makaveli2007




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

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?

penders




msg:3601612
 9:18 pm on Mar 15, 2008 (gmt 0)

...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)...?

MarkFilipak




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

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.

MarkFilipak




msg:3601790
 2:38 am on Mar 16, 2008 (gmt 0)

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]

penders




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

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.

penders




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

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).

MarkFilipak




msg:3602394
 11:22 pm on Mar 16, 2008 (gmt 0)

> 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.

penders




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

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.

Makaveli2007




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

@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!

Makaveli2007




msg:3605737
 8:21 pm on Mar 19, 2008 (gmt 0)

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'?:-)

Xapti




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

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"

penders




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

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?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved