http://alibimurders.co.uk/index.html

That is my website. If you look at the top, you can see links which don't do much at the moment but will contain urls for different pages.

The problem I have is how can I make them in to tab like images. For example, if you open up your browser and have multiple tabs, you can see that they are seperated from each other etc. I'll obviously need images of tabs then. Something like this: http://www.istockphoto.com/file_thumbview_approve/4789259/2/istockphoto_4789259-website-tabs.jpg

How can I make the bottom part of that header or the top part of the grey area in to a tab section? this is my code so far:

CSS:

body
	{
		background-image: url('background.jpg');
		background-repeat: repeat-x;
	}

#wrapper
	{
		width: 960px;
		height: 1200px;
		background-image: url('');
		color: white;
		margin: auto;
		
	}
#navigation
	{
		display: inline;
		padding: 50px;
		list-style-type: none;
		color: black;
	}
	
#header
	{
		width: 960px;
		height: 150px;
	}

#logo 
	{
		width: 150px;
		height: 150px;
		float: left;
		background-color: blue;
	}

#title
	{
		width: 760px;
		height: 150px;
		float: right;
		background-color: lime;
		
	}

#main
	{
		width: 960px;
		height: 650px;
		background-color: grey;
		
	}

#footer
	{
		width: 960px;
		height: 200px;
	}

And my HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://w3.org/1999/xhtml">
<head>
<title> My Website </title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<!-- Main Div Tag -->
<div id="wrapper">
	<div id="header">
		<div id="logo">Logo</div>
			<div id="navigation">
				
				    <a href="#">Javascript</a>
					<a href="#">C# & XNA</a> 
					<a href="#">University</a> 
					<a href="#">Final Year Project</a>
					
			</div>
		</div>
		
		<div id="main">Main
		<div id="slideshow">Slideshow</div>
		<div id="leftbar">Leftbar</div>
		<div id="text">Text</div>
		<div id="rightbar">Rightbar</div>
		<div id="footer">Footer</div>
		</div>
</div>

</body>
<html>

Help is extremely appreciated. Thank you.

Try this code very simple to understand
just customize background colurs as you want

<html>
<head>
<style type="text/css">
<!--
.topmenu {
	border-bottom-width: thick;
	border-bottom-style: groove;
	border-bottom-color: #666;
	height: 20px;
	padding: 2px;
}
<!-- your menu class -->
.topmenu a {
	background-color: #666;
	border-bottom-width: medium;
	border-bottom-style: groove;
	border-bottom-color: #FFF;
	float: left;
	width: auto;
	font-family: sans-serif;
	font-size: 14px;
	color: #FFF;
	text-decoration: none;
	margin-right: 2px;
	padding-top: 2px;
	padding-right: 10px;
	padding-bottom: 2px;
	padding-left: 10px;
}
<!-- tab effect when on mouse over-->
.topmenu a.hover, .topmenu a:hover {	background-color: #000;
	border-bottom-width: medium;
	border-bottom-style: groove;
	border-bottom-color: #000;
	float: left;
	width: auto;
	font-family: sans-serif;
	font-size: 14px;
	color: #FFF;
	text-decoration: none;
	margin-right: 2px;
	padding-top: 2px;
	padding-right: 10px;
	padding-bottom: 2px;
	padding-left: 10px;
}
-->
</style>
</head>

<body>
<div class="topmenu">
<!--give class hover to link which you want to show as selected tab -->
 <a href="http://google.com" class="hover">google</a>
  <a href="http://yahoo.com">yahoo</a>
   <a href="http://flicker.com">flicker</a>
    <a href="http://facebook.com">facebook</a>
</div>
</body>
</html>