Sample Layout
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
body {
margin: 0; /* remove browser default margin */
padding: 0; /* remove browser default padding */
background: #666; /* dark gray background - can use an image as well */
font: 14px/1.5 Verdana, Geneva, sans-serif; /* "14px" is the font size, "1.5" is the line-height multiple of the font size */
}
a img {
border:0; /* remove default borders from linked images */
}
#bg {
width:1000px;
margin:auto;
background:url(/images/bg/1000_middle_trans.png) center repeat-y;
}
#container {
width: 960px;
margin: auto; /* centers #container in page */
background: #FFFFFF;
/* border-bottom:1px solid #FD9133; /* 1 px line at the bottom of container */
}
#bottom_bg {
background:url(/images/bg/1000_bottom_trans.png) top center no-repeat;
height:20px;
}
#header {
height: 120px;
overflow: hidden; /* hide anything in the header that might try to make it more than 120px high */
}
#header p {
position: absolute;
left: -9999px; /* hide this text by placing it far off screen to the left */
}
/******** Main Menu ********/
#menu {
height: 30px; /* adjust this if your font is bigger or smaller */
background: url(images/bg/menu_bg.png) repeat-x; /* gradient image behind menu */
text-align: center; /* keep the menu items in the center of the menu bar */
}
#menu ul { /* remove default margin, padding, and bullets from ul */
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li { /* remove any margin or padding */
margin: 0;
padding: 0;
display: inline; /* makes menu items line up horizontally instead of default vertical */
}
#menu ul li a {
text-decoration: none; /* no underline on links by default */
color: #FFFFFF;
padding: 8px 16px; /* shorthand for vertical and horizontal padding for links */
font: bold 18px/1.5 Georgia, "Times New Roman", Times, serif;
text-shadow: #333 1px 1px 0px; /* add a slight shadow below text, dark in color */
}
#menu a:hover {
text-decoration:underline; /* underline only on hover */
}
#menu a.selected { /* special class for when you are in the page this menu item links to */
background: #FFFFFF;
color: #000000;
text-shadow: #DDD 1px 1px 0px; /* same shadow as a bove, lighter color */
/* the next 6 lines give us rounded corners - 3 versions for 3 different kinds of browsers */
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
border-top-left-radius: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-right-radius: 8px;
border-top-right-radius: 8px;
}
/******** Side Bar ********/
#sidebar {
float: left; /* the image can be on the right or the left */
padding: 10px;
width: 350px;
}
#sidebar img {
-moz-box-shadow: 2px 2px 2px #666;
-webkit-box-shadow: 2px 2px 2px #666;
box-shadow: 2px 2px 2px #666;
}
/******** Content Area ********/
#content {
float: right;
overflow: auto;
padding-right:10px;
height: 510px;
width: 570px;
}
#content a {
color: #4E6A92;
}
#content a:hover {
color: #FFFFFF;
background: #4E6A92;
}
#content h1, #content h2, #content h3 {
font-family: Georgia, "Times New Roman", Times, serif;
text-shadow: #CCC 1px 1px 0px;
}
#content h1 {
font-size: 30px;
}
#content h2 {
font-size: 24px;
}
#content h3 {
font-size: 18px;
}
/******* Footer *******/
#footer {
width: 960px;
margin: 10px auto;
color: #FFFFFF;
}
#footer .left {
width: 470px;
float: left;
text-align: left;
}
#footer .right {
width: 470px;
float: right;
text-align: right;
}
#footer a {
color: #FFFFFF;
}
#footer a:hover {
color: #FD9133;
}
/******** General Styles ********/
.hr {
background-color: #333333;
height: 1px;
line-height: 1px;
margin: 18px 0;
}
.clear {
clear: both;
}
</style>
<!------------------->
<!-- END _head.php -->
<!------------------->
<title>Your Name :: Your Instrument</title>
<!-------------------->
<!-- Begin _top.php -->
<!-------------------->
</head>
<body>
<div id="bg">
<div id="container">
<div id="header">
<p>Your Name :: Your Instrument</p>
<a href="/"><img src="http://placehold.it/960x120" alt="Replace Me With your Real Header Graphic" /></a>
</div>
<div id="menu">
<ul>
<li><a href="/" <?php if (preg_match("/index.php/", $_SERVER['SCRIPT_FILENAME'])) echo 'class="selected"'; ?>>Home</a></li>
<li><a href="about.php" <?php if (preg_match("/about.php/", $_SERVER['SCRIPT_FILENAME'])) echo 'class="selected"'; ?>>About</a></li>
<li><a href="photos.php" <?php if (preg_match("/photos.php/", $_SERVER['SCRIPT_FILENAME'])) echo 'class="selected"'; ?>>Photos</a></li>
<li><a href="audio.php" <?php if (preg_match("/audio.php/", $_SERVER['SCRIPT_FILENAME'])) echo 'class="selected"'; ?>>Audio</a></li>
<li><a href="video.php" <?php if (preg_match("/video.php/", $_SERVER['SCRIPT_FILENAME'])) echo 'class="selected"'; ?>>Video</a></li>
<li><a href="calendar.php" <?php if (preg_match("/calendar.php/", $_SERVER['SCRIPT_FILENAME'])) echo 'class="selected"'; ?>>Calendar</a></li>
<li><a href="links.php" <?php if (preg_match("/links.php/", $_SERVER['SCRIPT_FILENAME'])) echo 'class="selected"'; ?>>Links</a></li>
<li><a href="contact.php" <?php if (preg_match("/contact.php/", $_SERVER['SCRIPT_FILENAME'])) echo 'class="selected"'; ?>>Contact</a></li>
</ul>
</div>
<div class="clear"></div>
<!------------------>
<!-- End _top.php -->
<!------------------>
<div id="sidebar">
<div id="imgwrapper">
<img src="http://placehold.it/350x500" alt="Replace Me With your Real Sidebar Graphic" />
</div>
</div>
<div id="content">
<h1>Page Title - Important</h1>
<a href="http://theoatmeal.com/comics/design_hell"><How a Web Design Goes Straight to Hell!</a>>
<p>This is a layout with a horizontal top menu and a limited vertical area. The left hand side is designed for an image 350 pixels wide by 500 pixels tall. The right side can accomodate 560 pixels in width, but is designed to scroll as height grows beyond 500 pixels.</p>
<div class="hr"> </div>
<p><a href="http://www.lipsum.com/">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Aenean vehicula, libero ac ullamcorper lobortis, nisl elit pharetra urna, ut imperdiet dui erat eget eros. Vivamus interdum mauris et erat varius ullamcorper at sit amet massa. Duis semper venenatis gravida. Nam eleifend adipiscing mattis. Proin nec massa egestas diam tincidunt rutrum. Donec luctus varius ante, a consectetur sapien eleifend in. Donec nec iaculis metus. Pellentesque id nibh enim, quis sollicitudin nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ultricies leo a velit aliquam at convallis massa aliquam. Fusce sodales pharetra dignissim. Etiam rhoncus augue vel ante tristique lacinia. Integer a est lacus, ut porta massa. Etiam id metus odio. Cras auctor neque ac sem varius consequat sed ac magna.</p>
</div>
<!----------------------->
<!-- Begin _bottom.php -->
<!----------------------->
<div class="clear"></div><!-- makes sure background stretches down to cover all of sidebar and content -->
</div><!-- close of #container -->
</div><!-- close of #bg -->
<div id="bottom_bg"></div>
<div id="footer">
<span class="left">Photography by <a href="#link_to_your_photographer">Your Photographer</a></span>
<span class="right">© <?php echo date('Y'); ?> Your Name :: <a href="terms_of_use.php">Terms of Use</a></span>
<div class="clear"></div>
</div>
</body>
</html>