7 Divs, how to make they stay where the picture say?

Question

Blue is where the image of the corners will go

Green is a repeating image on the x axis on the top, all part of the same template!

And orange is a simgle image repeating on the y axis

For clarification here is what I've tried so far, i'm angry about this because when I use relative position it breaks because of an with background that is above! Anyway I need to define a height and width for each item!

 .sheet {position:relative;
 top:140px;
 width:1000px;}

 .tl {
 background:url(../images/sheet_top_left-trans.png) no-repeat;
 width:20px;
 height:20px;
 top:0px;
 left:0px;}

 .tm {
 background:url(../images/sheet_top-trans.png) repeat-x;
 width:960px;
 height:20px;}

 .tr {
 background:url(../images/sheet_top_right-trans.png) no-repeat;
 width:20px;
 height:20px;
 top:0px;
 right:0px;}

 .content {
 background:url(../images/sheet_middle.png) repeat-y;
 top:20px;
 width:1000px;
 height:400px;}/* Demonstration only, please remove later */

 .bl {
 background:url(../images/sheet_bottom_left-trans.png) no-repeat;
 width:20px;
 height:30px;}

 .bm {
 background:url(../images/sheet_bottom-trans.png) repeat-x;
 height:30px;
 width:960px;
 bottom:0px;
 left:20px;}

 .br {}

and the html

        <div class="sheet"><!-- Glass Effect Starts here -->

        <div class="tl"></div>
        <div class="tm"></div>
        <div class="tr"></div>
          <div class="content">Here we go again</div>
        <div class="bl"></div>
        <div class="bm"></div>
        <div class="br"></div>

If I use absolute postitioning I can't make the bottom images stick to it! tho it works at the top!

Now I've found I way to do it that is cross-browser (even IE6 just don't use transparent PNG as I did) here we go:

HTML:

    <div class="sheet">

      <div class="top_sheet">
        <div class="tl"></div>
        <div class="tm"></div>
        <div class="tr"></div>
      </div>

        <div class="middle">.</div>

      <div class="bottom_sheet">
        <div class="bl"></div>
        <div class="bm"></div>
        <div class="br"></div>
      </div>


    </div><!-- End of the sheet class -->

CSS:

.sheet {position:relative;
width:1000px;
top:10px;}

.top_sheet {width:1000px;
height:20px;}

.tl {float:left;
background:url(../images/sheet_top_left-trans.png) no-repeat;
height:20px;
width:20px;}

.tm {float:left;
background:url(../images/sheet_top-trans.png) repeat-x;
height:20px;
width:960px;}

.tr {float:right;
background:url(../images/sheet_top_right-trans.png) no-repeat;
height:20px;
width:20px;}

.middle {position:relative;
background: url(../images/sheet_middle.png) repeat-y;
width:1000px;
height:400px;}

bottom_sheet {width:1000px;
height:30px;}

.bl {float:left;
background:url(../images/sheet_bottom_left-trans.png) no-repeat;
width:20px;
height:30px;}

.bm {float:left;
background:url(../images/sheet_bottom-trans.png) repeat-x;
width:960px;
height:30px;}

.br {float:right;
background:url(../images/sheet_bottom_right-trans.png) no-repeat;
width:20px;
height:30px;}

Answer 1

Have you tried some cross-browser css framework, e.g. http://www.blueprintcss.org? These frameworks usually let you define grids and will help you to overcome browser-specific quirks by resetting certain css properties ...

Answer 2

Fluid width containers with rounded corners using valid CSS and XHTML

Answer 3

The method I usually see is nesting all the divs to layer them, then setting the background-repeat and background-position on each one. Basic example:

<div class="tl">
<div class="tr">
    <div class="content">Here we go again</div>
</div>
</div>

With CSS:

.tl, .tr {
    width: 100%;
    height: 100%;
}

.tl {
    background: url("tl.png") no-repeat 0 0;
}
.tr {
    background: url("tr.png") no-repeat 100% 0;
}

Simply scale that up to use all your separate images. You'll need to have the sides first (on the outside of the 'div nest') and the corners last (on the inside, right before the content div).

It's a classic case of "divitis", but it's hard to avoid until CSS3 is well supported (where you can use multiple backgrounds or simply a border image). You might was to check out Sliding Doors, which shows a technique for reducing the number of elements/images needed.

Answer 4

Trying to use the same html you already have, here is something that seems to work pretty well.

Move the corners into an all encompassing top and bottom bar. And then float the respective corners left and right.

CSS:

.sheet {
    position:relative;
    width:1000px;
    top:140px;}
.tl {
    background:url(images/sheet_top_left-trans.png) no-repeat;
    float:left;
    width:20px;
    height:20px;
    margin-left:-20px;}
.tm {
    background:url(images/sheet_top-trans.png) repeat-x;
    height:20px;
    margin-left:20px;}
