This is a quick rehash of your earlier page. Will need to let this one sit for while and see where you go before looking any further. Only the document and the layout css have been altered, not the other two.
HTML 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" lang="en" xml:lang="en">
<head>
<title>Atlantis Project - Nasimi Tray | Zaynab Mahmood</title>
<meta name="title" content="Atlantis Project - Nasimi Tray | Zaynab Mahmood" />
<meta name="description" content="Atlantis Project - Nasimi Tray | Zaynab Mahmood" />
<meta name="keywords" content="Expert logo design for food and beverage luxury brands. Contact freelancer" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Robots" content="NOINDEX" />
<link rel="stylesheet" type="text/css" href="../layout.css" />
<link rel="stylesheet" type="text/css" href="../2c-hd-ft-fixed-presentation.css" />
<link rel="stylesheet" type="text/css" href="../navigationalinks.css" />
</head>
<body>
<div id="outer">
<div id="hdr"></div>
<div id="bar"></div>
<div id="bodyblock">
<div id="l-col">
<ul id="nav">
<li><a href="#"><img src="http://www.webproworld.com/images/ZaynabLogo2.jpg" width="145" height="75" alt="" />Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Biography</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Shop</a></li>
</ul>
</div>
<div id="cont">
<h1>Test Heading</h1>
<div class="contentbox">
<b class="font1"> <span class="font2"> </span> </b>
</div>
<div>
<img src="http://www.webproworld.com/images/client_names_homepage.jpg" alt="Client names" />
<div id="ftr">(c) 2009 Zaynab Mahmood</div>
</div>
</div>
</div>
</div>
</body>
</html>
I squished all the embedded and inline css into the LAYOUT document:
Code:
html, body {
margin:0;
padding:0;
text-align: center;
font-size: 100%;
color: #000;
background: #fff;
}
#outer {
width: 730px;
margin: auto;
font-family: Helvetica, Impact, sans-serif;
color: #333;
background: #fff;
border: 1px solid #fff;
position: relative;
}
#hdr {
height: 10px;
color: #fff;
background: #fff;
}
#bar {
height: 7px;
color: #fff;
background: #fff;
border: solid #fff;
border-bottom-color: #fff;
border-width: 1px 0 1px 0;
}
#bodyblock {
width: 100%;
position: absolute;
}
#l-col {
float: left;
width: 145px;
color: #333;
background: #fff;
}
#cont {
width: 575px;
border: solid #fff;
border-width: 0 0 0 1px;
text-align: left;
color: #333;
background: #fff;
}
.contentbox {
float: left;
width: 575px;
margin: 1px 1px 0 0;
padding: 0 0 0 1px;
font-size: 80%;
}
#ftr {
float: left;
width: 575px;
height: 25px;
margin: 2px 1px 10px 0;
padding: 0 0 0 1px;
font-size: 60%;
color: #333;
background: #fff;
border: solid #fff;
border-width: 1px 0 0 0;
}
#ftr ul,
#ftr ol,
.contentbox ul,
.contentbox ol {
list-style: none;
}
.font1 {
padding-top: none;
font-size: 85%;
color: #00aeef;
background-color: transparent;
}
.font2 {
padding-top: none;
font-size: 75%;
font-weight: bold;
color: #00aeef;
background-color: transparent;
}
.font3 {
font-size: 75%;
font-weight: bold;
color: #707070;
background-color: transparent;
}
#outer,
#hdr,
#l-col,
#cont {
text-align: left;
}
#bodyblock,
#ftr {
text-align: right;
}
.clear {
clear: both;
height: 1px;
overflow: hidden;
}
img,
a img {
border: none;
}
#nav a img {
display: block;
margin: 0 0 1em 0;
}