oh yea, guess i did forget that didnt i lol. it is a little sloppy, mainly from my preloaded rollover images.
index file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TITLE</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
color: #3A64AC;
}
a:visited {
color: #3A64AC;
}
a:hover {
color: #83BAF2;
}
a:active {
color: #83BAF2;
}
body {
background-color: #FFFFFF;
background-repeat: repeat-x;
}
.style9 {color: #000000}
body,td,th {
font-family: verdana;
}
.style10 {font-size: 107%}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<div id="logo">
</div>
<body onload="MM_preloadImages('images/home2.gif','images/contact2.gif','images/portfolio2.gif','images/services2.gif')">
<div id="page" >
<div id="content">
<center><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/home2.gif',1)"><img src="images/home.gif" alt="Home" width="100" height="35" border="0" id="Home" /></a> <a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/contact2.gif',1)"><img src="images/contact.gif" alt="Contact" width="115" height="35" border="0" id="Contact" /></a> <a href="portfolio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Portfolio','','images/portfolio2.gif',1)"><img src="images/portfolio.gif" alt="Portfolio" width="130" height="35" border="0" id="Portfolio" /></a> <a href="services.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Services','','images/services2.gif',1)"><img src="images/services.gif" alt="Services" width="130" height="35" border="0" id="Services" /></a></center>
<p><img src="images/bar.gif" alt="" width="575" height="1" hspace="35"/><BR /><BR /><BR />
TEXT HERE
</p>
</div>
</div>
<div class="style9" id="footer">
<p class="links style9"><BR /><a href="index.html">Home</a> - <a href="contact.html">Contact</a></p>
</div>
</div>
</body>
</html>
css file
* {
margin: 0;
padding: 0;
}
body {
margin: 0 0;
background: #000000 url(images/img01.gif) repeat-x;
font: normal 13px Arial, verdana, sans-serif;
color: #000000;
}
h1, h2, h3 {
color: #313131;
}
h1 {
margin: 0;
padding: 0;
font: 10px "verdana", Times, serif;
color: #ffffff;
letter-spacing: 3px;
}
h2 {
font-size: 100%;
color: #000000;
}
h3 {
margin-bottom: 1em;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 77%;
font-weight: bold;
}
p, blockquote, ol, ul {
margin-bottom: 1.5em;
text-align: justify;
line-height: 167%;
font-size: 100%;
}
ol {
list-style-position: inside;
}
ul {
list-style: none;
}
ul li {
padding-left: 20px;
background: url(images/img09.gif) no-repeat left center;
}
a {
text-decoration: none;
color: #313131;
}
a:hover {
text-decoration: none;
color: #800000;
}
/* Logo */
#logo {
align: center;
width: 900px;
height: 545px;
margin: 0 auto;
padding: 0 auto;
background: url(images/header.jpg) no-repeat;
}
#logo a {
text-decoration: none;
color: #000000;
}
/* Page */
#page {
width: 676px;
margin: -200px auto auto auto;
background: url(images/textbg.jpg) repeat-y;
}
/* Content */
#content {
float: center;
width: 646px;
padding: 15px;
background: url(images/textbg.jpg) no-repeat;
}
#content .content {
padding: 0px 0px 0px 0;
background: url repeat-x;
}
.floating-box p, .floating-box blockquote, .floating-box ol, .floating-box ul {
line-height: 144%;
font-size: 92%;
}
.floating-box img {
border: 5px solid #000000;
}
/* Footer */
#footer {
width: 676px;
height: 75px;
margin: 0 auto;
background: url(images/img06.gif) no-repeat;
}
#footer p {
margin: 0;
font-size: 85%;
}
#footer .links {
float: left;
margin: 10px 5px;
color: #333333;
}
#footer .legal {
float: right;
margin: 10px 5px;
color: #333333;
}
#footer a {
color: #333333;
}
#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#lightbox a img{ border: none; }
thanks