Mlynskey2/Tabs
Step One
Page is a work in progress. Not complete.
First we will set up the html pages we need. Below is the code to create index.html, which contains an un-ordered list of the pages we will create. These will later become our tabs.
<!DOCTYPE html>
<html>
<head> <title>Tabs Example - Home</title> </head>
<body>
<h1>Tabs Example</h1>
<div class="header">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="css.html">CSS</a></li>
<li><a href="xml.html">XML</a></li>
<li><a href="form.html">Form</a></li>
<li><a href="connected.html">Connected Media</a></li>
<li><a href="html5.html">HTML5</a></li>
<li><a href="research.html">Research</a></li>
</ul>
</div>
</body>
</html>
</html>
In the above code, I have enclosed the list of pages in a div. This div has the class "header", just to let us know that this is in the header of the page. This will serve a purpose that we will see when we write our CSS.
Go ahead and create the other pages: index.html, css.html, form.html, connected.html, html5.html, and research.html. Copy and past the above code into each of the pages, and change their titles to their respective names in the <title> tags. E.g. for css.html, the title would be <title>Tabs Example - CSS</title>.
Step Two
Now we have our pages. Each should be identical, containing a list of links to our pages. Next we need to style the list by creating an external style sheet.
Create a CSS document containing the following code:
.header ul {
list-style-type: none; margin: 0; padding: 0; overflow: hidden;
}
.header li {
float: left;
}
.header a:link, .header a:visited{
width: 150px; height: 30px; line-height: 30px;
display: block; background-color: #DDDDDD; font-weight: bold; color: #555555; text-decoration: none; text-align: center; font-family: Verdana, Helvetica, Sans; text-transform: uppercase;
border-style: solid; border-width: 1px; border-color: #DDDDDD;
float: left; }
.header a:hover { color: #000000; background-color: #EEEEEE; }
