当前位置： 文江博客话题详情

960 gs，全宽背景

发布于 2024-08-15 06:39:17 字数 2297 浏览 2 评论 0原文

我正在尝试实现我在 Photoshop 中创建的设计。我想使用16列960 GS，但问题是我只想要960宽度约束的内容。

我有 4 个不同区域的背景。页眉、内容区域、顶部页脚（即链接）以及底部页脚（其中包含版权）。

页面的上半部分工作正常。背景显示，文本位于正确的位置。问题出在页脚上。如果内容区域中的数据超出内容区域的最小高度，则顶部页脚中的链接将被向下推，但背景保持静止。我怀疑这是因为内容都是浮动的，并且当内容展开时不会推动背景 div。

如何在使用 960 gs 时拥有全宽背景，并使其在内容展开时页脚向下滑动？

这是我的网站的基本包装。我意识到这可能不适合我想做的事情。

<body>
  <div id="header">
    <div class="container_16">

    </div>
  </div>
  <div id="content">
    <div class="container_16">

    </div>
  </div>
  <div id="footer-top">
    <div class="container_16">

    </div>
  </div>
  <div id="copyright-footer">
    <div class="container_16">

    </div>
  </div>
</body>

960 GS css 在这里： http ://www.spry-soft.com/grids/grid.css?column_width=40&column_amount=16&gutter_width=20

我的 CSS - 我省略了与特定内容有关的元素，如这只是为了获得正确的布局：

html, body
{
    height: 100%;
}

body
{
    color: #f7f3e7;
    margin:0; 
    padding:0;
    background-color: #f7f3e7;
    line-height: 1.2em;
    font-size: 0.8em;
    font-family: Verdana, Arial, Sans-Serif;
}

#header
{ 
    height: 100px; 
    margin:0; 
    padding:0; 
    background: #666666 url(content/images/Home-Header-Bg.jpg) repeat-x; 
}

#content
{
    min-height: 550px;
    /*min-height: 546px;*/
    margin:0; 
    padding:0; 
    background: #f7f3e7 url(content/images/Home-Content-Bg.jpg) repeat-x top;
}

#top-footer
{
    font-size: .8em;
    min-height: 188px;
    margin:0; 
    padding: 6px 0 6px 0; 
    background: #a67c52 url(content/images/Top-Footer-Bg.jpg) repeat-x top;
}

#copyright-footer
{
    height: 32px;
    vertical-align: middle;
    font-size: 0.8em;
    line-height: 32px;
    margin:0; 
    padding:0; 
    background: #976f46 url(content/images/Copyright-Footer-Bg.jpg) repeat-x;
}

标题、内容、页脚顶部和版权页脚都设置了背景和高度或最小高度。

我真正想要的是标题设置为 100px 高。版权页脚的高度为 42 像素。顶部页脚高度设置为 200 像素。如果内容区域足够短以至于页脚不会接触页面底部，我希望版权页脚的底部始终位于页面底部。如果内容区域扩大，我希望页脚向下滑动。我希望所有部分的背景都是 100% - 也就是说，无论浏览器有多大，但我希望我的内容受 960 网格系统约束。

有什么建议吗？

编辑：根据要求添加CSS

原文

I'm trying to implement a design I created in photoshop. I want to use the 16 column 960 GS, but the problem is that I only want the content bound by the 960 width.

I have backgrounds for 4 seperate areas. Header, the content area, a top footer that is links, and the bottom footer with the copyright in it.

The top half of the page works fine. The backgrounds show, the text is in the right place. The problem comes with the footer. If the data in the content area expands beyond the minimum height for the content area, the links in the top footer are pushed down, but the backgrounds remain stationary. I suspect this is because the content is all floating and doesn't push the background divs when the content expands.

How do I have a background that is full width while using 960 gs and make it so the footer slides down when the content expands?

Here's the basic wrapper for my site. I realize this may not work for what I want to do.

<body>
  <div id="header">
    <div class="container_16">

    </div>
  </div>
  <div id="content">
    <div class="container_16">

    </div>
  </div>
  <div id="footer-top">
    <div class="container_16">

    </div>
  </div>
  <div id="copyright-footer">
    <div class="container_16">

    </div>
  </div>
