[NickToye]

Now I'm not sure if this has been addressed and I just haven't found it yet.

I know how to do the sliding doors with navigation buttons and also simple boxes. I know to have the box totally flexible and indestructible you need to apply the two images to the four corners of the box.

However, if you have a box that is going to be a bloody big box in terms of say taking content for a large blog entry, it becomes problematic for me because of:

1. You need to create an image that goes far beyond what you would normally need for this method.

2. A larger image takes longer to load.

Does anyone think that it is possible to create a box that has a repeated background to give the illusion that the box is large but would also behave like sliding doors and be flexible.

If anyone has any thoughts on this matter I would love to hear them.

[pgo]

I presume you're going to have a fixed width box in this case. I'm doing something similar on a new site.

Forget sliding doors for content boxes. This method is only for fixed width boxes.

Say your curved edges are 25px high. Create two images - one for the top and one for the bottom. Like so:





Then your CSS for this box...

#sidebar {
  background: url(../images/sb_top.gif) no-repeat top left #5C89A8;
  font-size: .9em;
  color: #FFF;
  width: 200px;
  float: left;
  margin-top: 15px;
}

The background-color will fill in all the rest of the background (between the two images). Also, if you want to use transparent corners, better find a different method than this one...in other words, you'd probably have to add non-semantic markup. I've added an element that persists at the bottom of the sidebar on every page - this is where I apply the bottom image - in this case, it's a bit of copyright text.

#copyright {
  background: url(../images/sb_bot.gif) no-repeat bottom right #5C89A8;
  color: #D7E2EA;
  text-align: center;
  padding: 10px 0;
  margin: 0;
}

The drawback of this is that you can't add padding to #sidebar - it'll break the bottom image. But in my case, I don't have too much content in #sidebar, so it's not a big deal.

Alternatively, you could add a non-semantic, empty div after #sidebar if you wanted.

A fluid box - expandable across both the X and Y axes - would be a bit more tricky and you'd be required to add extra, non-semantic markup. Unless the content were very cleverly marked up and would remain quite constant across pages.

[NickToye]

Well following a tutorial in a book I got I actually created this:

http://www.nicktoye.co.uk/bulletproof/chapterFive.htm

The bottom two boxes have the same markup but varying content and they are fluid - that is the sliding doors method.

At the moment on my own site - www.nicktoye.co.uk

I do have the method you suggested, but then when I resize to 800*600 it breaks the layout, so that is why I was looking at a different solution.

[pgo]

I have that book too. Kind of a let down, I thought.

Well, if you're going for fluid in both directions, and it needs to be large, I'd rather add extra markup than make huge sliding door images. Extra markup is easier on the bandwidth than huuuuge images.

[NickToye]

So have the sliding doors method for the top part of the image and one for the bottom part of the image, and then add a repeating background for the middle part of the box?

[datahound]

Originally Posted by NickToye

At the moment on my own site - www.nicktoye.co.uk

I don't know if your site is active but did you know all the screenshots are missing on your recent works?

[NickToye]

Nope, but I do now, cheers - referencing to an old folder - this is what happens when you rush things