Multiple frames/borders page.

Making this type of web page in the traditional way with nested tables leaves you with a web page cluttered with table tags.

Using CSS to create this page results in the simple HTML below - using just 6 <div> tags with the corresponding 6 closing </div> at the end.

The width of each surrounding frame is set by the padding on the body for the outer frame, and padding on each successive <div> element. The background and the black border lines are added in the styles.

The background images are the normal repeating tiles around 150x150 or so pixels.

You can have as many or as few as you want, and while these are set with equal width (padding) on top, bottom and each side, you can set different padding for any side, top and bottom.

  • The outer green frame is the body background.
  • The next shaded patterned frame is div frame0.
  • The next green frame is div frame1.
  • The next wider shaded frame is frame2.
  • The next wider green frame is frame3.
  • The narrow green frame is frame4 with a white border instead of black.

Below are sample HTML and CSS.

<body>
<div id="frame0">
<div id="frame1">
<div id="frame2">
<div id="frame3">
<div id="frame4">
<div id="pagecontent">

Put all the page content here.

</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

In the page head section, put this CSS. Of course, you also add all you own styles, and maybe move all to an external style sheet.

<style type="text/css">
body {
background: #acb88d url(img/border_color2.jpg);
border: 2px solid black;
padding:10px;
margin: 0;
}
#frame0 {
background: #acb88d url(img/border_color1.jpg);
border: 2px solid black;
padding: 8px;
}
#frame1 {
background: #acb88d url(img/border_color2.jpg);
border: 2px solid black;
padding: 10px;
}
#frame2 {
background: #acb88d url(img/border_color1.jpg);
border: 2px solid black;
padding: 20px;
}
#frame3 {
background: #acb88d url(img/border_color2.jpg);
border: 2px solid black;
padding: 20px;
}
#frame4 {
background: #acb88d url(img/border_color2.jpg);
border: 2px solid white;
padding: 5px;
}
#pagecontent {
background: white;
border: 1px solid black;
padding: 20px;
}
</style>

The content and design of this site are the property of WebTech University
and may not be used without written consent of the owner.
Copyright © 1998-2008 WebTech University. All rights reserved.
Privacy Statement