This is a preview of my website in progress (Disclaimer: I'm currently learning HTML to build this site, design comes next. I know it's not the conventional way to design a site, but oh well)
Is the HTML code for the header below correct and efficient? If not, how can I improve it to achieve the desired effect for the header which is one image?
Appreciate any help in advance!
HTML
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>CogRobot Studios</title>
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/screen.css" />
<!--[if IE]>
<link rel="stylesheet" href="stylesheets/ie.css" type="text/css" media="screen, projection">
<![endif]-->
<link rel="stylesheet" type="text/css" href="stylesheets/cogrobot.css" />
</head>
<body>
<div id="wrap" class="container">
<div id="bigheader"> </div>
<div id="header" class="rounded-corners column span-24 last"></div>
<div id="content" class="column span-15 colborder">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis risus eu nisi feugiat tincidunt sed vel eros. Maecenas a bibendum tellus. Nunc eu risus at tortor placerat mollis vel et lacus. Ut non massa odio, et commodo sapien...
</p>
<p>
More lorem ipsum text...
</p>
<p>
Additional lorem ipsum text...
</p>
<p>
Ending with some more lorem ipsum text...
</p>
</div>
<div id="sidebar" class="column span-7 last">
<p>
Yet more lorem ipsum text...
</p>
<p>
Even more lorem ipsum text...
</p>
</div>
<div class="rounded-cornersbottom" id="footer">
© 2005, Lorem ipsum dolor sit amet.
<br />
All trademarks and registered trademarks appearing on
this site are the property of their respective owners.
</div>
</div>
</body>
</html>
CSS
#wrap{
position: relative;
top: 150px;
}
body {
background: background: url("../images/header.png");
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
margin: 0px;
}
p, ul, li, h1, h2, h3, h4 {
margin: 0;
}
h3 {
margin: 0 0 20px 0;
padding: 0 0 5px 0;
font-weight: bold;
border-bottom: 1px solid #ccc;
}
#bigheader{
background: url("../images/gearheader2.png") no-repeat;
min-height: 347px;
min-width: 1062px;
top: -115px;
right: 0px;
position: absolute;
width: 100%;
z-index: -99;
margin: 0 auto;
}
#header {
width: 950px;
height: 177px;
}
#content{
background: #dbdbdb;
font-size: 105%;
padding: 20px 20px 20px 20px;
margin: 0;
width: 590px;
}
#sidebar {
float: right;
background: #dbdbdb;
font-size: 105%;
padding: 20px 20px 20px 20px;
margin: 0;
}
#footer {
background-color: #838383;
color: #c8c8c8;
text-align: center;
font-size: 90%;
clear: left;
}
h1 {
font-size: 120%;
color: #954b4b;
}
h2 {
font-size: 110%;
}
.slogan {
color: #954b4b;
}
.beanheading {
text-align: center;
line-height: 1.8em;
}
a:link {
color: #b76666;
text-decoration: none;
border-bottom: thin dotted #b76666;
}
a:visited {
color: #675c47;
text-decoration: none;
border-bottom: thin dotted #675c47;
}
.rounded-corners {
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-khtml-border-radius: 20px;
}
.rounded-cornersbottom {
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-khtml-border-radius: 20px;
}