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!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

List bullets as links? 3

Status
Not open for further replies.
gwillr

gwillr

IS-IT--Management
Nov 4, 2003
267
CA
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

 
Sort by date Sort by votes
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]
 
Upvote 0 Downvote
I have tried wraping the whole <li>link</li> in the <a> tag, but then the 'hover does not work.
Click to expand...

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
 
Upvote 0 Downvote
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

 
Upvote 0 Downvote
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:


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

 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Chris,

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

I have implemented your suggestion on a test page :


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

 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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

 
Upvote 0 Downvote
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

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
995
spamjim
spamjim
caykamanj1966
  • Locked
  • Question
Sorting a grid list using iframe associated with Google Drive
Replies
0
Views
221
caykamanj1966
caykamanj1966
peterd51
  • Locked
  • Question
HTML External Links Fail
Replies
15
Views
343
peterd51
peterd51
geneg28
  • Locked
  • Question
NEED HELP WITH CREATING LINKS
Replies
6
Views
244
geneg28
geneg28
pendle666
  • Locked
  • Question
Excel spreadsheet data into a web page including links
Replies
3
Views
163
pendle666
pendle666

Part and Inventory Search

Sponsor

Back
Top