Jump to content
Stef's Coding Community
Sign in to follow this  
danhodge

Hover effect

Recommended Posts

Okay, so currently i have my navigation bar here:

http://potatoes.netii.net/

 

I like the basic style of it, but it has some noticable issues. The main problem im having right now is that i don't understand how i can make the background expand out from the text, as oppose to the current effect, in which the text moves with it.

 

Thanks if anyone can help, and if you don't understand what i mean i will provide a graphic to show you with :)

- Danny

Share this post


Link to post
Share on other sites

I am not clear on what you mean by "background expand out from text'.

Share this post


Link to post
Share on other sites

But if you change your CSS to this:

#navbar li a:link {
text-decoration: none;
height: 50px;
color: white;
text-align: center;
}


#navbar li a:hover {
background: #98AFC7;
padding: 15px 0 13px 0;
}

You get what I think you might be talking about.

Share this post


Link to post
Share on other sites

Basically, if you edit that padding to make it padding: 15px 10px 13px 10px; then it will expand out, however then it pushes everything else to the other side of where it expands...

 

Is there is a way to fix this, or a way around it?

Share this post


Link to post
Share on other sites

I think the key thing here is that the margins/padding/height on the link need to stay consistent between the regular and hover states, and only the background should change. That should fix the issue you are having where the text jumps when hovered over.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...