Offsetting background image on link hover (help needed)

HTML & CSS
1

A small detail is hanging me up on a site redesign, and it’s probably solved pretty easily with a trick I must not be aware of. What I’m trying to accomplish, either through CSS triangles or with a background image on a:hover, is a red triangle pointing down over the link. Here’s what it’s supposed to look like:

The issue is, when I try to give a:hover a background image (the red triangle) and background-position it, the further up y I take it, the smaller the image gets until it disappears. What I’m looking for is a way to offset the background image from the link entirely so that it sits flush with that red line above. Perhaps the solution is to somehow make the “box” of the link bigger, though I wouldn’t know where to start with that either.

The existing code:

#nav li {
float: left;
margin-left: 45px;
}
#nav li a {
text-decoration: none;
color: #fff;
font-family: Century Gothic, Arial, Helvetica, sans-serif;
}
#nav li a:hover {
color: #c08484;
background: url(images/triangle.png) no-repeat 0 -6px;
}

If there is a way to accomplish this using only CSS (triangles), I’m all ears.

Any help is greatly appreciated.

2

Perhaps the solution is to somehow make the “box” of the link bigger, though I wouldn’t know where to start with that either.

Hi,
From looking at your code it looks like you do need to control the anchor’s height since that is what your image is hooked to.

It’s hard to tell what is going on without seeing all your code but you can float the anchors left and set a height on them.

Do you have a link to the page?

3

Thanks for the reply. Setting the anchor height doesn’t seem to have any effect on the background image.

I actually don’t have a link to the page as it’s still local, but it is a Wordpress theme I’m building using the 3.0 menu management, if that makes any difference.

Any other ideas are very, very welcome.

4

It should work like Rayzur said, but what i find strange in the first place is where is that image suddenly coming from?

In #nav li and #nav li a there is no image and suddenly on the :hover there is a image?

5

Right, the image should only appear on hover. It works as is now, but the triangle refuses to slide up above the constraints of the link without getting smaller in size. What I need to do is offset the image so that it sits flush with the red line on the top of the navigation upon hover.

EDIT: and just to clarify, by ‘anchor’ height you do mean ‘a’ height, correct? This is what I tried:

#nav li a {
text-decoration: none;
color: #fff;
font-family: Century Gothic, Arial, Helvetica, sans-serif;
height: 40px (and various other heights, to no avail)
}

I also tried specifying the height of the a:hover, and that also didn’t seem to have any effect on the position of the background image.

6

Setting the anchor height doesn’t seem to have any effect on the background image.
Hi,
Anchors are inline elements by default and they are not capable of taking on dimensions. That is why I said you would need to float them, to generate a block box so you could set a height. :wink:

but it is a Wordpress theme I’m building using the 3.0 menu management, if that makes any difference.
Sorry, that does not mean anything to me nor should it make any difference.

Right, the image should only appear on hover
That’s fine if it only appears on :hover but it needs to be pre-loaded. I would go ahead and apply the BG to the normal states of the anchor but just shift it out of sight with BG position. Then bring it into view on :hover

and just to clarify, by ‘anchor’ height you do mean ‘a’ height, correct?
Yes, but it needs to be floated for reasons mentioned above.

I also tried specifying the height of the a:hover, and that also didn’t seem to have any effect

The only things you need to set on :hover are the things that change. In the code below I am changing BG position and color only.

Try this and see what happens. Without your full code and images I am unable to test. :slight_smile:


[B]#nav li [/B]{
float: left;
margin-left: 45px;
}
[B]#nav li a[/B] {
[COLOR=Blue]float: left;
height: 40px;[/COLOR]
color: #fff;
text-decoration: none;
font-family: Century Gothic, Arial, Helvetica, sans-serif;
background: url(images/triangle.png) no-repeat [COLOR=Blue]-999px -6px[/COLOR]; [COLOR=Red]/*preload and hide image off left*/[/COLOR]
}
[B]#nav li a:hover[/B] {
color: #c08484;
background-position: [COLOR=Blue]50% -6px[/COLOR]; [COLOR=Red]/*reset left on :hover*/[/COLOR]
}
7

Thanks for the reply. I did actually try floating it left before but didn’t notice a change in height because the ‘block’ of the anchor was expanding down instead of up (which means it still cuts off the triangle when I try pushing it up).

Would there be a way to vertically align the anchor text to the bottom of the block element instead of the top? I think that would solve the problem.

Here’s what it looks like on hover now with a red background thrown in to illustrate:

8

Here’s what it looks like on hover now with a red background thrown in to illustrate:
It looks like you have some top padding on your LI, likely coming from somewhere else in the css.

You might be able to set your anchor height at 34px and give it a 6px top margin (after top padding is removed from LI). Then set line-height to vertically position your text where you want it.

EDIT:
Upload your images to imageshack (like you did in the last post) and post your html so I can knock something together

9

So I managed to get the text moved down in the block element using a line-height of 40px, and that’s allowed me to move the triangle up higher. The only issue still is that the triangle image decreases in size the further up I take it.

It’s definitely workable now, but it’s just annoying that the image is being scaled like that. Any ideas, out of morbid curiosity?

Again, thanks for your help.

10

The only issue still is that the triangle image decreases in size the further up I take it

That’s because it has a point on it and it would eventually disappear.
Leave the top value at “0” for the full triangle to show

See my edits in the last post if you need further help :wink:

11

You’ve helped enough, really appreciate it. I’ll keep playing around with it.

12

I really think there is some top padding on your <ul> or <li> , look closely through your css and remove it or go ahead and set the ul & li to padding:0

I’m guessing it is on the UL since your LI rules do not show any padding.

You should always reset the UL default margins/paddings to “0” or define them as you need them.

Then you should be able to leave your anchor height at 40px and use line-height to push the text under the arrow.

Doing that the bg position on :hover should be 50% 0