...

View Full Version : Making a dynamic "frame" around content with CSS



Oabie
07-15-2008, 06:50 AM
I know exactly how to do this with tables, but am trying to get away from using them, and rely on css. I usually create 4 corner images (top left, top right, bottom left, and bottom right) with horizontal and vertical images as backgrounds that will repeat as long as necessary to fit around whatever the content is inside. The table looks like this:

TR
TD with top left image
TD with repeating horizontal background
TD with top right image
TR

TR
TD with repeating vertical image
TD with content
TD with repeating vertical image
TR

TR
TD with bottom left image
TD with repeating horizontal background
TD with bottom right image
TR

Then, whatever the content is decides the width and height, but the repeating background images allow the "frame" to be dynamic.

In this specific instance, I only need the vertical sides to grow dynamically as the content increases downward in a blog layout. I've tried searching for help, but when I search for how to use css to make a border, or a frame, well...you can guess how many hits I get for the wrong kind of borders and frames. I don't know how else to refer to what I need css to do.

My corners have shadows, so the repeating backgrounds have to start after one corner image and end before the next corner image, or else you can see where they overlap.

Any ideas?

Thanks,
-Oabie

_Aerospace_Eng_
07-15-2008, 06:57 AM
Read this thread.
http://www.codingforums.com/showthread.php?t=75868
the example I posted might get you started.

Oabie
07-15-2008, 07:30 AM
I thought that was it, but as I replaced the images with mine, I noticed that the top, bottom, and sides that repeat are extending underneath the corners, which doesn't work with my images because I am using pngs with a drop shadow, and you can see the repeating middle section through the drop shadows. I need a way to have the middle sections start and stop between the corners, and not be behind them.

Make sense?

_Aerospace_Eng_
07-15-2008, 08:52 AM
Attach your images.

Oabie
07-15-2008, 08:13 PM
I wound up combining a few different approaches and finally got it to work, thanks for your help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum