网格960 - 粘贴标头

我使用960gs，我希望我的标头&导航栏粘在顶部。我试图坚持div的使用位置：固定。结果：整个960网格混乱了。网格960 - 粘贴标头

<!-- Header--> 

<div class="container_12 stick"> 
<div class="grid_6 alpha "> 
... 
</div> 

<div class="grid_6 omega"> 
... 
</div> 

</div> 

<!-- NavBar-> 
<div id="nav" class="container_12 stick"> 

<div class="grid_2 alpha prefix_4" > 
    <h1><a href="#whoami">...</a></h1> 
</div> 

<div class="grid_2 button textAlignC"> 
    <h1><a href="#works">...</a></h1> 
</div> 

<div class="grid_2 button textAlignC"> 
    <h1><a href="#hobbies">...</a></h1> 
</div> 

<div class="grid_2 omega button textAlignC"> 
    <h1><a href="#contacts">...</a></h1> 
</div> 

</div> 

.stick{ 
position:fixed;  
}

想法？

来源

2011-10-11 danieltorres

使用包装像这样：

<html> 
    <head>stuff</head> 
    <body> 

     <div id="nav"> 
      <div class="container col_12"> 
      </div> 
     </div> 
     <div id="content"> 
      <div class="container col_12"> 
      </div> 
     </div> 

    </body> 
</html>

，并在div＃NAV固定的顶部，它的工作原理。你可能想给Div＃内容一个边缘的推动与导航栏的高度更好的滚动效果..记住这不适用于手持设备，所以如果需要使用框架

来源

2011-10-11 22:30:47

我申请的职位：固定到导航，使用你给我的结构。依然混乱网格。 nav内的内容浮动。 – danieltorres

在容器'代码'中最后一个浮动元素之后使用网格的清除类（

）'代码' –

我已经尝试清除。只是无法理解为什么如果浮动当我激活位置：固定。 – danieltorres

这个jsfiddle显示它应该如何工作... http://jsfiddle.net/s5syC/

来源

2011-10-12 07:45:08

如果您使用960gs框架尝试使用该代码，则该代码无效。 – danieltorres

978或960网格css之间没有真正的区别..只是寻找容器的类命名和属性的差异..并确保您的cols数到适当的宽度..应该没有额外的余量，填充或col元素的边界，除非您也覆盖宽度 –

在标头上添加z-index:-length-;会有所帮助，但我试图找到更好的解决方案。

来源

2012-08-08 06:13:22 johnp

网格960 - 粘贴标头

回答

相关问题