<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>min-max two-columns</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
<!-- body
{
text-align: center;
margin: 0px; padding: 0px;
margin-left: 20px;
margin-right: 20px; /* will keep a minimum amount of space to either side of the content container
even at small browser widths. */ background-color: #737268;
}
div
{ margin: 0px;
padding: 0px; /* set defaults for all CSS 'boxes' */
}
#content
{ position: relative;
margin: 0 auto;
text-align: left;
max-width:800px;
min-width:600px;
_width:700px;
background-color: #bbb;
}
#banner
{
height: 100px;
width: 100%;
background-image: url('http://www.goshen.edu/beckybh/clouds.jpg');
position: relative;
}
#navbar
{
z-index:10;
background-color: #fff;
width: 100%;
}
-->
</style>
</head>
<body>
<div id="content">
<div id="banner">
<div id="navbar"> This is the navbar
<a href="http://www.goshen.edu/communication/comm326/layout/peru/pixel.php">link 1</a>
<a href="http://www.goshen.edu/communication/comm326/layout/peru/ssi.php">link 2</a>
<a href="http://www.goshen.edu/communication/comm326/layout/peru/feeds.php">link 3</a>
</div><!-- closes 'navbar' -->
</div><!-- closes 'banner' -->
<div id="maincontent">
<h2>Layout-- Banner with navigation links</h2>
<p>This layout has...</p>
<ul><li>One 'banner' box with a background image (of seals),</li>
<li>One 'navbar' box positioned on top of the banner box</li>
<li>A 'maincontent' box for the text, that follows in the normal flow after the banner box.</li>
</ul>
<h3>Why a background image for the banner?</h3>
<p>The whole layout is flexible. By setting the banner image as a background image,
it is automatically "cropped" to be no larger than the width of our #content container.</p>
</div><!-- closes 'maincontent' -->
</div><!-- closes 'content' -->
</body>
</html>