List bullets as links? 3

gwillr · Dec 6, 2004

I have an unordered list of links. my css styles for the links has them change color on 'hover'. Is there a way that I can have the 'bullets' change as that item is 'hovered'?

I have tried wraping the whole <li>link</li> in the <a> tag, but then the 'hover does not work.

Any help./suggestions would be appreciated.

Gary

http://www.robarspages.ca

cLFlaVA · Dec 6, 2004

best way to do this would be with two images. Something like this should work:

Code:

<style type="text/css">
li.regular { list-style-image: url(reg_bullet.gif); }
li.over { list-style-image: url(special_bullet.gif); }
</style>

<ul>
  <li class="regular" onmouseover="this.className = 'over';" onmouseout="this.className = 'regular';">List Item 1</li>
  <li class="regular" onmouseover="this.className = 'over';" onmouseout="this.className = 'regular';">List Item 1</li>
  <li class="regular" onmouseover="this.className = 'over';" onmouseout="this.className = 'regular';">List Item 1</li>
  <li class="regular" onmouseover="this.className = 'over';" onmouseout="this.className = 'regular';">List Item 1</li>
</ul>

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]

BillyRayPreachersSon · Dec 6, 2004

I have tried wraping the whole <li>link</li> in the <a> tag, but then the 'hover does not work.

Strange - it works just fine for me (at least in IE 6). Maybe your CSS was wrong?

Code:

<html>
<head>
	<style type="text/css">
		a:hover {
			color: red;
		}
	</style>
</head>
<body>
	<ul>
		<a href="[URL unfurl="true"]http://www.google.co.uk/"><li>Google[/URL] UK</li></a>
		<a href="[URL unfurl="true"]http://www.google.co.nz/"><li>Google[/URL] NZ</li></a>
		<a href="[URL unfurl="true"]http://www.google.com.au/"><li>Google[/URL] AU</li></a>
	</ul>
</body>
</html>

I cannot, however, tell you about the legitimacy of placing the A tags where they are - you may want to validate it to make sure. It may also not work in other browsers, but doesn't require JS, however.

Hope this helps,
Dan

gwillr · Dec 6, 2004

Clflava,

Your idea is good, thanks for the quick response.

Dan,

You are right, I goofed with the css, but W3C does not allow it to be set up in that way anyhow.

Looks to me like clFlava's idea will have to be used here. (Although it is a good idea, I Didnt really want to get in to all that, with something that should be a lot easier to achieve)

Gary

http://www.robarspages.ca

gwillr · Dec 7, 2004

clFLavA,

I have decided to implement your suggestion, and have one more quick question about it, that i can not seem to find an answer to. I have a mock-up page set up now, with my images:

http://www.robarspages.ca/devroot/photosite/bullet.htm

Notice that in IE, the bullets tend to be higher up than the the text, BUT in mozilla, they tend to be lower. I have played with some different style properties, but can not seem to get it right I want the bullets to be centered with the text.

If anyone knows how this can be achieved, your help would be appreciated.

Gary

http://www.robarspages.ca

chessbot · Dec 7, 2004

Not sure if it would be useful, but you can optimize your code in non-IE browsers: All browsers but IE support the :hover pseudo-class for all elements. Therefore:

Code:

<style type="text/css">
li.regular { list-style-image: url(reg_bullet.gif); }
li.regular:hover { list-style-image: url(special_bullet.gif); }
li.over { list-style-image: url(special_bullet.gif); }
</style>

<ul>
  <li class="regular" onmouseover="this.className = 'over';" onmouseout="this.className = 'regular';">List Item 1</li>
  <li class="regular" onmouseover="this.className = 'over';" onmouseout="this.className = 'regular';">List Item 1</li>
  <li class="regular" onmouseover="this.className = 'over';" onmouseout="this.className = 'regular';">List Item 1</li>
  <li class="regular" onmouseover="this.className = 'over';" onmouseout="this.className = 'regular';">List Item 1</li>
</ul>

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakespearean sonnet.

ChrisHunt · Dec 8, 2004

FF and other Gecko-based browsers would (I think) allow you to apply a rule to [tt]li:hover[/tt], it's only IE that limits [tt]:hover[/tt] to [tt]<a href>[/tt] elements.

However, consider the usability angle - is it helpful to the user that the bullets change on hover like the links, but that they aren't clickable themselves?

Here's an alternative strategy that removes the bullets provided by the <li> element and uses background images instead:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css">
/* Switch off the default padding & bullet from the <li> ... */
li {
   list-style-type: none;
   margin-left: 0;
   padding-left: 0;
}

/* ... and fake an alternative using a background image for the <a> */

li a {
   display:block;
   padding-left: 20px;
   background: url(blue.gif) no-repeat center left;
}

li a:hover {
   background-image: url(red.gif);
   color: red;
}

</style>
</head>
<body>
  <ul>
    <li><a href="#">option 1</a></li>
    <li><a href="#">option 2</a></li>
  </ul>
</body>
</html>

