Jump to content
Stef's Coding Community
Sign in to follow this  
danhodge

Vertical align?

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...