负余量响应液/固定柱 - 导航不起作用

我在这里有一个演示来说明我的问题。负余量响应液/固定柱 - 导航不起作用

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

负余量响应液/固定柱 - 导航不起作用

回答

相关问题