重复布局问题
[英]repeat-y layout issue
问题描述
update: at bottom 
更新：在底部
I am trying to get a layout working where the body background image is also the background for the first 123px of the main content div. 我正在尝试一种布局工作，其中主体背景图像也是主要内容div的前123px的背景。 I then want to put a background on the main content div (starting at 123px) and then fill down. 然后，我想在主要内容div上放一个背景（从123px开始），然后向下填充。
However repeat-y obviously fills both up and down and therefore repeats over the top of the body background. 但是，重复y显然会同时上下填充，因此会在身体背景的顶部重复。
----------------------
| |
| HEADER DIV + NAV |
BODY WITH | | BODY WITH
BACKGROUND IMAGE|--------------------| BACKGROUND IMAGE
| ^ |
| CONTENT DIV | |
| 123px|
| | |
| v |
|--NEW CONTENT IMAGE-|
BODY WITH | | BODY WITH
BACKGROUND IMAGE | | BACKGROUND IMAGE
| |
| |
|<--------------------100 % Width------------------->|
Something like this works great for a no-repeat: 像这样的事情非常适合不可重复：
#content {
background: transparent url(images/content.gif) no-repeat center 123px;
width: 970px;
margin: 0 auto;
padding: 0 0 0;
position:relative;
}
but as soon as i add the repeat-y its going to fill the content div both up and down and overlay the first 123px of the background that i want from the body bg image. 但是，一旦我添加重复Y，它就会上下填充内容div，并覆盖我要从主体bg图像中提取的背景的前123px。
I was thinking of adding a div inside the #content div which i set the repeating image on but then all my content would have to start 123pixels down and i want it to start at the top of the content div. 我正在考虑在#content div中添加一个div，将其设置为重复图像，但随后我所有的内容都必须开始向下123pixels，并且我希望它从content div的顶部开始。
any ideas how i can overcome this? 任何想法，我怎么能克服这个？
UPDATE: Thanks for the reponses. 更新：感谢您的答复。 I only just foud this site and i am quite new to html/css but i love the idea of the site. 我只是对这个网站感到陌生，对于html / css我还是很陌生，但是我喜欢这个网站的想法。 Hopefully i can help with some XSLT for others :) 希望我可以为其他人提供一些XSLT :)
Ok Erik's post has got me very close to what i need. Ok Erik的帖子使我非常接近我的需求。 I think i am not doing things the best way by trying to use the body background image in the top of the content div. 我认为我不是通过尝试使用内容div顶部的正文背景图像来做最佳方法。 I am going to slice the relavent part out of the background image and use it as a separate image in the top of the content div and use the z-index to put it on top of my main content repeat-y (shown in my example below by the dashed border). 我将从背景图像中切出relavent部分，并将其用作内容div顶部的单独图像，并使用z-index将其放在我的主要内容重复y上（如示例所示）下方的虚线边框）。
my only remaiing problem with this is getting the content wrapper to scale vertically according to the content within. 我唯一需要解决的问题是使内容包装器根据其中的内容垂直缩放。 I have tred lots of things but i cant get it to work! 我已经尝试了很多东西，但我无法使它正常工作！
here's basically what i have now (sorry i cant host the example, but it should show the height problem). 这基本上是我现在拥有的（抱歉，我无法托管该示例，但是它应该显示高度问题）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<style>
* {margin: 0; padding: 0; }
body {
font-family:Arial,Helvetica,sans-serif;
width:100%;
background:red url(images/bg.jpg) no-repeat scroll center top;
display:table;
}
#top_bar{
height:17px;
background: green url(images/top_bar.jpg) no-repeat scroll center top;
padding:0;
margin:0 auto;
}
#header{
height:221px;
width: 970px;
background:pink;
position:relative;
margin: 0px auto;
}
#wrapper{
position: relative;
margin: 0 auto;
height: 300px;
width: 970px;
}
#content {
color:white;
height:100%;
width: 970px;
margin: 0 auto;
padding: 0 0 0;
position:absolute;
top:0;
left:0px;
z-index: 3;
}
#top-background{
height:123px;
width: 970px;
position:absolute;
background:red;
top:0;
left:0px;
z-index: 2;
border:dashed 3px #000;
}
#bottom-background{
height:100%;
width: 970px;
background: blue url(images/content.gif) repeat-y center top;
position:absolute;
top:0px;
left:0px;
z-index: 1;
}
#wrapper-foot{
height:50px;
width:970px;
position:relative;
margin: 0 auto 50px;
background:orange;
z-index: 1;
}
</style>
<title>Hi there</title>
</head>
<body>
<div id="top_bar" ></div>
<div id="header">
<!-- some nav etc -->
</div>
<div id="wrapper">
<div id="top-background"></div>
<div id="bottom-background"></div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
<div id="wrapper-foot"></div>
</body>
</html>
2 个解决方案
解决方案1
1 已采纳 2010-01-03 12:52:02
You can get what you want with some z-index fun. 您可以通过z-index乐趣获得想要的东西。 Its not terribly semantic, but it works. 它不是非常语义，但是可以工作。 Here's an example: 这是一个例子：
http://www.pixeloution.com/bg_test.html http://www.pixeloution.com/bg_test.html
You can view source for the code. 您可以查看代码的源代码。
Basically, I've put the column in a wrapper, and positioned the wrapper where I want the column. 基本上，我已将列放在包装器中，并将包装器放置在需要列的位置。 Then I've given the column an absolute position and a zindex of 3. Next, I create a div to hold the top half background, and give that a zindex of 2. Finally, the background that will repeat all the way down the page, and give that a zindex of 1. The entire page is here: 然后，给该列指定一个绝对位置，并将zindex设置为3。接下来，我创建一个div来容纳上半部分的背景，并将zindex设置为2。最后，背景将一直重复到页面下，并将zindex设置为1。整个页面在此处：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<style>
#wrapper {
position: relative;
margin: 0 auto;
width: 300px;
height: 600px;
}
#column {
position: absolute;
margin: 0 auto;
height: 600px;
z-index: 3;
}
#top_background {
width: 300px;
height: 150px;
position: absolute;
top: 0px;
left: 0px;
background: pink;
z-index: 2;
}
#bottom_background {
width: 300px;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background: orange;
z-index: 1;
}
</style>
<title>Hi there</title>
</head>
<body>
<div id="wrapper">
<div id="top_background"></div>
<div id="bottom_background"></div>
<div id="column">
<p>This is my content. There are just lines and lines of it. They
go on and on but really don't say very much. Or anything at all.
They really just talk about themselves. Very meta.</p>
<p>This is my content. There are just lines and lines of it. They
go on and on but really don't say very much. Or anything at all.
They really just talk about themselves. Very meta.</p>
<p>This is my content. There are just lines and lines of it. They
go on and on but really don't say very much. Or anything at all.
They really just talk about themselves. Very meta.</p>
<p>This is my content. There are just lines and lines of it. They
go on and on but really don't say very much. Or anything at all.
They really just talk about themselves. Very meta.</p>
<p>This is my content. There are just lines and lines of it. They
go on and on but really don't say very much. Or anything at all.
They really just talk about themselves. Very meta.</p>
</div>
</div>
</body>
</html>
解决方案2
0 2010-01-03 12:47:16
I suggest using this structure of html: 我建议使用html的这种结构：
<html>
<body>
<div id='header'>stuff</div>
<div id='content'>stuff</div>
<!--footer optionally -->
</body>
</html>
suggested css: 建议的CSS：
body { text-align: center; }
body div { text-align: left; } /* centering for ie6 */
#header { height: 123px }
#content { background:transparent url(images/content.gif) repeat-y; }
I hope this helps. 我希望这有帮助。
I can help better if I see what the current structure of your html is. 如果我看到您的html当前结构是什么，我会更好地帮助您。
Cheers, 干杯，
jrh r
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.