3 replies [Last post]
silvercone
Offline
newbie
Last seen: 4 years 37 weeks ago
Joined: 2011-12-10
Posts: 2
Points: 3

I have created a 'link list' and the text in my links successfully changes weight and background when I roll over it. However I'd like to enhance it in the following ways:
- To include my bullet gif as part of the link
- To have a roll-over effect on my bullet (i.e change it to a different image)

Can I do this with just CSS or will I need Javascript?

(For my first reequest I tried just puting the <li> inside the <a> but that made it take up the whole width of the page)

The code I currently have, which works in Firefox and IE is reproduced below. My HTML simply has a <div id="class_link"> surrounding it.

Thanks in advance for any assistance.

SC

#link_list ul {
margin: 0px;
padding-top: 10px;
} 
 
#link_list li {
list-style-type: none;
background: url('bullet.gif') no-repeat top left;
height: 46px;
padding-left: 50px;
} 
 
#link_list li a:link {
font-weight: normal; 
font-size: 11pt; 
color: black; 
font-family: Arial; 
text-align: left; 
text-decoration: none;
}
 
#link_list li a:visited {
font-weight: normal; 
font-size: 11pt; 
color: black; 
font-family: Arial; 
text-align: left; 
text-decoration: none;
}
 
#link_list li a:hover {
font-weight: bold; 
font-size: 11pt; 
color: black; 
font-family: Arial; 
text-align: left; 
text-decoration: none;
background: yellow;
}
 
#link_list li a:active {
font-weight: normal; 
font-size: 11pt; 
color: black; 
font-family: Arial; 
text-align: left; 
text-decoration: none;
}

//mod edit: Please read the sticky topics on how to post code. I've added the necessary bbcode and moved this to css styling, a more appropriate forum. ~gt

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 41 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9580
Points: 3646

Put the bg image and the left

Put the bg image and the left padding on a:link. On a:hover, put the alternate bg image.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

silvercone
Offline
newbie
Last seen: 4 years 37 weeks ago
Joined: 2011-12-10
Posts: 2
Points: 3

Thanks. I had to do a bit

Thanks.

I had to do a bit more:
- Add height and display: block to the a:link
- Add width to ul

and then it worked fine.

SC

Kim55228
Kim55228's picture
Offline
newbie
Last seen: 4 years 36 weeks ago
Timezone: GMT+8
Joined: 2011-12-19
Posts: 1
Points: 1

Thank you for the information

Thank you for the information you provided! Smile

______________________
[spam links removed ~gt]