Adding shading to top bar
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>andreas03</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style rel="stylesheet" type="text/css">
/* andreas03 - an open source 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: 1.2
(Nov 28, 2005)
Screen layout: */
body {
margin: 0;
padding: 30px 0;
font: 76% tahoma, verdana, sans-serif;
background: #047 url(andreas03-img/bodybg.png) repeat-x fixed;
color: #222;
}
#thetop {
margin: 0;
}
#container {
width: 720px;
margin: 0 auto;
padding: 20px 20px 0 20px;
background: #fff url(andreas03-img/contbg.png) no-repeat;
color: #222;
}
a {
text-decoration: none;
background-color: inherit;
color: #26c;
}
a:hover {
text-decoration: underline;
}
a img {
border: 0;
}
p {
margin: 0 0 15px 0;
line-height: 1.5em;
}
#main p,#sidebar p {
padding: 0 0 0 10px;
}
#logo {
float: left;
width: 240px;
margin: 0 20px 0 0;
padding: 0 0 25px 0;
background: #eee;
border: 4px solid #dde;
text-align: center;
color: #555;
overflow: auto;
}
#logo h1 {
margin: 50px 5px 1px 5px;
letter-spacing: -3px;
}
#logo a {
background-color: inherit;
color: #26a;
text-decoration: none;
}
#logo a:hover {
background-color: inherit;
color: #69e;
}
#tagline {
text-align: center;
font-size: 1.2em;
}
#intro p {
line-height: 1.5em;
}
#main {
float: left;
width: 530px;
margin-right: 20px;
padding: 0;
}
.headerstyle {
display: block;
margin: 30px 0 10px 0;
padding: 5px 0 5px 8px;
background: #eee url(andreas03-img/gradient2.png) repeat-x;
color: #222;
border-top: 1px solid #ddd;
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
border-left: 1px solid #ddd;
text-decoration: none;
}
#sidebar {
width: 155px;
float: right;
margin-top: 20px;
font-size: 1em;
line-height: 1.3em;
}
#sidebar p {
font-size: 0.9em;
}
.sidelink {
display: block;
width: 140px;
margin: 3px 10px 2px 0;
padding: 5px 0 5px 8px;
font-size: 1.1em;
font-weight: bold;
text-align: left;
background: #eee url(andreas03-img/gradient1.png) repeat-x;
color: #26c;
border-top: 1px solid #ddd;
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
border-left: 1px solid #ddd;
}
.sidelink:hover,.menuheader {
background: #fff url(andreas03-img/gradient2.png) repeat-x;
color: #222;
border-top: 1px solid #ddd;
border-right: 1px solid #888;
border-bottom: 1px solid #888;
border-left: 1px solid #ddd;
text-decoration: none;
}
#footer {
margin: 0 auto 20px auto;
width: 760px;
background: #fff url(andreas03-img/footerbg.png) bottom left no-repeat;
padding: 0 0 5px 0;
font-size: 0.9em;
color: #888;
text-align: center;
}
h1,h2,h3,h4 {
margin: 0 0 10px 0;
font-weight: normal;
}
h1 {
font-size: 2.8em;
}
h2 {
margin: 0 0 4px 0;
font-size: 1.8em;
}
h3 {
margin: 20px 0 8px 0;
font-size: 1.4em;
}
h4 {
margin: 10px 0 5px 0;
font-size: 1.2em;
}
.clear {
clear: both;
margin: 0;
}
.right {
text-align: right;
}
.internallink {
font-size: 0.9em;
text-align: center;
}
.block {
padding: 20px;
background: #eee;
color: #222;
border: 2px solid #ddd;
}
.credit {
color: #888;
background-color: inherit;
}
.hide {
display: none;
}
/* Original open source design by Andreas Viklund - http://andreasviklund.com
Released through OSWD.org */
</style>
</head>
<body>
<div id="thetop"> <a id="top"></a>
<p class="hide">Skip to: <a href="#sitemenu" accesskey="2">Site menu</a> | <a href="#maincontent" accesskey="3">Main content</a></p>
</div>
<div id="container">
<div id="main">
<div id="logo">
<h1>[<a href="" accesskey="4">your site title</a>]</h1>
<span id="tagline">Your striking site slogan!</span> </div>
<div id="intro">
<h2><a id="maincontent"></a>Speed and accessibility!</h2>
<p>This website template is made for all of you who want a quick-loading and solid XHTML/CSS website with light use of images and a strong focus on accessibility. The template conforms to the WCAG 1.0 Triple-A rating, and it works in all common browser types.</p>
</div>
<div class="clear"></div>
<h3 class="headerstyle">The idea behind the design</h3>
<p>The andreas03 template has a small file size, a simple layout for easy editing, good accessibility features and semantic markup. Five small images have been used for the design, adding only 3 kilobytes to the template load size (which is approximately 12kb).</p>
<p>The images are linked from the stylesheet, which means that they will not show up in browsers that does not support CSS. They can also be safely removed, since the images do not affect the layout in any way. In CSS-enabled browsers the removed images will be replaced by a background color. In browsers with no CSS support, there will be no difference. See examples of this by looking at the alternate versions listed under the menu.</p>
<p class="internallink">[ <a href="#top">Back to top</a> ]</p>
<h3 class="headerstyle">What is 'accessibility' and why is it important?</h3>
<p>Accessibility is about making your website available and understandable for everyone, including users with disabilities. W3 explains it in a great way at the <a href="http://www.w3.org/WAI/intro/accessibility.php">Web Accessibility Initiative</a>.</p>
<p>This template allows visitors to use the following accesskeys:<br />
<strong>1 - </strong>Back to top | <strong>2 - </strong>Skip to site menu | <strong>3 - </strong>Skip to main content | <strong>4 - </strong>Return to index.html</p>
<p>You can easily change these or add more accesskeys to make the site fit your needs, for example to allow easy access to each site menu link. Adding a logical tab order is recommended! And finally: the template allows browser-based font resizing, making sure that site visitors can enlarge the font size without breaking the page layout in any way.</p>
<p class="internallink">[ <a href="#top">Back to top</a> ]</p>
<h3 class="headerstyle">Open source is freedom!</h3>
<p>If you like this layout and would like to use it in any way, you are free to do so. This design is released as open source, which means that you are free to make any changes you may want to. I kindly ask that you leave the "Design by Andreas Viklund" link in the footer, but you are free to remove it if you want (or need) to. If you use this design for commercial purposes, please consider making a symbolic donation through my website.</p>
<p>Good luck with your new design!</p>
<p class="block"><strong>Additional information: </strong>Download more of my free website templates from <a href="">OSWD.org</a>!</p>
<p class="internallink">[ <a href="#top">Back to top</a> ]</p>
</div>
<div id="sidebar">
<h2 class="sidelink menuheader"><a id="sitemenu"></a>Site menu:</h2>
<a class="sidelink" href="">Home</a> <span class="hide"> | </span> <a class="sidelink" href="">Another page</a> <span class="hide"> | </span> <a class="sidelink" href="">Number three</a> <span class="hide"> | </span> <a class="sidelink" href="">Sample button</a> <span class="hide"> | </span> <a class="sidelink" href="">Even more</a> <span class="hide"> | </span> <a class="sidelink" href="">And a last one</a> <span class="hide"> | </span> <a class="hide" href="#top" accesskey="1">Top of page</a>
<h3>Important note</h3>
<p>This template conforms to <a href="http://www.section508.gov">Section 508</a> and to W3C's <a href="http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505">WCAG 1.0</a>, level Triple-A. The code is valid XHTML 1.1 and CSS (no warnings).</p>
<h3>Alternate versions</h3>
<p>Included in this template are the following example files:<br />
- <a href="">Home</a><br />
- <a href="noimg.html">No images version</a><br />
- <a href="text-only.html">No CSS version</a></p>
<p>andreas03 v1.2<br />
(Nov 28, 2005)</p>
<h3>Regular links</h3>
<p> - <a href="">Website Templates</a><br />
- <a href="">Open Web Design</a><br />
- <a href="">OSWD.org</a><br />
- <a href="">Lagoona MP3s</a> </p>
</div>
<div class="clear"> </div>
</div>
<div id="footer">
<p>© 2005 Your name. Design by <a href="http://andreasviklund.com/" class="credit">Andreas Viklund</a>.</p>
</div>
</body>
</html>
Related examples in the same category