Question

<<>strong>update:

我正试图在身体背景形象也是主要内容的头123页背景的情况下进行布局工作。然后,我要谈谈主要内容(从123px开始),然后填补。

然而,重复工作显然能够填补和缩小,因此重复在身体上的地位。

                    ----------------------
                    |                    |               
                    |   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; 
}

但是,只要加上重复填写内容,就会 up倒和超支第123px号背景,而这是我从身体形象中想到的。

我正在考虑在“暂记”部分内增加一分之四,从而树立了重复的形象,但随后,我的所有内容将不得不开始123分之四,希望从内容提上开始。

任何想法如何克服?

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 :)

奥基·埃里克的哨所与我的需求非常接近。我认为,我并没有尽力在内容主线上利用身体背景形象。我将把部分重新布置放在背景形象之外,并把它作为内容 d顶上的单独形象,并利用Z-指数将其置于我的主要内容重复性之上(我下面的例子中是达德边界)。

我唯一重新思考的问题是,根据内容,将内容总结成垂直。我已 lot了许多事情,但我不得不让它工作!

这里基本上看一看现在的情况(如果说是可以效仿的,但应该显示高度问题)。

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

Answer 1

你们可以与一些z子接触。它不是可怕的杂质,而是发挥作用。例如:

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

你可以看到该守则的来源。

基本上,我把一栏放在一个包裹中,在我想要一栏的时候,把一栏放在了位置。然后,我先给该栏一个绝对立场和一个3兹指数。其次,我创造了一个四分五裂的背景,并给这个二分之四。最后,本页倒数将重复的背景情况,并给出1的兹指数。页: 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>

Answer 2

我建议采用这一结构。

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

建议c:

body { text-align: center; } 
body div { text-align: left; } /* centering for ie6 */
#header { height: 123px }
#content { background:transparent url(images/content.gif) repeat-y; }

我希望这一帮助。

如果我看一下你目前的结构,我会做得更好。

Cheers,
jrh

友情链接