Best Way to make this box?

HTML & CSS
1

Hey all,

I’m having a little trouble trying to make a CSS box with different images for the corners, borders, background, etc. I have no problem making a simple box with rounded corners using images for each of the four corners, however, I’m trying to make it a little more complicated by adding in images for the top center, bottom center, and left and right sides under/above each corner.

Attached is an image that depicts what I’m trying to do. Each number represents an image…the background color is simply that.

Any help in how to go about this would be GREATLY appreciated…I’m stumped!

2

Just make a 3column layout with the images placed as so :). You haven’t given any detail regarding how content will be placed on there so that’s my say.

The 5/6 can be repeating images.

3

The content is to go where you see “Background Color.” I’m still not sure how to go about this…I DO appreciate the reply, but being that I’m having a bit of an issue wrapping my head around this, “just” making a 3 column layout isn’t as easy as it probably should be for me.

4

Three of these (classes of course)

<div></div>
<div></div>
<div></div>
Those will be the three columns. Float each one (give a width) and place the content inside each one

If you still lneed help I’ll whip up a quick demo, though for understanding pruposes you really should try this on your own :).

5

Hi, Ryan,

Okay, I understand the columns concept in my head. Unfortunately having it coded in with content is wreaking havoc on my html. It would be greatly appreciated if you could provide a quick demo so that I can better understand this.

Thanks!

6

1 question before I begin, will there be any content in anything other then the background? I mean, will content from a leftside, run through into another column? I hope you understand :).

Basically, will words (this question applies to everywhere here) from 6, run into background? etc etc

7

Hi, Ryan,

No, no words should/will go from any numbered space into another. Content will only be placed in the “background color” area.

Thanks!

8

Ryan,

No numbers at ALL will have content with the exception of #7 maybe for a header…that is it. Otherwise, only the background color area will have text.

9

Meh I’ll give this a try tomorrow unless someone else wants a stab. I know I should be floating things but my mind is blanking on all code today…:frowning:

10

Lets see this demo! =)

11

Hi,

What sort of images are you talking about for the corners and sides?

Are they simply matching repeating gifs or are you after something different.

The simplest way to achieve this assuming the side borders are repeated gifs is to nest one inside another for each image that you need. As you have 8 images you will need to nest 8 divs and apply an image to each div in the appropriate background position.

You just need to make sure that you do the edges first and the corners last so that they sit on top of the edges. This assumes that you aren’t also requiring transparent corners.

It would be better if we could see a picture of the layout with graphics as at present we have no idea what type of images you are using or whether other methods could be used (e.g. fixed or fluid layout width/height etc.).

There are many examples and tutorials around for round corners:

http://www.456bereastreet.com/archive/200609/transparent_custom_corners_and_borders_version_2/
http://www.devwebpro.com/25-rounded-corners-techniques-with-css/