.tr {
    background:url(images/sheet_top_right-trans.png) no-repeat;
    float:right;
    width:20px;
    height:20px;}
.content {
    background:url(images/sheet_content.png) repeat-y;
    clear:both;
    height:200px;}/* Demonstration only, please remove later */
.bl {
    background:url(images/sheet_bottom_left-trans.png) no-repeat;
    float:left;
    width:20px;
    height:30px;}
.bm {
    background:url(images/sheet_bottom-trans.png) repeat-x;
    height:30px;}
.br {
    background:url(images/sheet_bottom_right-trans.png) no-repeat;
    float:right;
    width:20px;
    height:30px;}

HTML:

<div class="sheet"><!-- Glass Effect Starts here -->
    <div class="tm">
        <div class="tl"></div>
        <div class="tr"></div>
    </div>
    <div class="content">Here we go again</div>
    <div class="bm">
        <div class="bl"></div>
        <div class="br"></div>
    </div>
</div>

Answer 5

Hey, try this.

css:
.sheet {
 position:relative;
    top:140px;
    width:1000px;
 }

    .tl {
    background:url(blue.bmp) no-repeat;
    width:20px;
    height:20px;
    top:0px;
    left:0px;
 }

    .tm {
 position: absolute;
    background:url(green.bmp) repeat-x;
    width:960px;
    height:20px;
 left: 20px;
 top: 0px;
 }

    .tr {
 position: absolute;
    background:url(blue.bmp) no-repeat;
    width:20px;
    height:20px;
    top:0px;
    right:0px;
 }

    .content {
    background:url(orange.bmp) repeat-y;
    top:20px;
    width:1000px;
    height:400px;}/* Demonstration only, please remove later */

    .bl {
    background:url(blue.bmp) no-repeat;
    width:20px;
    height:30px;}

    .bm {
 position: absolute;
    background:url(green.bmp) repeat-x;
    height:30px;
    width:960px;
    bottom:0px;
    left:20px;}

    .br {
  position: absolute;
  background:url(blue.bmp) no-repeat;
  width:20px;
  height:30px;
  top:420px;
  right:0px;
 }

  html:
<div class="sheet"><!-- Glass Effect Starts here -->

    <div class="tl"></div>
    <div class="tm"></div>
    <div class="tr"></div>
      <div class="content">Here we go again</div>
    <div class="bl"></div>
    <div class="bm"></div>
    <div class="br"></div>

I put absolute positioning on each divs so that we can position it side by side. Hope it helps. BTW, I changed the background url. :)

Answer 6

Winks as he says this and may regret it:

You know, if you used a table... ;>P!

(Now, waits for the tables vs. css crowd to unleash!)

This looks like your regular, garden-variety rounded corners 'section'.

Here's one without images:

http://www.html.it/articoli/nifty/index.html

Here's one with:

http://kalsey.com/2003/07/rounded_corners_in_css/

When you're finished coding it and it looks like what you want, turn it into a code snippet and keep it.

Answer 7

I don't mean to be a smartarse, but you hardly need 7 divs for what you try to achieve. Five divs are enough (in most case you don't even need that. I really don't know how to explain, but you can check http://www.nil.com/english (Quick links or Get support boxes) for source.

Also, there is a great book about it called "Bulletproof web design"

Answer 8

You were close. You yet have to position the containing element relative (so that all absolute positioned child elements are relative to it) and to position the corner parts absolute. Here's a SSCCE:

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 1898479</title>
        <style>
        .sheet {
            position: relative;
            width: 200px;
        }

        .tl {
            position: absolute;
            width:20px;
            height:20px;
            top: 0;
            left: 0;
            background: blue;
        }

        .tm {
            position: absolute;
            height:20px;
            top: 0;
            left: 20px;
            right: 20px;
            background: green;
        }

        .tr {
            position: absolute;
            width: 20px;
            height: 20px;
            top: 0;
            right: 0;
            background: blue;
        }

        .content {
            background: orange;
            padding: 20px 0; /* Padding must be at least as much as the "borders" are thick. */
            height: 300px;
        }

        .bl {
            position: absolute;
            width: 20px;
            height: 20px;
            bottom: 0;
            left: 0;
            background: blue;
        }

        .bm {
            position: absolute;
            height: 20px;
            bottom: 0;
            left: 20px;
            right: 20px;
            background: green;
        }

        .br {
            position: absolute;
            width: 20px;
            height: 20px;
            bottom: 0;
            right: 0;
            background: blue;
        }
        </style>
    </head>
    <body>
        <div class="sheet">
            <div class="tl"></div>
            <div class="tm"></div>
            <div class="tr"></div>
            <div class="content">Here we go again</div>
            <div class="bl"></div>
            <div class="bm"></div>
            <div class="br"></div>
        </div>
    </body>
</html>

You only need to ensure that you're using the strict doctype as used in the above example so that it works in IE as well.