Sliding Doors Centering

Question

I've quickly made up a sliding doors example but I'm incorporating it into my header. The format of the header should be a fixed height header with a logo on the left and the sliding doors navigation buttons on the right. The background of the header should span the entire width of the browser, however the actual header (that is, the header logo and navigation on the right hand side) should be of a fixed width of roughly 900px and centred.

Any ideas on how to achieve this? I've tried the following:

<div id="header-outer">
 <div id="header-container">
  <a id="logo" href="<?php echo get_option('home'); ?>/"></a>

  <div id="header-nav">
   <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
   </ul>
  </div>
 </div>
</div>

and the following CSS:

div#header-nav {
    float:left;
    width:100%;
    background:rgb(33,33,33);
    font-size:90%;
    line-height:normal;
    margin-top:90px;
}

div#header-nav ul {
    margin:0;
    padding:0;
    list-style:none; 
}

div#header-nav ul li {
    float:left;
    margin:0 2px 0 2px;
    padding:0 0 0 4px;
    background: url('images/tab_left.png') no-repeat left top;
}

div#header-nav a {
    display:block;
    background: url('images/tab_right.png') no-repeat right top;
    padding:5px 10px 4px 6px;
    text-decoration:none;
    color:#333;
}

div#header-outer {
    background: rgb(33,33,33);
    height:100px;
    display:block;
    clear:both;
}

div#header-container {
    text-align:center;
    margin:0 auto;
    width:900px;
    padding:0;
}

Answer 1

Hi, just trying to understand your issue.

Do you want it to display like this...

---------|--------------------------------------------------|---------
         |                                                  |
         |  Logo                                Navigation  |
         |                                                  |
---------|--------------------------------------------------|---------

Or like this...

---------|--------------------------------------------------|---------
         |                                                  |
         |                 Logo  Navigation                 |
         |                                                  |
---------|--------------------------------------------------|---------

If you're after the first example then that should be quite easy with the following css...

#logo {
    float: left; /* floats logo to left */
}

div#header-nav {
    float:right; /* had to remove width of 100% so nav can accept float */
    background:rgb(33,33,33);
    font-size:90%;
    line-height:normal;
    margin-top:90px;
}

div#header-nav ul {
    margin:0;
    padding:0;
    list-style:none; 
}

div#header-nav ul li {
    float:left;
    margin:0 2px 0 2px;
    padding:0 0 0 4px;
    background: url('http://kieransenior.co.uk/images/tab_left.png') no-repeat left top;
}

div#header-nav a {
    display:block;
    background: url('http://kieransenior.co.uk/images/tab_right.png') no-repeat right top;
    padding:5px 10px 4px 6px;
    text-decoration:none;
    color:#333;
}

div#header-outer {
    background: rgb(33,33,33);
    height:100px;
    display:block;
    clear:both;
}

div#header-container {
    text-align:center;
    margin:0 auto;
    width:900px;
    padding:0;
}

If you'd like it to display like the second example you might have to manually center both the logo and navigation as I'm not sure if it's possible to so this with in CSS cross browser. But I could be wrong someoene feel free to correct me.

Hope it helps.

Answer 2

Sorry, I had answered my own question in the end. I'm not sure how correct it is though. This is what I came up with:

    <div id="header-container">
     <div id="header">
      <div id="header-logo"><a href="<?php echo get_option('home'); ?>/"><img src="<?php bloginfo('stylesheet_directory') ?>/images/logo.png" /></a></div>
      <ul>
       <li id="active"><a href="#">Home</a></li>
       <li><a href="#">Projects</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Portfolio</a></li>
       <li><a href="#">Blog</a></li>
       <li><a href="#">Contact</a></li>
      </ul>
     </div>
    </div>

And the following CSS:

div#header {
    float:right;
    width:100%;
    font-size:85%;
    line-height:normal;
    background: rgb(33,33,34) url('images/top_bg.png') repeat-x;
}

div#header-logo {
    margin:0 auto;
    width:900px;
}

div#header-logo a {
    float:left; 
}

img {
    border:0;
    float:left;
}

div#header ul {
    margin:0 auto;
    width:900px;
    padding:60px 0 0 0;
    float:right;
    list-style:none; 
}

div#header ul li {
    float:left;
    margin:0 2px 0 2px;
    padding:0 0 0 4px;

}

div#header ul li a {
    display:block;
    font-weight:bold;
    padding:5px 10px 7px 6px;
    text-decoration:none;
    color:#ddd;
    margin:0;
}

div#header ul li#active {

    background: url('images/tab_left.png') no-repeat left top;
}

div#header ul li#active a {
    color:#333;
    background: url('images/tab_right.png') no-repeat right top;
}

div#header ul li a:hover {
    color:#fff; 
    background: url('images/nav_back.png') no-repeat center bottom;
}

div#header-container {
    background: rgb(33,33,33);
    margin:0;
    padding:0;
    width:100%;
    height:40px;
}