Nav Anchor Tag Issue

[kitster79]

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

[Wickham]

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;
}

[kitster79]

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

[falkencreative]

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;"

[kitster79]

Ah, beautiful. Thanks very much guys.

[Wickham]

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.

[falkencreative]

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.