kitster79 Posted November 18, 2009 Report Share Posted November 18, 2009 Hi, I am trying to position my anchor tags so that when any part of the blue nac bg is hovered over that individual button it activates the hover state. However I cannot seem to position the text so that it is centered in the blue bar while keeping the hover state only over the blue button...does that make sense? Take a look here... http://vojodesign.com/proofs/jacquelynHernandez/website/index.html As you can see the text is too high up in the blue bar...but when I add top-padding to the anchor tag, it only makes the "hoverable section drop down below the bottom of the blue bar Let me know if I am not explaining myself well enough. Any help fixing this would be much appreciated. Thanks Kit Quote Link to comment Share on other sites More sharing options...
Wickham Posted November 18, 2009 Report Share Posted November 18, 2009 I notice that you attempted to solve the problem by editing the #nav li height to 42px instead of height: 30px; padding-top: 12px which made the whole height clickable but the text moved to the top; so put padding-top on the "a" tag which controls the text:- #nav li a { color: #FFFFFF; text-decoration: none; font-weight: normal; font-size: 14px; font-family: Helvetica, Arial, sans-serif; padding-top: 12px; /*was0px;*/ padding-bottom: 0px; display: block; } Quote Link to comment Share on other sites More sharing options...
kitster79 Posted November 18, 2009 Author Report Share Posted November 18, 2009 Yah, that's how I had it before...but now see... http://vojodesign.com/proofs/jacquelynHernandez/website/index.html The anchor (the "roll-overable" area) drops down below the bottom of the blue nav bar - which I dont want. I only want to get the finger when you mouse over the blue area. Kit Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 18, 2009 Report Share Posted November 18, 2009 You'll need to test this in other browsers (I believe they should be fine though), but here's a fix for Firefox... -- remove padding-top from "#nav li a" -- add "line-height:42px;" Quote Link to comment Share on other sites More sharing options...
kitster79 Posted November 18, 2009 Author Report Share Posted November 18, 2009 Ah, beautiful. Thanks very much guys. Quote Link to comment Share on other sites More sharing options...
Wickham Posted November 18, 2009 Report Share Posted November 18, 2009 Amazing! I tested my solution in IE7 and Firefox and saw thew links move down to the center leaving the whole height clickable ! I don't know what else you did to change that. However, there are often different solutions and Ben has given you one. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted November 18, 2009 Report Share Posted November 18, 2009 If you assign an element a height (and it is display:block, obviously) and then also assign it a line-height equal to its height, it should center any text within it. Off the top of my head, I'm not sure if it works for images/other elements, but I know it works for text. 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.