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

液体 - 固定 - 液体布局

发布于 2024-10-13 18:11:32 字数 530 浏览 4 评论 0原文

我正在开发这个网站： http://www.justaddsolutions.com/SampleSite/

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

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

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

然后我想通过在标题中使用 3 列表格来实现此目的，并使用背景图像和重复 x 来设置 td 元素的样式，但这在 Chrome 和 Safari 中似乎效果不佳。

任何有关此问题的帮助将不胜感激。

原文

I'm working on this web-site: http://www.justaddsolutions.com/SampleSite/

The main area is meant to be 1024px wide and always centered, which is achieved. However my client would like the yellow and red strips to extend to the respected edges (yellow to the left and red to the right) of the browser window when browser window is wider than 1024px.

I thought to solve it with CSS-based Liquid - Fixed - Liquid Layout, where center part is centered and side parts have equal liquid widths. But I can't figure it out on my own and haven't been able to find anywhere how to do it either.

I did find Liquid-Fixed-Liquid Layout at mathewjamestaylor liquid layouts website, but it breaks in IE8 when the browser's window resized down to small size.

I then thought to achieve this with using a 3 column table in my header and style my td elements using background-image and repeat-x, but that seems not work well in Chrome and Safari.

Any help with this issue would be highly appreciated.

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

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

发布评论

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

评论（3）

暖阳 2024-10-20 18:11:32

刚刚测试了一下，

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>

just tested this out,

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

look at the html, it looks kinda crappy right now because of the color profiles and stuff with the images, they would have to be cut better but this shows the basics of what to do.

<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>
回复 原文
书信已泛黄 2024-10-20 18:11:32

我相信你想多了。由于您对标题元素使用绝对定位，因此我将简单地对主体元素使用背景图像（不重复）。基本上，它会是一个类似于您当前徽标的图像，但颜色从每一侧延伸出来。

由于它只是纯色，因此您可以将其设置为任意大的宽度（例如 9000 像素）以适应几乎任何浏览器尺寸，并且图像仍然相对较小。

I believe you are over-thinking this. Since you are using absolute positioning for the header elements, I would simply use a background image for the body element (non repeating). Basically it would be an image like your current logo but with the colour extending off each side.

Since it's just solid colours, you would make it an arbitrarily large width (say 9000 pixels) to fit nearly any browser size and the image would still be relatively small.

回复 原文
丿*梦醉红颜 2024-10-20 18:11:32

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

您需要为 #body_background 制作一张宽 3072 像素、高约 140 像素的背景图片。显然，它的主要背景颜色是白色。然后，您将在左侧部分制作一条宽 1024 像素的黄色条，从顶部向下 86 像素开始，与主部分中的黄色条对齐。然后，在黄色条带以 1024 像素结束的水平点处，您将制作一个 2048 像素的红色条带，该红色条带向下 32 像素处到达右边缘，以与主要部分中的红色条带对齐...所以基本上您将得到如下所示的图像：

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

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

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

这样就可以了！让我知道它是否有效！

The solution I propose will work for resolutions up to 3072px wide, which should be plenty.

You'll need to make a background image for #body_background that's 3072px wide by about 140px tall. The main background color for this will be white obviously. You'll then make a yellow strip in the left section that's 1024px wide that starts 86px down from the top to align with the yellow strip in the main section. Then, at the horizontal point where the yellow strip ends at 1024px, you'll make a 2048px red strip that goes to the right edge at 32px down to align with the red strip in the main section... so basically you'll have an image that looks like this:

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

Then add it as the background image to #body_background with the following CSS:

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

And that should do it! Let me know if it works!

回复 原文
~没有更多了~

关于作者

老旧海报

暂无简介

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

相关话题

更多

热门标签

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

推荐作者

1CH1MKgiKxn9p

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

JackDx

文章 0 评论 0

信远

文章 0 评论 0

yaoduoduo1995

文章 0 评论 0

霞映澄塘

文章 0 评论 0

更多

友情链接

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