Plain Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Custom layout by jerryLee of SEO in Texas</title>
<style type="text/css">
<!--
/*
* AUTHOR [ jerryLee]
* DATE [ 03/2010 ]
* AUTHOR URL [ www.seointexas.com ]
* AUTHOR EMAIL [ contact@seointexas.com ]
===========================================[ATTENTION DEVELOPERS AND GRAPHIC DESIGNERS]=============================================
I am beginning development on a project that is going to revolutionize the SEO world, and it will more than likely make me and a couple of other people very wealthy. If you are interested, and fairly good with code or graphics, let me know. Email me to the address above.
*/
body {
margin:0;
} /* notice how I do not specify pixels here, this is how you make the content snug up to the top of the page */
#wrapper {
margin:0px auto;
width:1000px;
height:auto;
} /* this is where I set my main width, most everything else will style to 100% or whatever percentage applies, so if I want to change the main width later, I only have to change it here, the other widths will automatically adjust because they are in percentages. */
#top {
margin:0px;
width:100%;
height:20px;
} /* this can be used above the entire page as a navigation */
#header {
margin:0px;
width:100%;
height:150px;
background-color:#cccccc;
}
#navigation {
margin:0px;
width:100%;
height:30px;
}
#content_holder {
margin:0px;
width:100%;
height:auto;
}
#content_left {
margin:0px;
padding:10px;
width:25%;
height:auto;
float:left;
} /* notice this is set to 25%, and floated left, this will maintain a 25% wide left column, and the float will pull it to the left */
#content_right {
margin:0px;
padding:10px;
width:25%;
height:auto;
float:right;
} /* same as the last one, except floated to the right, and 75%, this can also be set to something like 25%, which would make a middle column without a middle column really being there. */
#main_body {
margin:0px;
padding:10px;
width:auto;
height:auto;
float:right;
}
#footer {
margin:0px;
width:100%;
height:150px;
background-color:#cccccc;
} /* in a lot of cases, the footer actually mirrors the header
*/
#logo {
margin:20px;
width:150px;
}
/* begin menu styles */
#menu { margin:0px; width:100%; height:30px; background-color:#000000; }
#menu ul { margin:0px; list-style-type:none; width:70%; line-height:.5; }
#menu li { margin:0px; padding:10px; float:left; width:100px; }
.selected { background-color:#0099CC; } /* this will highlight the selected link, to show which page you are on */
#menu a { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; text-decoration:none; }
#menu a:hover { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; color:#FF3300; text-decoration:underline; }
.clear {
clear:both;
}
-->
</style>
<!-- styles EOF make sure to put these in a separate file and link to them with the above link, Google external style sheets if you need to -->
</head>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!-- this signifies the file you will create with the css below and paste into a file called styles.css in your styles folder -->
<body>
<div id="top"><?php include($_SERVER['DOCUMENT_ROOT']."/jerry_teaching/backlinks.php"); ?> </div><!--php code for breadcrumbs aka top links, automatically updated as you go through the site. -->
<!-- top EOF -->
<div id="wrapper">
<div id="header">
<div id="logo">
<img src="http://www.seointexas.com/images/logo.png" width="100" />
<span style="position:absolute; top:-5000px; left:-5000px;">Logo</span><!-- by throwing this text off the page with a position style, I can help my SEO with a little extra keyword action, and no one has to see it, they get to see the nice looking logo! -->
</div> <!-- logo EOF -->
</div> <!--header eof-->
<div id="menu">
<ul>
<li><a href="#" class="selected">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Schedule</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div> <!-- menu eof -->
<div id="content_wrapper">
<div id="content_left">
<h1>Left Column</h1>
<p>this is a great place to put navigation, advertising, or whatever else your heart desires.</p>
</div><!--content left eof-->
<div id="content_right">
<h1>Right Column</h1>
<p>this is a great place to put Articles, advertising, or whatever else your heart desires.</p>
</div>
<!--content right eof-->
<div id="main_body">
<h1>Middle Column</h1>
<p>this is a great place to put navigation, advertising, or whatever else your heart desires. bz';lcvbmz';clxbmz';clbmz'c;blmz'c;lbmz'x;clbmz';lbmz';lbmz';lbm</p>
</div><!--main body eof-->
<div class="clear"></div>
<div id="footer">
<!--php code for the date, keeps it updated -->
© Copyright <?php
$today = mktime(0, 0, 0, date("m"), date("d"), date("y"));
echo "Today is ".date("m/d/y", $today);
?>
</div>
<!--footer eof-->
</div>
<!--content wrapper EOF-->
</div>
<!--wrapper eof-->
</body>
</html>
