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.
