PDA

View Full Version : Highlighting link and float problem



fase_xi
Jan 21st, 2011, 01:01 PM
Hi,

I want to create a link that when you rollover, the link is highlighted. That is easy to do by assigning background color to the link. However, whenever I start using float, the highlight effect disappears. I'm not sure what the problem is. I provided an example here. (http://dl.dropbox.com/u/19242919/example.html)

I have to use float since I want to create a fixed amount of spacing between each set of words (as in the example). Is there any way to solve this?

Excavator
Jan 21st, 2011, 05:54 PM
Hello fase_xi,
I guess I've never floated anything inside an anchor before, I'll have to play around with that a bit...

Try your links like this though -

a.articleList:link,
a.articleList:visited {
text-decoration: none;
color: #3c3935;
display: block;
}
a.articleList:hover {
color: #999;
background:#FC0;
}
a.articleList:active {color: #999;}
.title, .guestContributor,
.date, .theme, .language {display: inline-block;}
.title {width: 385px;}
.guestContributor {width: 235px;}
.date {width: 135px;}
.theme {width: 108px;}
.language {width: 50px;}

teedoff
Jan 21st, 2011, 06:12 PM
Couldn't you just wrap each link in its own div, then give the div a background color onHover?

fase_xi
Jan 21st, 2011, 07:24 PM
Hello fase_xi,
I guess I've never floated anything inside an anchor before, I'll have to play around with that a bit...

Try your links like this though -

a.articleList:link,
a.articleList:visited {
text-decoration: none;
color: #3c3935;
display: block;
}
a.articleList:hover {
color: #999;
background:#FC0;
}
a.articleList:active {color: #999;}
.title, .guestContributor,
.date, .theme, .language {display: inline-block;}
.title {width: 385px;}
.guestContributor {width: 235px;}
.date {width: 135px;}
.theme {width: 108px;}
.language {width: 50px;}

Thank you very much for your code, Excavator. It works :) At first, the highlight stretches right to the end of the browser but after I remove display:block in the a.articleList:visited, I got it to work the way I wanted.

I'm not really sure what happened or what the problem was though, if you could explain briefly on what was going on, I would really appreciate it. It may be useful if I run into a similar problem in the future. Thanks.

Excavator
Jan 21st, 2011, 07:28 PM
I'm not really sure what happened or what the problem was though, if you could explain briefly on what was going on, I would really appreciate it. It may be useful if I run into a similar problem in the future. Thanks.

We float things to put other things beside them. Your anchor spans were already inline though, so there was no real need for a float.
Like I said, I've never floated anything inside an anchor before but I suspect you would still need to clear those floats... I'm not sure though. Have to experiment a bit to find out.

Excavator
Jan 21st, 2011, 07:34 PM
In your original code, setting a.articleList to display: inline-block; works. Try this -


a.articleList {display: inline-block;}
a.articleList:link {
text-decoration: none;
color: #3c3935;
}
a.articleList:visited {
text-decoration: none;
color: #3c3935;
}
a.articleList:hover {
text-decoration: none;
color: #999;
background:#FC0;
}
a.articleList:active {
text-decoration: none;
color: #999;
}

My first solution is the better choice though.

fase_xi
Jan 21st, 2011, 08:31 PM
Thank you :)