danhodge Posted September 10, 2011 Report Share Posted September 10, 2011 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. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted September 10, 2011 Report Share Posted September 10, 2011 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. Quote Link to comment Share on other sites More sharing options...
danhodge Posted September 10, 2011 Author Report Share Posted September 10, 2011 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... Quote Link to comment Share on other sites More sharing options...
falkencreative Posted September 10, 2011 Report Share Posted September 10, 2011 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. Quote Link to comment Share on other sites More sharing options...
danhodge Posted September 10, 2011 Author Report Share Posted September 10, 2011 Ahh, i see! Thanks a lot, again 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.