Can anyone tell me what CSS adjustments I need to make to center this horizontally, please?

 

#navbar {
width: 100%;
height: auto;
background-color: #56636a;
border: none;
}

#navbar_center {
display: block;
margin: 0 auto;
padding: 0px 10px;
width: 940px;
height: 53px;
background: center #56636a;
}

#navbar_buttons {
position: relative;
float: right;
width: 460px;
height: 53px;
}

#navbar_buttons ul li {
float: right;
list-style: none outside none;
}

#navbar_buttons ul li a, #navbar_buttons ul li a:visited {
display: inline;
height: 36px;
overflow: hidden;
color: #f2f6f8;
font-size: 20px;
position: relative;
padding: 0px 0px 0px 20px;
text-decoration: none;
}

 

HTML:

<div id="navbar">
<div id="navbar_center">
<div id="navbar_buttons">
<ul>
<li><a href="contact.html" title="Contact">Contact</a></li>
<li><a href="bio.html" title="Bio">Bio</a></li>
<li><a href="blog" title="Blog">Blog</a></li>
<li><a href="portfolio.html" title="Portfolio">Portfolio</a></li>
<li><a href="index.html" title="Home">Home</a></li>
</ul>
</div>
<h1 id="logo" title="Chris Ayres Design Home"><a href="http://www.chrisayresdesign.com" title="Chris Ayres Design Home"><img src="images/main/logo.jpg" alt="Chris Ayres Design Home" /></a></h1>
</div>
</div>

 

Thanks!

Well as you have defined only CSS for this, I would create another container around navbar, set the position of this to left:50%, and then set navbar within this new container to left: negative half the width of the div, so if navbar was 500px, set it to left:-250px.

 

This will result in the navbar being centered but bear in mind it will leave the left hand edge of the screen if the window is made too small. If you don't want this to happen, you will need to use Javascript.

Ah. Sorry, I meant vertically aligned. Oops. So that there's equal space above and below the buttons. Thank you!

Your #navbar_center is 53px high and the #navbar_buttons ul li a, #navbar_buttons ul li a:visited style is 36px high with 20px font so you have space to edit.

 

Have you tried line-height or top padding to #navbar_buttons ul li a, #navbar_buttons ul li a:visited {} until it looks right?

 

First of all, add a general style at the top of your styles to make IE and Firefox show the same as they have different default margins and padding:

ul, li { margin: 0; padding: 0; }

 

then edit the li a styles (padding and/or margins need to apply to a block element):-

#navbar_buttons ul li a, #navbar_buttons ul li a:visited {
display: block;/*inline;*/
height: 36px; 
overflow: hidden;
color: #f2f6f8;
font-size: 20px;
position: relative; 
padding: 12px 0 0 20px;/*was 0px 0px 0px 20px;*/
text-decoration: none; 
}

 

Padding 12px for the top may not be quite right.

Yes I had got it working through the top padding, however I thought perhaps this would show inconsistencies through various browsers. Am I mistaken? Because if that method is the best way of going about it, that's good news

however I thought perhaps this would show inconsistencies through various browsers. Am I mistaken?

 

 

Inconsistencies between browsers is dealt with with reset styles (general styles placed first in the stylesheet to make all browsers show the same). There are lots of recommendations for this, the best known is

http://meyerweb.com/eric/tools/css/reset/

 

I don't normally use all those. It's usually enough to make the first style:-

* { margin: 0; padding: 0; }

 

but then it affects every element and you have to add back margin or padding wherever you need it (for instance, p tag paragraphs will not show the usual spacing compared with normal line spacing). In my last post I only showed the reset style for ul and li so that only those elements would be affected.