ansaurus

Question

repeat-y layout issue

Answer 1

A:

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

Here Be Wolves 2010-01-03 12:47:16

Thanks! i didn't know that centering for ie6 'hack' i will have a play with that. I updated the origianl post with a good example of what i am trying to do and where i am at with it.

tommot82 2010-01-03 14:35:45

Answer 2

A:

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>

Erik 2010-01-03 12:52:02

tommot82 2010-01-03 14:21:30

i edited the original post and included a good example of where i am at thanks to your help

tommot82 2010-01-03 14:34:22

ansaurus

tags:

views:

answers:

repeat-y layout issue

related questions