This works in IE as well as FF, uses valid markup and no Javascript, and lets visitors can click the bullet as well as the link text. Not bad, eh?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

gwillr · Dec 8, 2004

Chris,

Very clever. You are right in thinking about the usability on non-clickable bullets.

I have implemented your suggestion on a test page :

http://www.robarspages.ca/devroot/photosite/bullet.htm

In FF, it displays well, but in IE, I have gaping space between each list item, any suggestions?

Thanks in advance.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css">
/* Switch off the default padding & bullet from the <li> ... */
li {
   list-style-type: none;
   margin-left: 0;
   padding-left: 0;
}

/* ... and fake an alternative using a background image for the <a> */

li a {
   display:block;
   padding-left: 20px;
   background: url('images/bluebullet1.gif') no-repeat center left;
}

li a:hover {
   background-image: url('images/redbullet1.gif');
   color: red
}

a.toplinks:link    			{color: #282484; font-family: verdana, arial, helvetica, sans-serif; font-size: 13px; font-weight: normal; text-decoration: none}
a.toplinks:visited 			{color: #282484; font-family: verdana, arial, helvetica, sans-serif; font-size: 13px; font-weight: normal; text-decoration: none}
a.toplinks:active  			{color: #282484; font-family: verdana, arial, helvetica, sans-serif; font-size: 13px; font-weight: normal; text-decoration: none}
a.toplinks:hover   			{color: #cc0000; font-family: verdana, arial, helvetica, sans-serif; font-size: 13px; font-weight: normal; text-decoration: none}

</style>
</head>
<body>
  <ul>
    <li><a class="toplinks" href="#">option 1</a></li>
    <li><a class="toplinks" href="#">option 2</a></li>
  </ul>
</body>
</html>

Gary

http://www.robarspages.ca

ChrisHunt · Dec 8, 2004

Another IE bug, ho hum, putting one block element inside another seems to generate an extra line break. Adding [tt]display: inline;[/tt] to the [tt]li[/tt] rule seems to fix it.

Incidentally, you can remove a lot of redundant code if you code the <ul> like this:

Code:

<ul class="toplinks">
  <li><a href="#">option 1</a></li>
  <li><a href="#">option 2</a></li>
</ul>

and your CSS like this:

Code:

.toplinks li {
   list-style-type: none;
   margin-left: 0;
   padding-left: 0;
   display: inline;
}

.toplinks li a {
   display:block;
   padding-left: 20px;
   background: url('/images/bluebullet1.gif') no-repeat center left;
   color: #282484;
   font-family: verdana, arial, helvetica, sans-serif;
   font-size: 13px;
   font-weight: normal;
   text-decoration: none
}

.toplinks li a:hover {
   background-image: url('/images/redbullet1.gif');
   color: #cc0000;
}

The font family/size/weight/decoration will apply to all pseudo-classes of <a>, there's no need to repeat them for all of them.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

gwillr · Dec 8, 2004

Chris,

Sorry to be a pest. Made those chages, but now the images do not display (see link from previous post)

I have looked the code over and over, no typos or errors that i could spot, and I can not figure what the issue is. This sort of tinkering with lists is new to me, so I appreciate your patience.

Thanks!

Code:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css">
.toplinks li {
   list-style-type: none;
   margin-left: 0;
   padding-left: 0;
   display: inline;
}

.toplinks li a {
   display:block;
   padding-left: 20px;
   background: url('[URL unfurl="true"]http://www.robarspages.ca/devroot/photostie/images/bluebullet1.gif')[/URL] no-repeat center left;
   color: #282484;
   font-family: verdana, arial, helvetica, sans-serif;
   font-size: 13px;
   font-weight: normal;
   text-decoration: none
}

.toplinks li a:hover {
   background-image: url('[URL unfurl="true"]http://www.robarspages.ca/devroot/photostie/images/redbullet1.gif');[/URL]
   color: #cc0000;
}
</style>
</head>
<body>
<ul class="toplinks">
  <li><a href="#">option 1</a></li>
  <li><a href="#">option 2</a></li>
</ul>
</body>
</html>

Gary

http://www.robarspages.ca

ChrisHunt · Dec 8, 2004

You'll kick yourself:

Code:

   background-image: url('[URL unfurl="true"]http://www.robarspages.ca/devroot/[/URL][b]photostie[/b]/images/redbullet1.gif');

Should be "photosite"

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

gwillr · Dec 8, 2004

Ugh,

<kicking style="repeat" feeling="embarrassed"></kicking>

Needless to say, it works well now.

Thanks Chris, your help has been invaluable. Have a great day!

Gary

http://www.robarspages.ca

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

List bullets as links? 3

gwillr

IS-IT--Management

cLFlaVA

Programmer

BillyRayPreachersSon

Programmer

gwillr

IS-IT--Management

gwillr

IS-IT--Management

chessbot

Programmer

ChrisHunt

Programmer

gwillr

IS-IT--Management

ChrisHunt

Programmer

gwillr

IS-IT--Management

ChrisHunt

Programmer

gwillr

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor