Div container with border

[Dragen]

Okay, I've been trying for ages to do something that I thought would be fairly easy..

I'm trying to create a div container that does not need a set width, and has images as the border;

one in the top-left corner and another in the top-right, with a repeating images in top-center as the div could be any width. And the same on the bottom.

Then in the 'middle', I want an border image on the left and another on the right, with the main content in-between (with its own background image). eg;

corner|center|corner

side|text here!|side

corner|center|corner

 

How can I do this? I've been trying for ages. It's got to be div/span, not tables.

[Axeia]

Simplest way, if the images don't have a transparent background but a solid fill is to simply nest a whole lot of divs.

 

<style type'='text/css'>
.top         { background: url( images/top.png ) top repeat-x; }
.bottom      { background: url( images/bottom.png ) bottom repeat-x; }
.left        { background: url( images/top.png ) left repeat-y; }
.right       { background: url( images/right.png ) top repeat-x; }
.topLeft     { background: url( images/topLeft.png ) top left no-repeat; }
.topRight    { background: url( images/topRight.png ) top right no-repeat; }
.bottomLeft  { background: url( images/bottomLeft.png ) bottom left no-repeat; }
.bottomRight { background: url( images/bottomRight.png ) bottom right no-repeat; }
.bottomRight p { margin: 40px; }
</style>

<div class='top'>
  <div class='bottom'>
    <div class='left'>
      <div class='right'>
        <div class='topLeft'>
          <div class='topRight'>
            <div class='bottomLeft'>
              <div class='bottomRight'>
                 <p> Oh hi~z </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

[Dragen]

Thanks, I've tried similar to this.. unfortunately the images do have transparent backgrounds!

I'm really wanting to keep the transparency, but if I find it impossible I'll have to remove them, I guess.

[jcombs_31]

I would suggest trying a javascript solution, that div soup is scary looking!  Is there any particular reason you are trying to do what you are doing.  Can you post a screenshot of the final look you want to achieve?

[Dragen]

Here's an example of what I'm trying to do:

 

Just an example of it in three different sizes. The last one is an example of the images used:

1. top left image

2. top center image (repeated horizontally for length of div)

3. top right image

4. middle left (repeated vertically for height of div)

5. middle center (repeated vertically and horizontally)

6. middle right (repeated vertically for height of div)

7. bottom left image

8. bottom center image (repeated horizontally for length of div)

9. bottom right image

 

I'm wanting it to be transparent as the background image could be different depending on where the container is and I want it to show through.

[Axeia]

Okay getting bored of typing so I'll just give you an example of the top.

  <style>
.menu { width: 400px; }
.deco { height: 16px; position: relative; }
.deco * { position: absolute;  }
.top{ background: url( top.png ); height: 16px; width: 100%; margin: 0 16px; }
.topLeft { background: url( topLeft.png ); width: 16px; height: 16px; }
.topRight{ background: url( topRight.png ); width: 16px; height: 16px; right: 0; top: 0; }
  </style>
<div class='deco menu'>
  <div class='topLeft'></div>
  <div class='top'></div>
  <div class='topRight'></div>
</div>

 

Pay special attention to the margin on the top image, which is the width of the topleft and topright divs.

Position relative on the container / Position absolute does the rest of the magic. (top: 0; top: right; is relative to the first relative positioned parent)

[Dragen]

Thanks for the help again, but It was quite difficult to make sense of the code as most of the css references aren't the same as the class names.

I think I figured it out though, but it just isn't working.. every is placed on top of each other; top section, middle and bottom all together, rather than one after the other:

 

Here's the css:

.box *{position:absolute;}
.box .t_l{display:block; width:20px; height:12px; background:url('/images/container_t_l.png') 0px 0px no-repeat;}
.box .t_rep{display:block; margin:0px 20px; width:100%; height:12px; background:url('/images/container_t_rep.png') 0px 0px repeat-x;}
.box .t_r{float:right; display:block; width:20px; height:12px; background:url('/images/container_t_r.png') 0px 0px no-repeat;}

.box .m_l{display:block; width:20px; background:url/images/container_m_l.png') 0px 0px no-repeat;}
.box .m_rep{display:block; margin:0px 20px; width:100%; background:url('/images/container_m_rep.png') 0px 0px repeat;}
.box .m_r{display:block; width:20px; background:url('/images/container_m_r.png') 0px 0px no-repeat;}

.box .f_l{display:block; width:20px; height:12px; background:url('/images/container_f_l.png') 0px 0px no-repeat;}
.box .f_rep{display:block; width:100%; height:12px; background:url('/images/container_f_rep.png') 0px 0px repeat-x;}
.box .f_r{display:block; width:20px; height:12px; background:url('/images/container_f_r.png') 0px 0px no-repeat;}

 

And here's the html:

<div class="box">
<span class="t_l"></span>
<span class="t_rep"></span>
<span class="t_r"></span>

<span class="m_l"></span>
<span class="m_rep">main content here<br />hello<br />hi</span>
<span class="m_r"></span>

<span class="f_l"></span>
<span class="f_rep"></span>
<span class="f_r"></span>
</div>

 

I've got the 'display:block;' because I'm using span, but I've tried it without that using div and I get the same result.

[TheFilmGod]

In essense, you only need 5 divs.

 

<div id="box">
<div class="top"></div>
<div class="main">
       ... main content...
</div>
<div class="bot_left"></div>
   <div class="bot_right"></div>
</div>

 

#box {
position: relative; /* KEY -> YOU MUST HAVE THIS!! */
background: ... covers all the top left (bigger than normal background image)
}
#box .top {
  position: relative:
  top: 0;
  right: 0;
  background: ... just for top right
}
#box .main {
  margin-top: 5px; /* KEY, otherwise, background will overlap original background given to just .box */
  background: url(...) repeat-y;
}
#box .bot_left {
position: absolute;
bottom: 0;
left: 0;
background: ... cover all bottom left - bigger than usual
}
#box .bot_right {
position: absolute;
right: 0;
bottom: 0;
background: ... bottom right corner only.
}

 

.. Crap, I just realized the width will change. This means you'll need to get a bit more creative with the man section I posted. Everything else should work.