蓝图CSS网格布局异常

时间:2012-12-16 18:53:46

标签: css html5 blueprint

我正在为我的网站项目调整Blueprint CSS框架,但我注意到蓝图没有遵循它自己的一些规则。我已经在他们的网站上浏览了这些教程,并尝试使用谷歌搜索解决方案,但没有任何工作。

我正在尝试设置这样的页面布局:

-----------------------------------------------------------------------
| Image                     (header)             950px                |
-----------------------------------------------------------------------
|Navbar |             Body (560px)                            | Ad Bar|
|       |                                                     |(190px)|
| 200px |                                                     |       |
|       |                                                     |       |
   ...                       .....                                ...
|       |                                                     |       |
-----------------------------------------------------------------------
|                          (footer)            950px                  |
-----------------------------------------------------------------------

我希望Body的两侧是一个Navbar(带有右边框)和Ad Bar(带有左边框),它的高度会扩展到与Body的高度相匹配(缩放取决于内容的大小)它在里面),一个简单地贴在底部的页脚。到目前为止,标题和正文看起来很完美。但是,Navbar不会跨越身体的高度。此外,广告栏不会显示在正文的右侧,而是包含在最左侧(导航栏的左侧和正文下方)。页脚似乎与网站的其他部分不一致,因为我将其写入居中对齐文本,但它偏离中心(稍微向左)。

这是我的HTML5代码:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />

        <link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection" />
        <link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print" /> 
        <!--[if lt IE 8]>
            <link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection" />
        <![endif]-->

        <!--Import fancy-type plugin. -->
        <link rel="stylesheet" href="blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection" />

        <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />     

        <title>My Web Site Home</title>
    </head>

    <body>
        <div class="container">
            <!------------------------------------------------------->
            <div id="header" class="span-24" style="background: #F68712">
                <h1 id="siteheader"><img src="logo.png" alt="Logo" id="header-image" /></h1>
            </div>
            <div id="sidebar" class="span-5">
                <div class="span-6">
                    <a href="#"><img src="home.png" alt="Home" /></a></li>
                </div>
                <div class="span-6">
                    <a href="#"><img src="newmember.png" alt="Member Sign Up" /></a>
                </div>
                <div class="span-6">
                    <a href="#"><img src="memberlist.png" alt="Member List" /></a>
                </div>
            </div>
            <div id="main" class="span-12 prepend-1 append-1" style="background: #F5F5DC">
                <p>Some text.</p>

                <p>Some more text.</p>

                <p>Even more text!</p>
            </div>
            <div id="adbar" class="span-5 last">
                Ads.
            </div>
            <div id="footer" class="span-24" style="text-align: center">
                <h6 class="alt">Copyright &copy;2012 Joe Schmo.</h6>
            </div>
            <!------------------------------------------------------->
        </div>
    </body>
</html>

我已经按照网站上的所有英语教程,但似乎无法弄清楚为什么它不想合作。我正在使用Microsoft Webmatrix开发我的网站,并且正在IE9和Chrome中预览我的网站。如果有人可以伸出援助之手,我真的欣赏它。

谢谢!

2 个答案:

答案 0 :(得分:0)

<hr style="clear:both; width:100%" />

在页脚div之前尝试这个

答案 1 :(得分:0)

对于侧边栏,你有一个span-5类,但它包含3个span-6 div。如果删除三个菜单div的class属性,因为我假设您希望它们是包含div的全宽,这是否可以解决您的问题?