Forum Moderators: not2easy
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!
#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.
<!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='¤'>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 '·'. 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]
<!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='• '>Go Here</a><br />
<a href='#' class='withDingbat' dingbat='• '>Go There</a><br />
<a href='#' class='withDingbat' dingbat='• '>Go Somewhere Else</a>
</body></html>
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. "¤") 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 (¤ · and • - '¤', '·' and '•') are part of the ISO-8859-1 (and US-ASCII) standard so I don't think it matters in this case either way. (?)
<!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='• '>Go Here</a><br />
<a href='#' class='withDingbat' dingbat='• '>Go There</a><br />
<a href='#' class='withDingbat' dingbat='• '>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.
You're right swa66. IE6 doesn't show this effect. Guess I got carried away, eh? I'll do better next time.
...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)...?
<!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'>• <span>Go Here</span></a><br />
<a href='#' class='withDingbat'>• <span>Go There</span></a><br />
<a href='#' class='withDingbat'>• <span>Go Somewhere Else</span></a>
</body></html>
[edited by: MarkFilipak at 2:49 am (utc) on Mar. 16, 2008]
penders wrote:
> I notice they have since been 'parsed' into numeric char refs!?
Perhaps because they are beyond , 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.
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.
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 (¤ · and • ...) 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.
or wouldn't it, if I 'do it right'?:-)
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"
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?
