BitWare

PapaGeek

Pet Wellness

CMM Services

How To Fix Social Serurity

Picture Frame

<BODY><DIV ID="bktop"><DIV ID="bklft"><DIV ID="bkbot"><DIV ID="bkrgt">
<DIV ID="bktoplft"><DIV ID="bkbotlft"><DIV ID="bktoprgt"><DIV ID="bkbotrgt">

The picture frame effect is created by enclosing the entire web page within eight nested DIVís. The DIVís themselves are merely named placeholders. It is the CSS file that defines the actions of each DIV.

</DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></BODY>


#bktop {background:#FFFAF4 url('bktop.jpg') repeat-x top left;}
The CSS file directs the outermost div to repeat one of the picture's sides along one edge and to fill in the rest of the background with the internal page color. Weíve changed the internal color to a light blue so you can see the effect.



#bklft {background:url('bklft.jpg') repeat-y top left;}
#bkbot {background:url('bkbot.jpg') repeat-x bottom left;}
#bkrgt {background:url('bkrgt.jpg') repeat-y top right;}
As the additional sides are placed, one over the other,
You can see how the corners are affected.



#bktoprgt {background:url('bktoprgt.jpg') no-repeat top right;}
#bktoplft {background:url('bktoplft.jpg') no-repeat top left;}
#bkbotrgt {background:url('bkbotrgt.jpg') no-repeat bottom right;}
#bkbotlft {background:url('bkbotlft.jpg') no-repeat bottom left;text-align:center;}
The corner graphicss are placed next with no repeat
This way they will overlay just the corners to complete the frame.



td # book top - - - col span =3
td # book left
- - -
row span =3
td # banner td # book right
- - -
row span =3
td # content
When combined, the 8 DIVís create the picture frame. The final step is to use CSS to hard code the outer rows and columns of a table to move the page content inside the frame.
#booktop   {height:90px;}
#bookleft   {width:85px;}
#bookright   {width:55px;}
#bookbottom   {height:100px;}
#content   {}
td # credits
td # book bottom - - - colspan=3

A-         A+

Table of Content

BitWare

PapaGeek

Pet Wellness

CMM Services

How To Fix Social Serurity

This webpage is also available in a fixed width template.

Variable HTML website, maintained with MySSI    
Copyright © 2012, BitWare Solutions