</body>

the 960 GS css is here: http://www.spry-soft.com/grids/grid.css?column_width=40&column_amount=16&gutter_width=20

My CSS - I've ommited the elements that have to do with specific content, as this is just about getting the layout right:

html, body
{
    height: 100%;
}

body
{
    color: #f7f3e7;
    margin:0; 
    padding:0;
    background-color: #f7f3e7;
    line-height: 1.2em;
    font-size: 0.8em;
    font-family: Verdana, Arial, Sans-Serif;
}

#header
{ 
    height: 100px; 
    margin:0; 
    padding:0; 
    background: #666666 url(content/images/Home-Header-Bg.jpg) repeat-x; 
}

#content
{
    min-height: 550px;
    /*min-height: 546px;*/
    margin:0; 
    padding:0; 
    background: #f7f3e7 url(content/images/Home-Content-Bg.jpg) repeat-x top;
}

#top-footer
{
    font-size: .8em;
    min-height: 188px;
    margin:0; 
    padding: 6px 0 6px 0; 
    background: #a67c52 url(content/images/Top-Footer-Bg.jpg) repeat-x top;
}

#copyright-footer
{
    height: 32px;
    vertical-align: middle;
    font-size: 0.8em;
    line-height: 32px;
    margin:0; 
    padding:0; 
    background: #976f46 url(content/images/Copyright-Footer-Bg.jpg) repeat-x;
}

header, content, footer-top, and copyright-footer all have the background set and height or minimumheight.

Really what I want is the header set at 100px tall. The copyright footer is a set 42px tall. The top footer is set at 200 px tall. I want the bottom of the copyright footer to always rest on the bottom of the page if the content area is short enough that the footer wouldn't touch the bottom of the page. If the content area expands, I want the footer to slide down. I want the backgrounds for all sections to be 100% - that is, however wide the browser is, but I want my content bound by the 960 grid system.

Any suggestions?

EDIT: added the CSS as requested

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

旧人九事 2024-08-22 06:39:17

我将创建一个名为“content”的 div，其中包含其他 div 并使其他 div 的位置相对。 “内容”div 将具有适合您想要执行的操作的宽度。此外，对于每一列，您都可以使用“float”CSS 属性。

I would create a div called 'content' that would contain the other divs and make the other divs' position relative. The 'content' div would have the appropriate width for what you want to do. Also, for each column you can use the 'float' css property.

回复 原文
梦明 2024-08-22 06:39:17

只需用

标签包装容器类并设置它们的样式即可。 请记住在容器中的每一“行”后面添加.clear div（即使您只有一个“行”），否则它将无法正常工作。

<div id="container">
  <div class="container_16">
    <div class="grid_16"><h1>Hello, World!</h1></div>
    <div class="clear"></div> <!-- Important! -->
  </div>
</div>

Just wrap the container classes with <div> tags and style those. Remember to add .clear divs after every "row" in the containers (even if you have only one "row"), or it will not work properly.

<div id="container">
  <div class="container_16">
    <div class="grid_16"><h1>Hello, World!</h1></div>
    <div class="clear"></div> <!-- Important! -->
  </div>
</div>
回复 原文
素罗衫 2024-08-22 06:39:17

我想通了。我需要让页脚浮动。

标记：

<body marginwidth="0" marginheight="0 leftmargin="0" topmargin="0">
    <div id="page-wrapper">
    <div id="header" class="container_full">
        <div class="container_16">
        <div id="logo" class="grid_4 alpha"><a href="/"><img src="content/images/logo-beta.png" /></a></div>

        <div class="grid_10 push_0">
        <ul id="navigation" class="clearfix-header">
            <li><a class="header-link" href="#">About</a>
                <span class="sub-navigation">
                    <a class="sub-link" href="#">Info</a>, <a class="sub-link" href="#">Terms</a></li>
                </span>
            </li>
            <li><a class="header-link" href="#">Account</a>
                <span class="sub-navigation">
                    <a class="sub-link" href="#">Sign In</a>, <a class="sub-link" href="#">Sign Up</a>
                </span>
            </li>
        </ul>
        </div>

        </div>
    </div>

    <div id="content" class="container_full">
        <div class="container_16">

            <div id="page-content" class="grid_16">Page Content</div>

        </div>
    </div>

    <div id="footer">
    <div id="top-footer">
        <div class="container_16">
            <div class="grid_3">
                <h4>Navigation</h4>
                <ul>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                </ul>
            </div>
            <div class="grid_3">
                <h4>Navigation</h4>
                <ul>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                </ul>
            </div>
            <div class="grid_7">
                Big content area
            </div>
            <div class="grid_3">
                <h4>Boring Stuff</h4>
                <ul>
                <li><a href="#">Terms of Use</a></li>
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">Legal Mumbo-jumbo</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div id="copyright-footer">
        <div class="container_16">
            <div class="grid_16">
                Copyright statement
            </div>
        </div>
    </div>
    </div>
    </div>
