danhodge Posted March 27, 2011 Report Share Posted March 27, 2011 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 Quote Link to comment Share on other sites More sharing options...
Andrea Posted March 27, 2011 Report Share Posted March 27, 2011 I am not clear on what you mean by "background expand out from text'. Quote Link to comment Share on other sites More sharing options...
Andrea Posted March 27, 2011 Report Share Posted March 27, 2011 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. Quote Link to comment Share on other sites More sharing options...
danhodge Posted March 27, 2011 Author Report Share Posted March 27, 2011 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? Quote Link to comment Share on other sites More sharing options...
falkencreative Posted March 27, 2011 Report Share Posted March 27, 2011 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.