html - 带标题和菜单的整页

Question

我正在尝试为这个特定布局做一个 css(使用 Twitter Bootstrap)，我能够生成标题但不能生成完整页面版本。我想要实现的是这样的 http://jsfiddle.net/9gwZf/在内容的几个顶部像素之后，菜单和标题(全宽)将位于何处。我将如何实现这种布局？请帮帮我。

HTML

<div class="container">

    <div class="main-header-wrapper">
        <ul class="menu-list">
            <li><a href="testa">HOME</a> </li> 
            <li><a href="testa">ABOUT US</a></li>   
            <li><a href="testa">Help</a></li>   
            <li><a href="testa">Menu 4</a></li> 
            <li><a href="testa">Juf</a></li>
            <li><a href="testa">Kish</a></li>               
        </ul>
        <div class="header-center-wrap">
            <img src="img/contact.PNG" />
        </div>
    </div>

    <div class="row-fluid">

        <!-- Bigger content -->
        <div class="span8">
            <!--Body content-->
        </div>

        <!-- Sidebar (Right) -->
        <div class="span4">
            <!--Sidebar content-->
            <h5>For inquiries contact us, contact us at</h5>
            <table style="width: 300px;">
                <tr>
                    <td>OFFICE ADDRESS</td>
                    <td>100F Building Name</td>
                </tr>
                <tr>
                    <td>INFORMATION</td>
                    <td>+63 2 999 99999</td>
                </tr>
                <tr>
                    <td>FAX</td>
                    <td>+63 2 999999</td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>WEBSITE</td>
                    <td>www.website.com</td>
                </tr>
            </table>
        </div>

    </div>
</div>

CSS

@font-face{
    font-family:PT Sans Narrow;
    src:url('PT Sans Narrow.ttf');
}

body {
    background: url('../img/bg.png');
    font-size: 11px;
    font-family:'PT Sans Narrow';
}

.container {
    width: 1024px;
}

.main-header-wrapper { 
    position: relative; 
    width: 100%; 
    display: block;
    margin-left: 0;
    margin-right: 0;
    margin-top: 40px;
    overflow: hidden;
    padding: 0;
    float: left;
}

.header-center-wrap { 
    width: 1284px; 
    height: 223px; 
    margin: 0;
    background: #fff; 
    color: #fff; 
    font-weight: bold; 
}
.row-fluid {
    margin-top: 20px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border:1px solid #eee;
    background: #fff;
    box-shadow: 3px 3px 1px #888888;
}
ul.menu-list {
    position:relative;
    height:30px;
    background:#000;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    background: url('../img/menu_strip.jpg') repeat-x;
}

ul.menu-list li {
    margin:0;
    height:30px;
    font-size:10px;
    text-align:center;
    color:#fff;
    width:auto;
    float:left;
    cursor:pointer;
    font-weight:700;
}

ul.menu-list li a,ul.menu-list li a:link,ul.menu-list li a:visited,ul.menu-list li.active {
    text-align:center;
    color:#fff;
    font-weight:700;
    font-size:10px;
    text-decoration:none;
    padding: 7px 4px 10px;
    display:block;
    height:29px;
    text-transform: uppercase;
}

ul.menu-list li:hover {
    background:#151515;
}
h5 {
    color: navy;
}

Answer 1

将导航条从容器中拉出，设置好宽度，单独定位。