Центрирование раздвижных дверей

Question

Я быстро составил пример раздвижных дверей , но я включил его в свой заголовок. Формат заголовка должен быть фиксированной высоты заголовка с логотипом слева и раздвижными дверями навигационных кнопок справа. Фон заголовка должен охватывать всю ширину браузера, однако фактический заголовок (то есть логотип заголовка и навигация с правой стороны) должен иметь фиксированную ширину примерно 900 пикселей и по центру.

Есть идеи, как этого добиться? Я пробовал следующее:

<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

Извините, в конце я ответил на свой вопрос. Я не уверен, насколько это правильно. Вот что я придумал:

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

Answer 2

просто пытается понять вашу проблему.

Вы хотите, чтобы это отображалось так ...

---------|--------------------------------------------------|---------
         |                                                  |
         |  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. Но я могу ошибаться, когда-нибудь, не стесняйтесь поправлять меня.

Надеюсь, это поможет.