Question

我正在使用此网站：http://www.justaddsolutions.com/SampleSite/

主要区域是1024px宽并始终居中，这是实现的。但是，当浏览器窗口宽度超过1024px时，我的客户端希望黄色和红色条带延伸到浏览器窗口的受尊重边缘（黄色到左边，红色到右边）。

我想用基于CSS的液体 - 固定 - 液体布局解决它，其中心部分居中，侧面部分具有相等的液体宽度。但我无法自己解决这个问题，也无法在任何地方找到如何做到这一点。

我确实在mathewjamestaylor液体布局网站上找到了液体固定液体布局，但是当浏览器窗口调整到小尺寸时，它在IE8中中断。

然后我想通过在我的标题中使用3列表并使用background-image和repeat-x设置我的td元素来实现此目的，但这在Chrome和Safari中似乎效果不佳。

我们非常感谢您对此问题的任何帮助。

Answer 1

我相信你过分思考这一点。由于您使用标题元素的绝对定位，我只需使用背景图像作为body元素（非重复）。基本上它会像你当前的标志一样，但颜色从每一侧延伸出来。

由于它只是纯色，你可以使它具有任意大的宽度（比如9000像素），几乎适合任何浏览器尺寸，图像仍然相对较小。

Answer 2

刚试过这个，

http://www.antiyes.com/test/4753259/

看看html，由于颜色配置文件和图像的内容，它看起来有点蹩脚，它们必须更好地切割，但这显示了该做什么的基础。

<html>
<head>
<style type="text/css">
body
{
margin:0;
padding:0;
}
#header
{ 
 width:100%;
 height: 145px;
 position:relative;
 overflow:hidden;
 text-align:center;
}

#logo
{
 margin:auto;
 position:relative;
 z-index:5;
 width:1024px;
 height:99px;
 background:transparent url(iea_logo_13Jan2011.png) no-repeat top center;
}

#red_stripe,#yellow_stripe
{ 
 position:absolute;
    left:0px;
 right:0px;
 z-index:4;
}

#red_stripe
{
 left:50%;
 height:31px;
 top:6px;
 background:transparent url(red_strip.png) repeat-x top left;
 width:50%;
}

#yellow_stripe
{
 height:32px;
 top:60px;
 width:50%;
 background:transparent url(yellow_strip.png) repeat-x top left;
}

</style>
</head>
<body>
 <div id="header">
 <div id="red_stripe"></div>
 <div id="yellow_stripe"></div>
 <div id="logo"></div>
 </div>
</body>
</html>

Answer 3

我建议的解决方案适用于宽达3072像素的分辨率，这应该是充足的。

你需要为#body_background创建一个3072像素宽，大约140像素高的背景图像。这个的主要背景颜色显然是白色。然后，您将在左侧部分制作一个黄色条带，宽度为1024px，从顶部向下开始86px，与主要部分中的黄色条带对齐。然后，在黄色条带以1024px结束的水平点处，你将制作一个2048px的红色条带，以32px向右边缘向下与主要部分中的红色条带对齐...所以基本上你将拥有一个看起来像这样的图像：

[ - - - - -1024px- - - - - - ]___________________________________________________
______________________________[- - - - - - - - - - -2048px- - - - - - - - - - - ]

然后使用以下CSS将其作为背景图像添加到#body_background：

#body_background { 
    background:url('../path/to/image/bg_strips.gif') left top no-repeat #fff; 
}

应该这样做！让我知道它是否有效！

液体 - 固定 - 液体布局

3 个答案: