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 |
|
