重复y布局问题

发布于 2024-08-16 19:52:24 字数 7872 浏览 6 评论 0原文

更新： 在底部，

我试图获得一个布局，其中正文背景图像也是主要内容 div 的前 123px 的背景。然后我想在主要内容 div 上放置一个背景（从 123px 开始），然后向下填充。

然而，repeat-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------------------->|

像这样的东西对于不重复效果很好：

#content {
 background: transparent url(images/content.gif) no-repeat  center 123px;
 width: 970px;
 margin: 0 auto;
 padding: 0 0 0;
 position:relative; 
}

但是一旦我添加了重复-y，它就会向上和向下填充内容 div 并覆盖我想要从主体背景图像中获得的背景的前 123px。

我正在考虑在 #content div 中添加一个 div，我在其中设置了重复图像，但随后我的所有内容都必须向下 123 像素开始，并且我希望它从内容 div 的顶部开始。

我有什么想法可以克服这个问题吗？

更新： 感谢您的回复。我刚刚发现这个网站，我对 html/css 很陌生，但我喜欢这个网站的想法。希望我可以为其他人提供一些 XSLT 帮助:)

好的，Erik 的帖子已经让我非常接近我所需要的了。我认为我没有通过尝试使用内容 div 顶部的正文背景图像来以最好的方式做事。我将从背景图像中切出相关部分，并将其用作内容 div 顶部的单独图像，并使用 z 索引将其放在主要内容的顶部重复 y （如我的示例所示）下面的虚线边框）。

我唯一剩下的问题是让内容包装器根据其中的内容垂直缩放。我尝试了很多东西，但我无法让它发挥作用！

这基本上就是我现在所拥有的（抱歉我无法托管该示例，但它应该显示高度问题）。

<!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>

原文

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. I then want to put a background on the main content div (starting at 123px) and then fill down.

However repeat-y obviously fills both up and down and therefore repeats over the top of the body background.

                    ----------------------
                    |                    |               
                    |   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.

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.

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. Hopefully i can help with some XSLT for others :)

Ok Erik's post has got me very close to what i need. 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. 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).

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>

分享到QQ

分享到微博

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

发布评论

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

呆° 2024-08-23 19:52:24

您可以通过一些 z-index 的乐趣来获得您想要的东西。它的语义不太好，但它确实有效。下面是一个例子：

http://www.pixeloution.com/bg_test.html

您可以查看代码的来源。

基本上，我已将列放入包装器中，并将包装器放置在我想要列的位置。然后，我为该列指定了绝对位置，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>

You can get what you want with some z-index fun. Its not terribly semantic, but it works. Here's an example:

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:

<!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>

回复收藏 0 原文

梦一生花开无言 2024-08-23 19:52:24

我建议使用这种 html 结构：

<html>
<body>
<div id='header'>stuff</div>
<div id='content'>stuff</div>
<!--footer optionally -->
</body>
</html>

建议的 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; }

我希望这会有所帮助。

如果我了解您的 html 当前结构是什么，我可以提供更好的帮助。

干杯，
杰瑞赫

I suggest using this structure of html:

<html>
<body>
<div id='header'>stuff</div>
<div id='content'>stuff</div>
<!--footer optionally -->
</body>
</html>

suggested 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.

Cheers,
jrh

回复收藏 0 原文

~没有更多了~