Vertical align?

[danhodge]

Hello again

 

I have started another attempt at designing my homepage (i have 2 ideas going, one with Joomla and one hand coded), and i have hit an issue with my navbar...

 

http://dhdesign.net63.net/ - I would like the text to be centered in the middle of the navbar, however all of the techniques i have tried aren't working (margin-top, vertical-align, padding), as they move the background color with them.

 

Is there any way i can keep the background color in the same place, whilst moving the text down?

 

Thanks a lot,

Danny

 

Oh, and i apologize if the code is a bit odd around the area of the navbar on the link, it is the result of following 2 or 3 google tutorials i found that didn't work.

[falkencreative]

By default, link elements display inline, meaning that they don't span all the way across the page, and they don't cause a line break between elements (like a div, for example). You can learn more about this here: http://www3.w3schools.com/cssref/pr_class_display.asp

 

Inline elements can't have margins or padding added to them, which I believe is your problem. If you change your navigation's <a> elements to use display:block, you can then add top padding to move the link down into the correct position. Also, remember to reduce the height equal to the top padding.

[danhodge]

I have already added display:block, and the padding/margins do work, but they take the background color with them, which is the problem im having, as the color falls out of the navbar. Sorry if that wasn't clear...

[falkencreative]

Then you need to reduce the height to compensate, as I said in my comment. The total height of the element is determined by height + padding + margin + border.

[danhodge]

Ahh, i see! Thanks a lot, again