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

将导航栏从容器中拉出，容器具有设定的宽度并单独定位。

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>

带标题和菜单的整页

2 个答案: