Help with :hover

[peter11]

Hey,

 

Im working on this site: http://xosite.co.uk/testdrupal/

 

If you hover over the menu you will notice that it moves to the right. I know this is due to the padding element however i don't know the way to give a box around it without using padding.

Code for the CSS of the links:

.menu {font-family:Verdana, Geneva, sans-serif; font-style:normal; color:white;}
.menu a:link {color:white; text-decoration:none; font-size:16px}
.menu a:visited {color:white; text-decoration:none; font-size:16px;}
.menu a:hover { background-image:url(../images/menu_hover.jpg); padding-bottom:10px; padding-top:8px; padding-left:7px; padding-right:7px; text-decoration:none; font-size:16px;}
.menu a:active {color:red; text-decoration:none; font-size:16px;}

 

CSS code for the nav section

#navigation {
  background-image:url(../images/nav_bar.jpg);
  background-repeat:repeat-x;
  float: left;
  margin-left: 0;
  margin-right: -100%;
  padding: 0;
  padding-top:9px;
  padding-left:20px;
  word-spacing:30px;
  width: 816px;
  height: 40px;}

 

I hope you can see the kinda thing i am aiming for here. Please advice how you would do it.

 

thanks

[squiblo]

try...

.menu a:hover { background-image:url(../images/menu_hover.jpg); margin-right:-14px;padding-bottom:10px; padding-top:8px; padding-left:7px; padding-right:7px; text-decoration:none; font-size:16px;}

[Miss_Rebelx]

You can have them always have a padding, just not always have a background color/image - that way they don't move, just colour.

Only other thing I can think of that's simple would be to make each 'box' it's own div, within each have a normal text link. But then put a onMouseOver effect via Javascript.

Or even use an image in the background (which can be a transparent image with text at first, to a blue background with text). The hovering would happen by making the whole image a link (with no border, to look pretty).

You could possibly achieve this through using a button, and making it look and act like a link (transparent background, no border, etc) and then upon it being pressed (Javascript, or :hover pseudo-class) it changes it's styling.

[peter11]

The menu is in a php array so i cant have there own boxes. Well i could be easier not too. and if i set a padding to the php array then it would only pad the left and the right of the string. As i understand it.

 

Any other suggestions?

[peter11]

@squiblo

 

Thanks i fixed like this

 

.menu a:hover { background-image:url(../images/menu_hover.jpg); margin-left:-7px; margin-right:-7px;padding-bottom:10px; padding-top:8px; padding-left:7px; padding-right:7px; text-decoration:none; font-size:16px;}

[peter11]

This is fixed however it just seems really slow to me.

 

If you drag the mouse across it takes ages to load up the image. Is this normal if doing it in this way?

 

BTW i have changed it from an image to color: code but no difference.

[Miss_Rebelx]

Actually it would still be simple to have them made from an array, but if you don't want to do it that way I won't bother to explain.

 

As for padding of the array, how are you doing it? You said you already had padding. If you match the padding in your #navigation to what you have on your .menu a: styling...

 

What do you mean it takes forever for the color to load up? An image always has a load time, a color should be instantaneous (ish).

[peter11]

@rebel

 

Well try it. I'm using a color not an image. Yes i though it should be instant too.

 

http://xosite.co.uk/testdrupal/

 

If you hover you mouse over them and change it takes a long time. No where near as fast as i think it should.

 

See what i mean ? BTW im using FF not tested on IE yet.

[Miss_Rebelx]

It doesn't take anytime to load on my end. Not sure what to say for that.

 

Edit: Tested in both FF and IE.