3 replies [Last post]
silvercone
Offline
newbie
Last seen: 2 years 50 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
Online
Moderator
Dallas
Last seen: 2 min 47 sec ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9266
Points: 3272

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

UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

There are enough html & css demos and tutorials to be interesting. Please visit.

silvercone
Offline
newbie
Last seen: 2 years 50 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: 2 years 49 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]