Decorating div boxes with CSS

[Paul B]

I hope at least some of this makes sense...

Here is my CSS:
.tl{
position:absolute;
left:0px;
right:auto;
top:0px;
bottom:auto;
width:15px;
height:15px;
background-image:url('tl.png');
}
.t{
position:absolute;
left:15px;
right:15px;
top:0px;
bottom:auto;
width:auto;
height:15px;
background-image:url('t.png');
}
.tr{
position:absolute;
left:auto;
right:0px;
top:0px;
bottom:auto;
width:15px;
height:15px;
background-image:url('tr.png');
}
.l{
position:absolute;
left:0px;
right:auto;
top:15px;
bottom:15px;
width:15px;
height:auto;
background-image:url('l.png');
}
.c{
position:absolute;
left:15px;
right:15px;
top:15px;
bottom:15px;
width:auto;
height:auto;
background-color:black;
color:yellow;
}
.r{
position:absolute;
left:auto;
right:0px;
top:15px;
bottom:15px;
width:15px;
height:auto;
background-image:url('r.png');
}
.bl{
position:absolute;
left:0px;
right:auto;
top:auto;
bottom:0px;
width:15px;
height:15px;
background-image:url('bl.png');
}
.b{
position:absolute;
left:15px;
right:15px;
top:auto;
bottom:0px;
width:auto;
height:15px;
background-image:url('b.png');
}
.br{
position:absolute;
left:auto;
right:0px;
top:auto;
bottom:0px;
width:15px;
height:15px;
background-image:url('br.png');
}

#box1{
position:absolute;
left:0px;
right:auto;
top:0px;
bottom:auto;
width:250px;
height:250px;
}
The point of it is that a 'content box' will have 4 'empty' divs before
it and 4 after it. The block of text in the centre will then be
surrounded by 8 images. In my case its a kind of fading black into
white effect. And here is the HTML:
<div id="box1">
<div class="tl">
</div>
<div class="t">
</div>
<div class="tr">
</div>
<div class="l">
</div>
<div class="c">
Lots of text lots of text lots of text lots of text lots of
text lots of text lots of text
</div>
<div class="r">
</div>
<div class="bl">
</div>
<div class="b">
</div>
<div class="br">
</div>
</div>

And (in my opinion) it looks really good... but it only works if I know
what size to make the box. If there is too much text in the centre bit
it flows off out the bottom and looks stupid. But as the edge bits are
stuck in place using absolute positioning it only works if the box they
are in are positioned absolutely. So i'm wondering if there is a way to
create a similar effect but without absolute positioning?

Any ideas?

Paul

 

[Andy Dingley]

I hope at least some of this makes sense...

No, because you posted it to Usenet (a text-only medium) rather than
uploading it as a web site.

How many people do you think will bother to read it, split and and
upload it to their own servers so that they can see what your post is
about?

People who are useful are likely to be busy. The people most likely to
have free time are the trolls. Your choice.

 

[JDS]

I hope at least some of this makes sense...

URL?

 

[Paul B]

No, because you posted it to Usenet (a text-only medium) rather than
uploading it as a web site.

How many people do you think will bother to read it, split and and
upload it to their own servers so that they can see what your post is
about?

People who are useful are likely to be busy. The people most likely to
have free time are the trolls. Your choice.

Yes, apologies. I understand now. Here it is:
http://www.seventynine.net/testing/test100.html

 

[Nik Coughlin]

I hope at least some of this makes sense...

Something like this you mean?

http://nrkn.com/round/

 

[dorayme]

http://www.seventynine.net/testing/test100.html

This url, combined with your previous

"The point of it is that a 'content box' will have 4 'empty' divs
before it and 4 after it. The block of text in the centre will
then be surrounded by 8 images. In my case its a kind of fading
black into white effect."

and

"And (in my opinion) it looks really good... but it only works if
I know what size to make the box. If there is too much text in
the centre bit it flows off out the bottom and looks stupid. But
as the edge bits are stuck in place using absolute positioning it
only works if the box they are in are positioned absolutely. So
i'm wondering if there is a way to create a similar effect but
without absolute positioning?"

would have to make this one of the most baffling explanations
ever offered to alt.html in order to get an answer to

"Any ideas?"

See http://www.dorayme.150m.com/pics/baffling.png for how it
looks on my browsers...

 

[Paul B]

Something like this you mean?

http://nrkn.com/round/

That's great. I think that'll do the job, thanks.

 

[Mike Scirocco]

That's great. I think that'll do the job, thanks.

You can get simple rounded corners without graphics or javascript:

http://www.spiffycorners.com/

Mike

 

[Nik Coughlin]

You can get simple rounded corners without graphics or javascript:

http://www.spiffycorners.com/

Mike

Clever trick that.

 

[Martin Jay]

You can get simple rounded corners without graphics or javascript:

http://www.spiffycorners.com/

It breaks in IE5.5, but the effect still looks quite pretty.

 

[Jonathan N. Little]

It breaks in IE5.5, but the effect still looks quite pretty.

Many things break in IE5.5, one being your computer when used for web
surfing ;-)