Jump to content

Recommended Posts

Posted

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

Posted

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.

Posted

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?

Posted

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.

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...
×
×
  • Create New...