Sorry about that! It's my first time posting and first time coding so kinda new to it all! I've sorted out the images to the are available online. Just want to note it is a prototype website so images used will not be used in final web design.
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>Home</title>
<script type="text/javascript">
if (document.images) {
image1 = new Image;
image2 = new Image;
image3 = new Image;
image4 = new Image;
image5 = new Image;
image6 = new Image;
image1.src = "http://i.imgur.com/l2E4e.jpg"
image2.src = "http://i.imgur.com/Hb1oa.jpg"
image3.src = "http://i.imgur.com/vFbYk.jpg"
image4.src = "http://i.imgur.com/ci3mO.jpg"
image5.src = "http://i.imgur.com/3Q6MX.jpg"
image6.src = "http://i.imgur.com/hGVEy.jpg"
};
</script>
<link href="Reset.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#maintable {
width: auto;
border-top: 3px solid #000000;
border-left: 3px solid #000000;
border-right: 3px solid #000000;
border-bottom: 3px solid #000000;
background-color: #fff;
}
#header {
padding-top: 50px;
padding-left: 10px;
padding-right: 10px;
border-bottom: 3px solid #000000;
}
.title {
color: #000000;
font: Verdana, Geneva, sans-serif;
font-size: 35px;
}
.links {
color: #000000;
font: Verdana, Geneva, sans-serif;
font-size: 15px;
}
#maincontent {
overflow:hidden;
background: #FFF;
position:relative;
display: table;
}
#mainlinks {
padding-top: 50px;
font: Verdana, Geneva, sans-serif;
font-size: 25px;
padding-right: 20px;
display: table-cell;
}
#picture {
width:50px;
height: 50px;
padding-top: -100px;
padding-left: 100px;
position:absolute;
display: table-cell;
}
#footerleft {
width: auto;
background-color: #ffffff;
padding-top: 20px;
border-top: 3px solid #000000;
padding-bottom: 2px;
}
#footerright {
width: auto;
background-color: #ffffff;
padding-top: 14px;
border-top: 3px solid #000000;
padding-bottom: 3px;
}
.developer {
float:right;
font-size: 12px;
}
.footerpadding {
padding: 0px;
margin: 0px;
border: 0px;
}
.icons {
position: relative;
left: 610px;
}
.navigation {
font-size: 19px;
position: relative;
left: 640px;
text-decoration: none;
}
a {
color: #000000;
text-decoration:none
}
a:visited, a:link {
color: #000000;
}
@-moz-document url-prefix() {
.icons {
position: relative;
left: 610px;
}
}
</style>
</head>
<body>
<p> </p>
<div id="maintable">
<div id="header">
<p class="title"><a href="Index.html">BenJamin</a><font class="navigation"><a href="Index.html">Home</a> <a href="portrait.html">Portrait</a> <a href="events.html">Events</a> <a href="music.html">Music</a> <a href="personal.html">Personal</a> <a href="contact.html">Contact</a></font></p></div>
<div id="maincontent">
<div id="mainlinks">
<a href="subpage.html"
onMouseover="document.imagename.src=image2.src" onMouseout="document.imagename.src=image1.src"><ul>• Lorem ipsum</ul><br /></a>
<a href="http://www.google.com"
onMouseover="document.imagename.src=image4.src" onMouseout="document.imagename.src=image1.src"><ul>• Maecenas auctor</ul><br /></a>
<a href="http://www.twitter.com"
onMouseover="document.imagename.src=image5.src" onMouseout="document.imagename.src=image1.src"><ul>• Pellentesque habitant</ul><br /></a>
<a href="http://www.reddit.com"
onMouseover="document.imagename.src=image3.src" onMouseout="document.imagename.src=image1.src"><ul>• Proin et enim magna</ul><br /></a>
<a href="http://www.bbc.co.uk"onMouseover="document.imagename.src=image6.src" onMouseout="document.imagename.src=image1.src"><ul>• Jaffa enim magna</ul></a>
</div>
<div id="picture">
<img src="http://i.imgur.com/l2E4e.jpg" name="imagename" border="0" width="700" height="500">
</div>
</div>
<!--allowing a gap between the main content and header-->
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<div id="footerleft">
<div class="footerpadding">© 2011 <br />
The view and thoughts of the website are my own and not of any organisation that I work for.
<img src="http://i.imgur.com/9J9sE.jpg" width="20" height="20" border="0" class="icons"/> <img src="http://i.imgur.com/nsW41.jpg" width="20" height="20" border="0" class="icons" /> <img src="http://i.imgur.com/zDrXU.jpg" width="20" height="20" border="0" class="icons" /></div></div>
</div>
<font class="developer">Created by</font>
</body>
</html>