8 replies [Last post]
Rischen
Offline
Regular
Johannesburg
Last seen: 17 years 26 weeks ago
Johannesburg
Joined: 2004-11-20
Posts: 43
Points: 0

Hi,

How do you make :hover borders around links that are active beyond the actual link text? I've got a navbar with links within the site and if you hover the actual text you see the whole border light up but you have to be on the text, how do you make it so if you hover even off the text slightly in the navbar the link lights up?

I've done it by playing with the margin on that column and floating other stuff and absolute positioning other stuff but it creates a real problem for Firefox and Opera.

Would appreciate your help,

Rischen

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

light-up link hovers

In a nutshell you need to set your anchor to display:block
then you should be able to set hover on the actual anchor area rather than just href link.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 2 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

light-up link hovers

Be aware, though, that if you do your <a> as blocks you will have to make them float or else they will stack vertically.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 11 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

light-up link hovers

DCElliott wrote:
Be aware, though, that if you do your <a> as blocks you will have to make them float or else they will stack vertically.
[emphasis added]
DE
Which obviates the need to declare them block, {display: block;}, since a float is automagically a block element Smile.

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.

Rischen
Offline
Regular
Johannesburg
Last seen: 17 years 26 weeks ago
Johannesburg
Joined: 2004-11-20
Posts: 43
Points: 0

light-up link hovers

Hi,

Thanks all.

Thanks, Hugo. That worked brilliantly in Firefox and most everything else. (sigh) Is there any work around to make it work in that other browser?

Okay, I've got a left floated nav column, a right floated links column and a central content column. My nav column is the left floated column with light up links and for some reason IE doesn't recognize the width of that column as the anchor width for the :hovers in it. Finding a way to make it work initially in IE has caused me all my recent cross-browser problems. Is there a work around to make IE light up along the entire width of the navbar because it's gone back to just lighting up on link text over whereas Firefox and all are perfect now.

I really appreciate it,

Rischen

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

light-up link hovers

Rischen,
Could you post some code to look at ?

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Rischen
Offline
Regular
Johannesburg
Last seen: 17 years 26 weeks ago
Johannesburg
Joined: 2004-11-20
Posts: 43
Points: 0

light-up link hovers

Hey Hugo,

Thanks a lot for the offer. I've got a bare-nekkid test on the thing cos I've gone back to basics on this.

In Mozilla the links do what they're supposed to but IE seems to have a problem with the fact that the navigation column is floated and doesn't recognize its width as the anchor container for the hovers. (As for the difference in top-margin placement between the two combatants, I ain't even thinking about that yet.)

Take a look. I really appreciate it.

Best,

Rischen

<style type="text/css">

body {
	margin: 0;
}

#navigation {
	float: left;
	width: 10em;
	margin-top: 1.5em;
}

#links {
	float: right;
	width: 10em;
}

#content {
	margin: 0 10em;
	padding: 0 1em;
	border: solid #cccccc;
	border-width: 0 1px;
}

#footer {
	clear: both;
}

a {
	display: block;
	color: olive;
	text-decoration: none;
	border: solid white 1px;
}

a:hover {
	display: block;
	background-color: #cccccc;
	border: solid black 1px;
}

.pic {
	position: relative;
	left: 0;
	top: 0;
	height: 73;
	width: 621;
}

</style>

<body>

<img class="pic" src="marquee.gif" />

<div id="navigation">

<h2>Navigation</h2>

<a href="lkajsdkf.com">Silver Dragon</a>

<a href="lakjsdf.com">Gold Dragon</a>

<a href="alkdjf.org">Bronze Dragon</a>

<a href="aldkfj.info">Tin Dragon</a>

</div>

<div id="links">

<h2>Links</h2>

<h3>Our friends</h3>

</div>

<div id="content">

<h1>Content</h1>

<p>Silver dragon Gold dragon Silver dragon Gold dragon Silver dragon Gold dragon Silver dragon Gold dragon Silver dragon Gold dragon Silver dragon Gold dragon</p>

<p>Silver dragon Gold dragon Silver dragon Gold dragon Silver dragon Gold dragon Silver dragon Gold dragon Silver dragon Gold dragon Silver dragon Gold dragon Silver dragon Gold dragon Silver dragon Gold dragon</p>

</div>

<div id="footer">

&copy; The Silver Dragon 2004

</div>

</body>

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 5 years 2 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

light-up link hovers

You probably don't want this effect on all links so you can modify your CSS a bit with Contextual Selectors:

#navigation { 
...
}
#navigation a:link, 
#navigation a:visited {
   display: block;
   color: olive;
   text-decoration: none;
   border: solid white 1px;
}

#navigation a:hover,
#navigation a:active {
   background-color: #ccc;
   border-color: #000;
}

Basically, what the above code does is create a context for all <a ...> within <div id="navigation">. They will get your special style without affecting other <a ...>s. #navigation become the context for the style. A lot of folks don't realize this and do a lot of extra coding in both the CSS and HTML. More coding means more time, more mistakes, and harder maintainence. So, get smarter and lazier all at once. Laughing out loud

Notice also that I stripped out the redundant property declaration in your :hover style and also covered off the other link states.

Check your pic style - you are missing units on your dimensions.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Rischen
Offline
Regular
Johannesburg
Last seen: 17 years 26 weeks ago
Johannesburg
Joined: 2004-11-20
Posts: 43
Points: 0

light-up link hovers

Hey DC,

I really appreciate your help and time on that. Thank you. It didn't work at first but then I added a width to the anchor and an * html hack and now IE accepts the width of the anchor and Mozilla which as someone once said is too well behaved for such fun accepts the original float width as the href anchor.

I appreciate your time, help and advice.

Best,

Rischen