Home/ Questions/Q 6586551
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T16:48:15+00:00

Searching the web, it seemed the solution to my problem would be the CSS3

  • 0

Searching the web, it seemed the solution to my problem would be the CSS3 property border-image-outset. Since no browser implements this yet, I hope someone could help me with some other solution. Thanks in advance.

This is the layout a friend of mine designed, which I am translating into html / css.

The problem about it is the content area. The width of the content area is fix, the hight depends on the content. It has a medium part, spanning the whole width with a repeated 1px high background-image, business as usual. But it has also some fancy corners on transparent background, which are too high to have them outside (above and beneath) the content area. (And, just to be complete, a different image top and bottom between these corners, but that’s not a problem any more with multiple background-images.)

So how do I fill that content area .main with the repeated background, without it showing behind the corners?

I have prepared some examples to demonstrate my problem. Most styles and images are of course still missing. The 1px paddings/borders are for better visibility.

At first I tried a simple approach with just one header and one footer image. But I could not get the content to overlap both the header and the footer image and the page still having the desired height… open: http://test.illusionet.ch/jg/simple.html

Then I cut up the picture in about 100 pieces. Now there’s only one little piece missing, on the left side beneath the subnavigation – but I’m about as stuck as before. open: http://test.illusionet.ch/jg/pieces.html

I’ve tried out different techniques. I’m aware that the markup is quit a mess by now. Please ignore. Or feel free to rewrite from scratch. The ONLY thing given as of yet is the order and the neighbourhood of these two divs:

<div class="rechteSpalte">...</div>
<div class="mittlereSpalte">...</div>

I’v prepared a fiddle with the second example to play with and try out your thoughts.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Thanks to the input of @Jonah I was able to fix my code.

    Here you can see it live: http://test.illusionet.ch/jg/zindex.html

    The extra divs are needed, if you don’t want the negative margin directly on the paragraphs in #content.

    <html>
<head>
<style>
    body {
        background: darkgreen;
    }
    #top {
        background: url(http://test.illusionet.ch/jg/greengrass/img/header.png) no-repeat center top;
        height: 500px;
        margin: 0 auto;
        position: relative;
        width: 982px;
        z-index: 10;
    }
    #footer {
        background: url(http://test.illusionet.ch/jg/greengrass/img/bigfoot.png) no-repeat center bottom;
        height: 322px;
        margin: 0 auto;
        position: relative;
        width: 982px;
        z-index: 10;
    }
    #main {
        margin: 0 auto;
        width: 982px;
        background: yellow url(http://test.illusionet.ch/jg/greengrass/img/page.png) repeat-y right top;
        position: relative;
        z-index: 20;
        min-height: 100px;
    }
    #content {
        margin-top: -250px;
    }
    .clear {
        clear: both;
    }
    .neg_margin_hook {
        height: 1px;
    }
    .neg_margin_bottom {
        margin-bottom: -200px;
    }
    #content p {
        float: right;
        width: 30%;
        padding-right: 3%;
    }
    .left {
        margin-top:100px;
    }
</style>
</head>
<body>
    <div id="top">
    </div>
    <div id="main">
        <div class="neg_margin_hook">
        </div>
        <div id="content">
            <p class="right">Cras mattis consectetur purus sit amet fermentum. </p>
            <p class="center">the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.</p>
            <p class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            <div class="clear neg_margin_bottom">
            </div>
        </div>
    </div>
    <div id="footer">
    </div>
</body>
<html>
    • 0