3D top bar background
<!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>andreas04</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style rel="stylesheet" type="text/css">
/* andreas04 - 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 for the original design work.
Version: 1.5, July 15, 2006 */
body {
margin: 0;
padding: 0;
font: 76% tahoma, verdana, sans-serif;
background: #e6e6e6 url(andreas04-images/bodybg.png) repeat-x;
color: #333;
text-align: center;
}
a {
text-decoration: none;
color: #269;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
p {
margin: 0 0 15px 0;
line-height: 1.5em;
}
h1,h2,h3,h4 {
margin: 0;
padding: 0;
font-weight: normal;
}
h1 {
font-size: 3.2em;
letter-spacing: -3px;
color: #567;
margin: 12px 0 5px 20px;
}
h1 a:hover {
text-decoration: none;
}
h2 {
font-size: 1.8em;
letter-spacing: -1px;
margin: -10px 0 0 50px;
color: #888;
}
h3 {
color: #555;
font-size: 1.4em;
margin: 1em 0 0.5em 0.5em;
}
h4 {
font-size: 1.2em;
font-weight: bold;
}
#container {
width: 92%;
min-width: 700px;
padding: 0 20px;
margin: 0 auto;
background: #f0f0f0 url(andreas04-images/contentbg.png) repeat-x;
color: #333;
text-align: left;
border-left: 1px solid #eef;
border-right: 1px solid #eef;
}
#sitetitle {
float: left;
height: 100px;
background: url(andreas04-images/globe.gif) no-repeat;
/* Delete this line to remove the animated globe */
width: 42%;
color: #333;
}
#sitetitle a {
color: #567;
font-weight: normal;
}
#sitetitle a:hover {
color: #269;
}
#menu {
height: 71px;
padding-top: 35px;
text-align: right;
}
#menu a {
margin: 0;
height: 100px;
padding: 35px 6px 41px 6px;
font-size: 1.6em;
font-weight: normal;
letter-spacing: -1px;
color: #888;
}
#menu a:hover {
color: #269;
text-decoration: none;
background: #fff url(andreas04-images/menuhover.png) repeat-x;
padding: 35px 5px 41px 5px;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
}
#content {
margin-top: 30px;
width: 100%;
clear: both;
background: url(andreas04-images/globebottom.gif) bottom left no-repeat;
}
#content h2 {
margin: 0 0 10px 0;
color: #555;
border-bottom: 2px solid #abb;
}
#content h2 a {
color: #555;
font-weight: normal;
}
#content h2 a:hover {
color: #269;
text-decoration: none;
background: none;
}
#content p {
margin: 0 0.5em 1.2em 0.5em;
}
#left {
width: 68%;
float: left;
}
#right {
margin-left: 70%;
margin-top: -15px;
}
#right h2 {
margin: 0 0 8px 0;
padding: 12px 0 0 0;
font-size: 1.6em;
}
#footer {
clear: both;
padding: 10px 0 12px 24px;
text-align: left;
color: #888;
}
#footer a {
color: #888;
font-weight: normal;
}
#footer span {
color: #aaa;
font-size: 2em;
letter-spacing: -2px;
}
.entry {
position: relative;
margin: 0 0 20px 0;
border: 2px solid #fff;
background: #eee url(andreas04-images/entrybg.png) repeat-x;
color: #333;
padding: 10px 10px 0 10px;
}
.entry a:hover,.intro a:hover {
text-decoration: none;
padding-bottom: 2px;
background: url(andreas04-images/flash2.gif) bottom left repeat-x;
/* Delete this line to remove the flashing underline for regular links */
}
.link {
color: #269;
background: url(andreas04-images/linkarrow.gif) left no-repeat;
display: block;
margin: 4px 0 0 0;
padding: 2px 1em;
}
.link:hover {
color: #48b;
background: url(andreas04-images/blinkarrow.gif) left no-repeat;
/* Delete this line to remove the blinking arrows by the links */
text-decoration: none;
}
.thumbs img {
position: relative;
padding: 3px;
margin: 0 2px 2px 0;
border: 1px solid #fff;
background-color: #ddd;
color: #555;
}
.thumbs img:hover {
background: url(andreas04-images/flash.gif);
/* Delete this line to remove the blinkingblue frame around the thumbnails */
}
.entryphoto {
margin: 5px 10px 10px 0;
float: left;
padding: 3px;
border: 1px solid #fff;
background-color: #ddd;
color: #333;
}
.meta {
clear: both;
border-top: 2px solid #ccc;
padding: 5px 1px 0 0;
margin: 10px 0 0 0;
text-align: right;
font-size: 0.9em;
color: #567;
}
.pagenav {
color: #888;
text-align: center;
}
.entry img {
position: relative;
}
.subcontainer {
width: 98%;
}
.rightsub {
float: left;
width: 45%;
padding: 0;
}
.rightsub2 {
margin-left: 50%;
padding: 0;
}
.date {
display: block;
float: left;
font-weight: bold;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
.clear {
clear: both;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="sitetitle">
<h1><a href="">close to attraction</a></h1>
<h2>the andreas04 template</h2>
</div>
<div id="menu"> <a href="">home</a> <a href="">archives</a> <a href="">profile</a> <a href="">gallery</a> <a href="">portfolio</a> <a href="">contact</a> </div>
<div id="content">
<div id="left">
<div class="entry">
<h2><a href="">With a touch from the old school...</a></h2>
<img class="entryphoto" src="andreas04-images/entryphoto.png" width="160" height="213" alt="Entry photo example" />
<p>So here it is, my first open source template with classic .gif animations! And maybe my last, since I find the .gif format outdated and mostly annoying. If you feel the same, don't worry: It is really easy to remove the animations and images - see the comments in the stylesheet for instructions.</p>
<h3>Standards and accessibility</h3>
<p>Despite the classic influences and the animated visuals, the coding is very simple and modern. No Flash or scripts have been used, only valid XHTML 1.1 and CSS2. Because of that, the design works in most browsers, even in text-based browsers. The design also complies to Section 508 and a WCAG 1.0 Double-A accessibility ratings.</p>
<h3>Template version</h3>
<p>This theme was originally released in November 2005, but it has been updated a number of times with various buxfixes and adjustments. This is <strong>version 1.5</strong>, released July 15th, 2006. Please note that this is a regular XHTML and CSS template, and not a theme for any blog or content management system. You can use this template to build themes for different systems, but that will require additional coding. However, the andreas04 design has been ported to a number of blogs and systems already! For example, Tara Aukerman has created the andreas04 theme for WordPress which has been added as one of the default themes on WordPress.com. News and links to theme versions are posted on my website every now and then, so if you want to use this design with a CMS I recommend you to search my site for existing ports before you make your own.</p>
<p class="meta"><span class="date">July 15, 2006</span> Posted by Andreas | Tags: Design, XHTML, CSS | 19 comments</p>
</div>
<div class="entry">
<h2><a href="">Open source</a></h2>
<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, I would really appreciate that! If you use this design for commercial purposes, please consider making a symbolic donation through my website.</p>
<p>Also, if you would use this design to build a theme or template set for WordPress, Textpattern, MovableType or any other interesting blog/CMS package, I would be glad to distribute it through the blogs and CMS themes section of my website!</p>
<p class="meta"><span class="date">November 22, 2005</span> Posted by Andreas | Tags: Information, Themes | No comments</p>
</div>
<p class="pagenav"><a href="">Older entries</a> | Newer entries</p>
</div>
<div id="right">
<h2>Wait, what's this?</h2>
<p class="intro">Welcome to the andreas04 template, a design made just for fun! This is a fluid width design with a very simple layout, made with XHTML/CSS (no tables) and less than 25 kilobytes of images. The design target has been to present a non-standard visual appearance with some inspiration from the traditional table/frame-based layouts from a few years ago - and to use animated .gif images without doing too much damage to the design. Good luck with your new website!</p>
<h2>Latest photos</h2>
<p class="thumbs"> <a href=""><img src="andreas04-images/thumb1.png" width="80" height="80" alt="Thumbnail example" /></a> <a href=""><img src="andreas04-images/thumb1.png" width="80" height="80" alt="Thumbnail example" /></a> <a href=""><img src="andreas04-images/thumb1.png" width="80" height="80" alt="Thumbnail example" /></a> <a href=""><img src="andreas04-images/thumb1.png" width="80" height="80" alt="Thumbnail example" /></a> </p>
<div class="subcontainer">
<div class="rightsub">
<h2>Popular tags</h2>
<a class="link" href="">XHTML</a><br class="hide" />
<a class="link" href="">Music</a><br class="hide" />
<a class="link" href="">Podcast</a><br class="hide" />
<a class="link" href="">Photos</a><br class="hide" />
<a class="link" href="">CSS</a><br class="hide" />
<a class="link" href="">Webdesign</a><br class="hide" />
<h2>RSS Feeds</h2>
<a class="link" href="">Blog entries</a><br class="hide" />
<a class="link" href="">Comments</a><br class="hide" />
<a class="link" href="">Podcasts</a><br class="hide" />
</div>
<div class="rightsub2">
<h2>Latest entries</h2>
<a class="link" href="">With a touch fr...</a><br class="hide" />
<a class="link" href="">Open source</a><br class="hide" />
<a class="link" href="">Hello world!</a><br class="hide" />
<h2>Favorite links</h2>
<a class="link" href="">Free templates</a><br class="hide" />
<a class="link" href="">Open Web Design</a><br class="hide" />
<a class="link" href="">Made in Jokkmokk</a><br class="hide" />
<a class="link" href="">Solucija.com</a><br class="hide" />
<a class="link" href="">OSWD.org</a><br class="hide" />
</div>
</div>
</div>
<div id="footer">
<h2 class="hide">Site info</h2>
<span>close to attraction</span><br />
© 2005 Your Name | Design by <a href="http://andreasviklund.com/">Andreas Viklund</a> | <a href="">Homepage</a> | <a href="http://validator.w3.org/check?uri=referer">XHTML</a> / <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> / AA / 508 </div>
</div>
</div>
</body>
</html>
Related examples in the same category