與標題和菜單

我試圖做這個特殊佈局（與Twitter的引導）一個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; 
}

來源

2013-10-04 aNgeLyN omar

有趣的jsfiddle。 –

你可以在這裏鏈接的圖像此：P –

你本可以直接給您的圖片鏈接和http://jsfiddle.net/vishalkin/9gwZf/1/ – vishalkin

拉導航欄出容器，其具有一組寬度和它單獨位置的。

來源

2013-10-04 18:36:51 Greg

你只需要重新安排你的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>

來源

2013-10-04 18:59:40

還是一樣。 –

然後，我們需要看到它在行動：一個或的jsfiddle活動鏈接請。 –

與標題和菜單

回答

相關問題