Frame DIV+CSS
Article Summary
[ELiTE]bot
Fri April 17, 2009, 6:03 pm
admin
Tue April 21, 2009, 12:58 am
272
57
Fri April 17, 2009, 12:00 am
Fri April 17, 2009, 12:00 am
Never
Public
Author Summary
[ELiTE]bot
Eldar G
ELiTE Council
Tue August 12, 2008, 2:28 am
61
Fri August 14, 2009, 9:26 pm
Here is an example of a div frame which i think is almost as fail proof as they come
<style type="text/css">
.i{
width:auto;
}
.i1 {
background-image: url(01.gif);
background-repeat: no-repeat;
height:24px;
overflow:hidden;
}
.i2 {
margin: 0px 9px;
background-image: url(02.gif);
background-repeat: repeat-x;
height:24px; overflow:hidden;
}
.i3 {
background-image: url(03.gif);
background-repeat: no-repeat;
background-position: right top;
height:24px;
overflow:hidden;
}
.i4 {
background-image: url(04.gif);
background-repeat: repeat-y;
}
.i5 {
background-image: url(05.gif);
margin-right: 9px;
margin-left: 9px;
/*overflow:auto;*/
}
.i6 {
background-image: url(06.gif);
background-position: right top;
background-repeat: repeat-y;
}
.i7 {
background-image: url(07.gif);
background-repeat: no-repeat;
background-position: left bottom;
height: 10px;
overflow:hidden;
}
.i8 {
background-image: url(08.gif);
background-repeat: repeat-x;
background-position: left bottom;
margin-right: 9px;
margin-left: 9px;
height: 10px;
font-size:9px;
overflow:hidden;
}
.i9 {
background-image: url(09.gif);
background-position: right bottom;
background-repeat: no-repeat;
height: 10px;
overflow:hidden;
}
Here is html
<div class="i">
<!--1st row-->
<div class="i3">
<div class="i1">
<div class="i2">This is title</div>
</div>
</div>
<div class="i6">
<div class="i4">
<div class="i5"> This is
content of
vffffffffffffffffffffffffffffffffffffffffthe MIDDLE colum
vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvn. It
caf the MIDDLE column. It can be
short, longer or very long. This is content of the MIDDLE column. It
can be short, longer or very long. This is content of the MIDDLE
column. It can be short, longer or very long. This is content of the
MIDDLE column. It can be short, longer or very long. This is content of
the MIDDLE column. It can be short, longer or very long. </div>
</div>
</div>
<!--3rd row-->
<div class="i9">
<div class="i7">
<div class="i8"></div>
</div>
</div>
</div>



URL