View Single Post
Old 07-18-2013, 09:14 PM   #7
tux
tux's Avatar
 
Join Date: Feb 2007
Location: Isle of Wight, that little island right at the bottom of the UK
Posts: 657
Default

Here you go Jude, this should point you in the right direction. I'm no expert and may not have this perfect but you should be able to pick it up if you play around with values and see what it does to the layout.

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rachael Smither Conservator</title>

<style type="text/css">


body {
	background-color: #B9C4D7;
	font-family: Tahoma, Geneva, sans-serif;
	margin: 0;
	padding: 0;
}
h1 {
	font-size: 2em;
	color: #000;
	margin: 0 auto;
	padding: 10px 0 0 10px;
}
h2 {
	font-size: 1.5em;
	color: #B9C4D7;
	margin: 20px 0 0 10px;
	padding: 0;
}
h3 {
	font-size: 1em;
	color: #000;
	margin: 0;
	padding: 0;
}
p{
	font-size: 0.8em;
	color: #000;
	margin: 0;
	padding: 0;
}
ul, li, a{
	list-style-type:none;
	text-decoration: none;
	line-height: 180%;
	color: #000;
}

#container{
	width: 1000px;
	background-color: #fff;
	margin: 0 auto;
	padding: 0;
	}
#header{
	height: 139px;
	background-color: #7B83A8;
	margin: 0 auto 0 auto;
	padding: 0;
}
#header img{
	float: right;
	margin: 0;
	padding: 0;
}
#sidebar1{
	width: 281px;
	float: right;
	background-color: #fff;
	margin: 0;
	padding: 0;
}
#content{
	height: 200px;
	width: 699px;
	float: left;
	background-color: #fff;
	margin: 0;
	padding: 10px;
}
#footer{
	background-color: #7B83A8;
	margin: 0;
	padding: 10px;
}
.clearfloat{clear:both; height:0;}
</style>

</head>

<body>

<div id="container">
    <div id="header"><img src="images/parchment.jpg" width="281" height="139" alt="Great Parchment Book &copy London Metropolitan Archives" title="Great Parchment Book &copy London Metropolitan Archives"/>
       	<h1>Rachael Smither</h1>
    		<h2>Paper Conservator</h2>
               	
    </div><!-- end header -->
    
    <div id="sidebar1">
    	<ul class="nav">
      		<li><a href="index.html">Home</a></li>
      		<li><a href="cv.html">Curriculum Vitae</a></li>
      		<li><a href="projects.html">Projects</a>  </li>
      		<li><a href="contact.html">Contact</a>  </li>
    	</ul>
	</div><!-- end sidebar1 -->
    
	<div id="content">
    	<h3>HOME PAGE</h3>		
	</div><!-- end content -->
  
<br class="clearfloat" />  
  
	<div id="footer">
		<p>&copy Rachael Smither 2013</p><br />
	</div> <!-- end .footer -->

</div><!-- end .container -->

</body>
</html>
Good luck.
tux is offline   Reply With Quote