ID = content CSS position:relative; float:left; width:60% margin-left:22%; margin-bottom:15px; z-index:5 IE-6 CSS float:none IE-7 CSS None
Javscript code
The following code performs the basics of locating the target containers and inserting the required elements.
More advanced code could be used but what follows is enough to get the job done.
function set_edges () {
bEdged = true;
var containers = Array('content', 'main_nav','left_ads','site_nav','right_nav','footer');
var container, cntnt;
for (key in containers) {
container = document.getElementById(containers[key])
cntnt = container.innerHTML;
container.innerHTML = '<div class="tl">' +
'<span class="tr"></span>' +
'<span class="ll"></span>' +
'<div class="lr">' +
'<div class="cntnt">' +
cntnt +
'</div>' +
'</div>' +
'</div>';
}
}
HTML code
The general form of the HTML for each of the containers is :
<div id="some_container_id">
<div class="tl">
<span class="tr"><!-- --></span>
<span class="ll"><!-- --></span>
<div class="lr">
<div class="cntnt">
[...CONTENT...]
</div>
</div>
</div>
CSS Rules
The CSS applied to all containers is :
.tl, .lr, .tr, .ll {
background:url([...Background Image...]]) no-repeat
}
.tl, .lr {
position:relative
}
.tl {
margin-right:33px;
margin-bottom:33px;
background-position:top left
}
.lr {
top:33px;left:33px;
background-position:bottom right
}
.tr, .ll {
position:absolute;
height:33px;
width:33px
}
.tr {
top:0;
right:-33px;
background-position:top right
}
.ll {
bottom:-33px;
left:0;background-position:bottom left
}
.cntnt {
position:relative;
top:-16px;
left:-16px
}
Internet Explorer 6 CSS
Internet Explorer 6 needs the following extra CSS to function correctly :
.tr, .ll {
display:block
}
.tr {
right:0
}
.ll {
bottom:0
}
.cntnt {
padding:1px
}
Internet Explorer 7 CSS
Internet Explorer 7 needs the following extra CSS to function correctly :
.cntnt {
padding:1px
}
.tl {
display:inline-block
}