負餘量響應液/固定柱 - 導航不起作用

我在這裏有一個演示來說明我的問題。負餘量響應液/固定柱 - 導航不起作用

http://www.ttmt.org.uk/forum/

這是一個簡單響應3列布局，其中兩個導航列（左）是固定的寬度和內容列（右）是流體。

我已經這樣做了使用負右邊界上的內容柱，固定寬度的列滑入。

頁面大小調整後，導航欄應移動到內容上方。

我的問題是固定寬度列中的鏈接不起作用。當頁面調整大小並且導航欄移動到內容上方時，導航欄再次運行。

我試着把固定寬度列的html放在內容下面，導航再次運行但是當窗口被調整大小時，導航低於內容。

http://www.ttmt.org.uk/forum/index1.html

我假設資產淨值不工作，因爲它裏面的內容，但我怎麼解決它。

<!DOCTYPE html> 
    <html> 
     <meta charset="UTF-8"> 
     <title>Title of the document</title> 
     <meta name="description" content=""> 
     <meta name="keywords" content=""> 
     <meta name="robots" content=""> 

     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 

     <link rel="stylesheet" href="css/master.css" /> 

     <!--[if lt IE 9]> 
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
     <![endif]--> 

     <style type="text/css"> 
     *{ 
      margin:0; 
      padding:0; 
     } 
     li{ 
      list-style:none; 
     } 
     body{ 
      background:#f5f5f3 url('../images/bg.png') 0 0 repeat-x; 
      font:10px sans-serif; 
      font-size:1em; 
     } 
     a{ 
      color:black; 
      text-decoration:none; 
     } 
     #pageWrap{ 
      max-width:1000px; 
      margin:0 auto; 
      border-left: 20px transparent solid; 
      border-right: 20px transparent solid; 
     } 
     /*----------------- 
     Structure 
     -------------------*/ 

     header { 
      height:50px; 
     } 

     #rightCol{ 
      float:right; 
      width:100%; 
      margin-left:-386px; 
     } 

     #rightCol #rightCol-inner{ 
      margin-left:386px; 
      background:#fff; 
      padding:20px; 
     } 

     #leftCol, 
     #middleCol{ 
      background:#eee; 
      float:left; 
     } 

     #leftCol{ 
      width:141px; 
      margin:0 10px 0 0; 
     } 
     #middleCol{ 
      width:225px; 
     } 

     #leftCol nav, 
     #middleCol ul{ 
      padding:10px; 
     } 

     #leftCol nav li, 
     #middleCol ul li{ 
      border-top:1px solid black; 
     } 
     #leftCol li a, 
     #middleCol ul li a{ 
      display:block; 
      padding:10px 12px; 
      font-size:1em; 
      margin:4px 0; 
      color:#555; 
     } 
     #leftCol li a:hover, 
     #middleCol li a:hover{ 
      background:red; 
     } 


     /*-------------------- 
      Media Queries 
     ---------------------*/ 

     @media only screen and (max-width : 780px) { 

      #rightCol{ 
       float:none; 
       width:100%; 
       margin:0; 
      } 

      #rightCol #rightCol-inner{ 
       margin:0; 
       background:#fff; 
      } 

      #leftCol, 
      #middleCol{ 
       float:none; 
       display:block; 
       margin:10px 0; 
       width:100%; 
      } 

      #leftCol nav{ 
       float:none; 
      } 
      #leftCol nav li, 
      #middleCol ul li{ 
      display:inline-block; 
      border:0; 
      } 

      #leftCol li a, 
      #middleCol li a{ 
       display:inline-block; 
       padding:10px 12px; 
       border-right: 1px solid #999; 
       border-top:0; 
       border-bottom:0; 

      } 
     } 

     </style> 

     </head> 

    <body> 

     <div id="pageWrap"> 
      <header> 
      </header>  

      <div id="pageContent" class="group"> 

      <aside id="leftCol"> 
       <nav> 
       <ul> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
       </ul> 
       </nav> 
      </aside><!--leftCol--> 

      <aside id="middleCol"> 
       <ul id="second-nav"> 
       <li><a href="#">Link</a></li> 
       <li><a href="#">Link</a></li> 
       <li><a href="#">Link</a></li> 
       <li><a href="#">Link</a></li> 
       <li><a href="#">Link</a></li> 
       <li><a href="#">Link</a></li> 
       <li><a href="#">Link</a></li> 
       <li><a href="#">Link</a></li> 
       <li><a href="#">Link</a></li> 
       <li><a href="#">Link</a></li> 
       <li><a href="#">Link</a></li> 
       <li><a href="#">Link</a></li> 
       </ul> 
      </aside><!--middleCol--> 



      <section id="rightCol"> 
       <div id="rightCol-inner"> 

       <div class="serviceText"> 
        <p> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
        </p> 
        <p> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
        </p> 

        <p> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
        </p> 

       </div> 

       </div><!-- #rightCol-inner --> 

      </section><!--rightCol--> 

      </div><!-- pageContent--> 

     </div><!-- #pageWrap --> 


    </body> 

    </html>

來源

2013-02-27 ttmt

#rightCol { 
    position: relative; 
    z-index: -1; 
}

注意IE < 9可以需要更多的說服力。

來源

2013-02-27 16:11:58 isherwood

伊舍伍德，我在我的問題，我想這說，它的工作但隨後的導航下降時，窗口大小下面的內容 - http://www.ttmt.org.uk/forum/index1.html – ttmt 2013-02-27 16:19:23

啊。我誤解了。 – isherwood 2013-02-27 16:20:40

答覆已更新。 – isherwood 2013-02-27 16:28:02

負餘量響應液/固定柱 - 導航不起作用

回答

相關問題