</body>

CSS：

#footer
{
    width:100%;
    float: left;
    height: 232px;
    position: relative;
    clear:both;
}

#top-footer
{
    width:100%;
    font-size: .8em;
    height: 200px;
    margin:0; 
    padding: 6px 0 6px 0; 
    background: #a67c52 url(content/images/Top-Footer-Bg.jpg) repeat-x top;
}

#copyright-footer
{
    width:100%;
    height: 32px;
    vertical-align: middle;
    font-size: 0.8em;
    line-height: 32px;
    margin:0; 
    padding:0; 
    background: #976f46 url(content/images/Copyright-Footer-Bg.jpg) repeat-x;
}

I figured it out. I needed to make my footer float.

The Markup:

<body marginwidth="0" marginheight="0 leftmargin="0" topmargin="0">
    <div id="page-wrapper">
    <div id="header" class="container_full">
        <div class="container_16">
        <div id="logo" class="grid_4 alpha"><a href="/"><img src="content/images/logo-beta.png" /></a></div>

        <div class="grid_10 push_0">
        <ul id="navigation" class="clearfix-header">
            <li><a class="header-link" href="#">About</a>
                <span class="sub-navigation">
                    <a class="sub-link" href="#">Info</a>, <a class="sub-link" href="#">Terms</a></li>
                </span>
            </li>
            <li><a class="header-link" href="#">Account</a>
                <span class="sub-navigation">
                    <a class="sub-link" href="#">Sign In</a>, <a class="sub-link" href="#">Sign Up</a>
                </span>
            </li>
        </ul>
        </div>

        </div>
    </div>

    <div id="content" class="container_full">
        <div class="container_16">

            <div id="page-content" class="grid_16">Page Content</div>

        </div>
    </div>

    <div id="footer">
    <div id="top-footer">
        <div class="container_16">
            <div class="grid_3">
                <h4>Navigation</h4>
                <ul>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                </ul>
            </div>
            <div class="grid_3">
                <h4>Navigation</h4>
                <ul>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                <li><a href="#">Sample Link</a></li>
                </ul>
            </div>
            <div class="grid_7">
                Big content area
            </div>
            <div class="grid_3">
                <h4>Boring Stuff</h4>
                <ul>
                <li><a href="#">Terms of Use</a></li>
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">Legal Mumbo-jumbo</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div id="copyright-footer">
        <div class="container_16">
            <div class="grid_16">
                Copyright statement
            </div>
        </div>
    </div>
    </div>
    </div>
</body>

The CSS:

#footer
{
    width:100%;
    float: left;
    height: 232px;
    position: relative;
    clear:both;
}

#top-footer
{
    width:100%;
    font-size: .8em;
    height: 200px;
    margin:0; 
    padding: 6px 0 6px 0; 
    background: #a67c52 url(content/images/Top-Footer-Bg.jpg) repeat-x top;
}

#copyright-footer
{
    width:100%;
    height: 32px;
    vertical-align: middle;
    font-size: 0.8em;
    line-height: 32px;
    margin:0; 
    padding:0; 
    background: #976f46 url(content/images/Copyright-Footer-Bg.jpg) repeat-x;
}
回复 原文
~没有更多了~

关于作者

半城柳色半声笛

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

不再见

文章 0 评论 0

真是无聊啊

文章 0 评论 0

樱娆

文章 0 评论 0

浅语花开

文章 0 评论 0

烛光

文章 0 评论 0

绻影浮沉

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文