五部分顶部布局

时间:2011-07-07 21:09:57

标签: css html

我正在尝试开发一个适用于任何浏览器的5部分顶部布局。它的5部分是因为你有中心菜单,跨越1024.

然后你有一个菜单的左侧和右侧有一些非重复的图像,这些图像会重复进入我想要无限的重复图像。

事实证明这很难,我可能已经忘记了它可能是不可能的......

我所做的就是如此接近我几乎可以尝到它。如果你能查看我的代码并告诉我“right_side”和它的宽度是怎么回事 - 它会导致滚动条出现严重问题。

我正在谈论的图片: http://i.imgur.com/xertW.jpg

以下是代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style>
            body{
                margin:0px;
                padding:0px;
            }
            .left_stretch{
                background-color:red;
                z-index:-10;
                position:absolute;
                top:0px;
                left:0px;
                width:50%;
                height:100%;
            }
            .left_side{
                background-color:blue;
                z-index:-5;
                position:relative;
                top:0px;
                right:512px;
                width:100%;
                height:100%;
            }
            .center{
                background-color:green;
                height:500px;
                width:1024px;
                margin-left:auto;
                margin-right:auto;
            }
            .right_side{
                background-color:grey;
                z-index:50;
                position:relative;
                top:0px;
                left:512px;
                width:100%;
                height:100%;
            }
            .right_stretch{
                background-color:orange;
                z-index:-10;
                position:absolute;
                top:0px;
                right:0px;
                width:50%;
                height:100%;
            }
        </style>
    </head>
    <body>
        <div class="left_stretch">
            <div class="left_side"></div>
        </div>
        <div class="center"></div>
        <div class="right_stretch">
            <div class="right_side"></div>
        </div>
    </body>
</html>

然后我当然担心ie 7和ie 6搞砸了......但我只想先解决这个问题......

有任何提示吗?

1 个答案:

答案 0 :(得分:0)

意识到我可以编写你的代码,所以我测试了它。

你的<div class="right_side"></div>导致它......它只是基本上悬挂在那里......创造空间。

我不确定为什么结构是这样的,所以即使修复它也不会给出任何暗示。 ..没有你想快速解决..这是删除该元素:D