Tab like top layout bar
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>andreas02</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
/* andreas02 - a free xhtml/css website layout by Andreas Viklund -
http://andreasviklund.com - Free to use for any purpose as long as the proper credits are given to the original author.
Version: 2.0 (Jan 29, 2007)
Screen layout: */
body {
padding: 15px 0 0 0;
margin: 0;
font: 76% tahoma, verdana, sans-serif;
background: #e0e0e0;
color: #303030;
}
a {
color: #303030;
text-decoration: none;
border-bottom: 1px dotted #505050;
}
a:hover {
color: #303030;
text-decoration: none;
border-bottom: 1px solid #505050;
}
h1 {
margin: 0 0 20px 0;
font-size: 2.2em;
font-weight: normal;
}
h2 {
margin: 0 0 12px 0;
font-size: 1.6em;
font-weight: normal;
}
h3 {
margin: 0 0 10px 0;
font-size: 1.4em;
font-weight: normal;
}
p {
margin: 0 0 15px 0;
line-height: 1.5em;
text-align: left;
}
a img {
border: 0;
}
/* Main container */
#container {
margin: 0 auto 20px auto;
width: 730px;
padding: 5px 20px 20px 20px;
background: #ffffff;
}
/* Site title section */
#logo {
margin: 15px 0 0 0;
}
#logo h1 a {
color: #505050;
border: none;
}
#logo h1 a:hover {
color: #303030;
text-decoration: none;
border: none;
}
/* Toptab menu */
#toptabs {
margin: 10px auto -13px auto;
font-size: 0.8em;
width: 760px;
}
#toptabs p {
text-align: right;
color: #808080;
}
.toptab {
padding: 4px 5px 3px 5px;
margin: 0 0 0 4px;
text-decoration: none;
background: #f0f0f0 url(andreas02-v20-images/corner2.gif) top right no-repeat;
color: #808080;
border-bottom: 1px solid #e0e0e0;
}
.toptab:hover {
background: #fafafa url(andreas02-v20-images/corner2.gif) top right no-repeat;
border-bottom: 1px solid #eaeaea;
color: #505050;
text-decoration: none;
}
.activetoptab {
padding: 4px 5px 3px 5px;
margin: 0 0 0 4px;
color: #505050;
text-decoration: none;
background: #ffffff url(andreas02-v20-images/corner2.gif) top right no-repeat;
border-bottom: 1px solid #ffffff;
}
.activetoptab:hover {
text-decoration: none;
border-bottom: 1px solid #ffffff;
}
/* Navitab menu */
#navitabs {
clear: both;
}
.navitab {
padding: 4px 8px 4px 8px;
margin: 0 0 4px 0;
text-decoration: none;
font-size: 1.1em;
background: #e0e0e0 url(andreas02-v20-images/corner.gif) top right no-repeat;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
}
.navitab:hover {
text-decoration: none;
background: #d0d0d0 url(andreas02-v20-images/corner.gif) top right no-repeat;
border-bottom: 1px solid #ffffff;
}
.activenavitab {
padding: 4px 8px 5px 8px;
color: #ffffff;
margin: 0 0 5px 0;
font-size: 1.1em;
text-decoration: none;
background: #505050 url(andreas02-v20-images/corner.gif) top right no-repeat;
}
.activenavitab:hover {
text-decoration: none;
color: #ffffff;
}
/* Header description */
#desc {
height: 200px;
color: #ffffff;
padding: 0;
background: #505050 url(andreas02-v20-images/front.jpg) top left no-repeat;
clear: both;
margin: 5px 0 15px 0;
}
#desc p {
width: 290px;
font-size: 1em;
line-height: 1.3em;
padding: 0 0 0 15px;
}
#desc h2 {
padding: 15px 15px 0 15px;
color: #ffffff;
}
#desc a {
color: #ffffff;
text-decoration: none;
border-color: #ffffff;
}
/* Main content */
#main {
width: 550px;
float: left;
padding: 0 15px 0 0;
margin: 0;
border-right: 1px solid #d8d8d8;
}
/* Sidebar */
#sidebar {
width: 150px;
float: right;
}
#sidebar p {
font-size: 0.9em;
line-height: 1.3em;
margin: 0 0 15px 0;
}
/* Footer */
#footer {
clear: both;
background: #fafafa;
padding: 0;
margin: 0;
border-top: 1px solid #d8d8d8;
}
#footer a {
color: #808080;
}
#footer a:hover {
color: #303030;
}
#footer p {
color: #808080;
font-size: 1.1em;
line-height: 1.3em;
margin: 15px 0 0 0;
padding: 0;
}
/* Various classes */
.photo {
padding: 2px;
margin: 0 0 8px 0;
background-color: #f0f0f0;
border: 1px solid #d8d8d8;
}
.right {
margin-top: -8px;
text-align: right;
}
.block {
background: #f0f0f0;
padding: 10px;
}
.sidelink {
text-align: left;
display: block;
width: 140px;
background: #f0f0f0 url(andreas02-v20-images/corner.gif) top right no-repeat;
padding: 3px 4px 3px 8px;
margin: 5px 10px 5px 0;
border: none;
}
.sidelink:hover {
background: #e0e0e0 url(andreas02-v20-images/corner.gif) top right no-repeat;
text-decoration: none;
border: none;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div id="toptabs">
<p>Site Network: <a class="activetoptab" href="">Personal</a><span class="hide"> | </span> <a class="toptab" href="">My Company</a><span class="hide"> | </span> <a class="toptab" href="">Artist projects</a><span class="hide"> | </span> <a class="toptab" href="">Shop</a></p>
</div>
<div id="container">
<div id="logo">
<h1><a href="">andreas02 v2.0</a></h1>
</div>
<div id="navitabs">
<h2 class="hide">Site menu:</h2>
<a class="activenavitab" href="">Home</a><span class="hide"> | </span> <a class="navitab" href="">Bio</a><span class="hide"> | </span> <a class="navitab" href="">Discography</a><span class="hide"> | </span> <a class="navitab" href="">Downloads</a><span class="hide"> | </span> <a class="navitab" href="">Photos</a><span class="hide"> | </span> <a class="navitab" href="">Tour</a><span class="hide"> | </span> <a class="navitab" href="">Merchandise</a><span class="hide"> | </span> <a class="navitab" href="">Interviews</a> </div>
<div id="desc">
<h2>Welcome to andreas02!</h2>
<p>This is a free XHTML/CSS website template that you can use for any purpose without any obligations or limitations! It was originally released in August 2005, and has since been updated several times. It uses XHTML 1.0 Strict and CSS, and it has no tables at all. To show its features, I have filled it with some example content.</p>
<p class="right"><a href="">Read more</a> »</p>
</div>
<div id="main">
<h2>The idea behind the design</h2>
<p>When it was time to redesign one of my sites, I got an idea about making one single design that all of my sites could use, and make some kind of official link network between the sites. My way of doing this turned out to be the use of toptabs (for selecting a website) and navitabs (for selecting subsections within the different sites). With a basic PHP template, all sites could now have the same design and share the same toptabs - but they can have their own separate content. If needed, each navitab can have a submenu in the sidebar, which allows this design to handle hundreds of pages while still keeping a quick and easy navigation. To make navigation more logical, each tab could have its own colorscheme or header image.</p>
<p class="block"><strong>Please note:</strong> This template is built with XHTML and CSS code only. It contains no CMS-specific code. It may be customized to work with many different content management systems, but that will require additional programming.</p>
<h3>Free to use!</h3>
<p>If you like this layout and would like to use it in any way, you are free to do so. I kindly ask that you leave the "Design by Andreas Viklund" link in the footer of the site as that would be a nice way of giving something back to the original template designer. But it is just a request, no obligation. If you use this template for commercial purposes and remove the credits, please consider making a small PayPal donation through my website to support my work!</p>
<p>Good luck with your new design!</p>
</div>
<div id="sidebar">
<h3>More information:</h3>
<p>Do you want more information about my free website templates? Then you should check out these pages:</p>
<p> <a class="sidelink" href="">Free templates</a><span class="hide"> | </span> <a class="sidelink" href="">Commercial templates</a><span class="hide"> | </span> <a class="sidelink" href="">OpenDesigns.org</a><span class="hide"> | </span> <a class="sidelink" href="http://validator.w3.org/check/referer">Valid XHTML</a><span class="hide"> | </span> <a class="sidelink" href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a> </p>
<h3>Image example:</h3>
<p><img class="photo" src="andreas02-v20-images/test.jpg" height="100" width="130" alt="" /><br />
"It happens every day: information overload! Time for a reboot..."<br />
(traditional haiku poem)</p>
</div>
<div id="footer">
<p>Copyright © 2007 <a href="">Your Name</a> · <a href="">Contact</a> · <a href="">Policy</a> · Design by <a href="http://andreasviklund.com/">Andreas Viklund</a> | <a href="">Homepage</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category