헤더 및 메뉴가있는 전체 페이지

Question

이 특정 레이아웃 (트위터 부트 스트랩 포함)에 CSS를 사용하려고하는데 전체 페이지 버전이 아닌 헤더를 생성 할 수있었습니다. 내가 성취하고자하는 것은 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

설정된 폭과 별도로 위치를 갖는 용기 밖으로 탐색 줄을 당기.

Answer 2

당신은 다시 배열하여 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> <!-- ends container width --> 

    <div class="header-center-wrap"> <! -- auto 100% wide --> 
     <img src="img/contact.PNG" /> 
    </div> 

<div class="container"> <!-re-establish container width --> 
    <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>