Sliding Doors Centering

Question

我已經很快編制了一個sliding doors example，但我將它合併到我的標題中。標題的格式應該是一個固定高度的標題，左側有一個徽標，右側是滑動門導航按鈕。標題的背景應該跨越瀏覽器的整個寬度，但是實際的標題（即右側的標題標誌和導航）應該具有大約900px的固定寬度並居中。

有關如何實現此目的的任何想法？我已經試過如下：

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

和下面的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

只是想了解你的問題。

你希望它顯示像這樣...

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

或者這樣......

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

如果你是第一個例子後，那麼這應該是與很容易下面的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; 
} 

如果你想它顯示像第二個例子中，你可能需要手動兩中心標識和導航，因爲我不確定是否可以在CSS跨瀏覽器中這樣做。但是，我可能錯了某些人可以隨時糾正我。

希望它有幫助。

Answer 2

對不起，我最終回答了我自己的問題。我不確定它有多正確。這是我想出了：

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

下面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; 
}