divs to form a box

[briancostea]

i have eight images for the top, bottom, left, right, and the four corners of a box. i know that i need to use css and div's to make it appear that there is a box around a table on the web page. does anyone know how to accomplish this? thanks - brian

 

[audiopro]

Create a 3 cell by 3 cell table and place your images in the relevant outer cells. If you put a another table into the centre cell you will have what you require.
Your top, bottom, left and right images must be larger than the center table to prevent them fragmenting.

Keith

http://www.studiosoft.co.uk

 

[briancostea]

maybe i wasn't clear, i want to use div's. that way i can put whatever content in the box. i guess it doesn't have to be a table.

 

[cLFlaVA]

audiopro,

that is an antiquated method that will not allow a person to properly display text in a rounded-corner box.

briancostea,

take a look at this:

http://www.alistapart.com/articles/customcorners/

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude

 

[briancostea]

i read that article - it only uses 4 images

 

[cLFlaVA]

are you not able to apply the same concept?

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
beware of active imagination: [URL unfurl="true"]http://www.coryarthus.com/[/url]

BillyRayPreachersSonIsTheLeetestHax0rDude

 

[briancostea]

figured it out ... above article is not what i was looking for, but thanks anyway.

 

[audiopro]

What was your final solution?

Keith

http://www.studiosoft.co.uk

 

[briancostea]

css:
.l {
background: url('l.jpg') 0 0 repeat-y;
}

.t {
background: url('t.jpg') 0 0 repeat-x;
}

.r {
background: url('r.jpg') 100% 0 repeat-y;
}

.b {
background: url('b.jpg') 0 100% repeat-x;
}


.bl {
background: url('bl.jpg') 0 100% no-repeat;
}

.br {
background: url('br.jpg') 100% 100% no-repeat;
PADDING-TOP: 10px;
PADDING-LEFT: 10px;
MARGIN: 0px;
}

.tl {
background: url('tl.jpg') 0 0 no-repeat;
}

.tr {
background: url('tr.jpg') 100% 0 no-repeat;
}

html:
<div class="topwide"><div class="l"><div class="t"><div class="r"><div class="b"><div class="tl"><div class="bl"><div class="tr"><div class="br">

content you want in the box<br>

</div></div></div></div></div></div></div></div></div>

the only thing that is kind of bad is that you have to set a width, otherwise the box will occupy the entire with of the screen. what threw me initially were the sides. thanks for the input.

 

[Vragabond]

You could use [tt]width: auto;[/tt]. That makes it as wide as the content.

 

[audiopro]

How reliable is this method in the various browsers?

Keith

http://www.studiosoft.co.uk

 

[briancostea]

width: auto didn't work, the box went the width of the page