我刚刚开始为自己开发一个爱好网站,并试图使用
960 css grid system在屏幕上布局我的HTML元素.
我得到了基本的想法,刚刚实现了一个骨架网站here on my server
到目前为止我已经有几个问题：
<div class="container_12">
<div class="grid_12">
<div id='top_bar' class='grid_insider'><!-- start of #top_bar -->
<ul id='top_menu' class='grid_5'><!-- start of #top_menu -->
<li>Home</li>
<li>Fake1</li>
<li>Fake2</li>
<li>Fake3</li>
</ul><!-- end of #top_menu -->
<ul id='user_panel' class='grid_2 prefix_4'><!-- start of #user_panel -->
<li>log in</li>
<li>faq</li>
</ul><!-- end of #user_panel -->
</div><!-- end of #top_bar -->
</div>
<div class="clear"></div>
<div id='title_bar' class="grid_12">
<h1 id="logo" align='center'>logo,TITLE and SLOGAN all go here!</h1>
</div><!-- end .grid_1 -->
<div class="clear"></div>
我使用的是基于网格12的模板,因此每个“行”上的“网格”总数应为12.但是,我只能将两个元素放在相同的“行”上,网格总数加起来为11,但不是12.如果我将#user_panel的类更改为“grid_3 prefix4”,那么实际上将这个元素放到下一行,这会打破一切.
另一件事是,尽管顶级元素(如top_bar和title_bar)位于正确的位置(您可以确认使用方便的Firefox插件gridfox),确切的宽度为940px,嵌套网格不在位置(有点远离设计的位置).
我是这个css网格系统的新手,是否有更好的方式来管理嵌套元素？我必须说一些960.gs上的示例网站是相当惊人的看到:)
感谢任何建议提前！
更新信息
好的,根据下面的答案,我估计在调试嵌套网格时,仍然可以使用彩色边框,有一个adhoc的方法来“欺骗”：
.grid_insider
{
border : 1px solid red;
margin : -1px; /* this will stop the element from 'expanding' its space */
}
解决方法
不确定如果你还没有意识到,但框架确实为嵌套元素提供了一种方法.
/* `Grid >> Children (Alpha ~ First,Omega ~ Last)
------------------------------------------------*/
.alpha {
margin-left: 0;
}
.omega {
margin-right: 0;
}
这将覆盖它们赋予所有网格元素的边距,从而允许边上的元素靠在其容器的两侧.
你需要做的是给左边的菜单栏的alpha类,正确的一个是omega类.然后,您将必须删除所有添加到这两个元素及其容器的边框.这是因为CSS浮动是非常精确的,如果使元素大于定义的框架,将会中断.
如果你需要添加边框,你将不得不添加一些额外的样式来覆盖它们,并为它们提供宽度为两个像素(每边边框一个),比框架中定义的更小.
