Posted by Paul B on 04/12/06 20:03

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

• Next in forum: Re: Decorating div boxes with CSS
• Prev in forum: Re: How do you use extenrnal javascript file if script different on each page?
• Thread view: Decorating div boxes with CSS

[Reply to this message]