Link side bar
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Web Page Design by James Koster - http://www.jameskoster.co.uk and Marko - http://www.mcville.net-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Plain Blue</title>
<style type='text/css'>
/* CSS assembled by Marko Mihelcic at mcville and James Koster from sixshootermedia*/
body {
margin:0;
font-family:"Trebuchet MS", Arial, Verdana;
font-size:0.74em;
color:#555555;
background-color:#FFFFFF;
text-align:left;
}
a {
color:#4D87CE;
font-weight:bold;
text-decoration:none;
}
a:hover {
color:#2a65ad;
}
ol,ul {
}
li {
list-style-image:url(Plain-Blue-images/backgrounds/li.gif);
line-height:20px;
text-align:left;
}
#menu {
width:100%;
padding-top:20px;
padding-bottom:20px;
background-color:#FFFFFF;
margin-bottom:50px;
color:#FFFFFF;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-variant:small-caps;
background-image:url(Plain-Blue-images/backgrounds/back.png);
}
#menu a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
padding-top:20px;
padding-bottom:20px;
}
#menu a:hover {
border-bottom:1px solid #ffffff;
border-left:1px solid #243482;
border-right:1px solid #243482;
padding-left:9px;
padding-right:9px;
color:#000000;
background-color:#FFFFFF;
background-image:url(Plain-Blue-images/backgrounds/hover.jpg);
}
#header {
width:750px;
margin:0 auto 0 auto;
margin-bottom:40px;
}
#header h1 {
font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
font-size:30px;
text-transform:uppercase;
font-weight:normal;
margin:0;
padding:0;
padding-top:5px;
color:#253183;
margin-bottom:10px;
text-align:left;
}
#header h2 {
font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
font-size:15px;
text-transform:uppercase;
text-align:right;
font-weight:normal;
margin:0;
padding:0;
color:#000000;
border-bottom:1px solid #eeeeee;
}
#content {
width:720px;
margin:0 auto 0 auto;
text-align:left;
}
.introduction {
font-family:Helvetica, Arial, sans-serif;
line-height:20px;
font-size:12px;
color:#99B198;
text-indent:25px;
background-image:url(Plain-Blue-images/backgrounds/desc.jpg);
background-position:bottom left;
padding-left:0;
padding-right:200px;
padding-bottom:35px;
padding-top:0;
background-repeat:no-repeat;
}
.logo {
float:left;
margin-right:30px;
}
.clearer {
clear:both;
}
#sidebar {
width:160px;
float:right;
font-size:95%;
color:#253183;
text-align:left;
}
#sidebar h1 {
font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
font-size:20px;
text-transform:uppercase;
font-weight:normal;
border-bottom:1px solid #eeeeee;
color:#253183;
text-align:right;
}
.submenu {
}
.submenu a {
display:block;
width:100%;
background-image:url(Plain-Blue-images/backgrounds/submenua.png);
background-position:right;
background-repeat:no-repeat;
padding:5px;
padding-right:0;
}
.submenu a:hover {
background-color:#eeeeee;
background-image:url(Plain-Blue-images/backgrounds/submenua_hover.jpg);
background-repeat:repeat-y;
}
#mainbar {
margin-right:185px;
padding-right:35px;
background-image:url(Plain-Blue-images/backgrounds/mainbar.jpg);
background-position:top right;
background-repeat:no-repeat;
}
#mainbar h1 {
font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
font-size:25px;
text-transform:uppercase;
font-weight:normal;
border-bottom:1px solid #eeeeee;
color:#253183;
}
#mainbar p {
padding:15px;
line-height:20px;
}
#mainbar .articleimg {
float:right;
padding:5px;
border:1px solid #eeeeee;
margin-left:20px;
margin-top:20px;
margin-bottom:20px;
}
#mainbar .articleimg2 {
padding:5px;
border:1px solid #eeeeee;
margin-left:20px;
margin-top:20px;
margin-bottom:25px;
}
#footer {
width:80%;
background-color:#253183;
border-top:1px solid #81C0FF;
border-bottom:5px solid #253169;
padding-top:5px;
padding-bottom:5px;
color:#FFFFFF;
}
#footer a {
color:#81C0FF;
}
#footer a:hover {
color:#AFD7FF;
}
</style>
</head>
<body>
<a name="top" id="top"></a>
<center>
<div id="menu">
<a href="#top">home</a> <a href="#intro">introduction</a> <a href="#css">css & xhtml</a> <a href="#about">about the author</a>
</div>
<div id="header">
<h1>Plain Blue</h1>
<h2>A simple CSS & XHTML web template focusing on whitespace and its importance </h2>
</div>
<div id="content">
<img src="images/logo.jpg" alt="Your Logo" class="logo" />
<p class="introduction">
Hello and welcome to Plain-blue. This is a simple web site template maximising the use of css and xhtml. Whitespace is used in abundance to really push its importance in web design. Navigate the page via the menu at the top of the page, or the links underneath this paragraph.
</p>
<div id="sidebar">
<h1>Sub Menu</h1>
<div class="submenu">
<a href="#top">Home</a>
<a href="#intro">Introduction</a>
<a href="#css">CSS & XHTML</a>
<a href="#about">About</a>
</div>
<h1>Other </h1>
<div class="submenu">
<a href="http://www.oswd.org">oswd.org</a>
<a href="http://www.oswd.org">oswd.org</a>
<a href="http://www.oswd.org">oswd.org</a>
<a href="http://www.oswd.org">oswd.org</a>
</div>
<h1>Log In</h1>
<input type="text" value="Username" />
<br />
<input name="" type="password" value="Password" />
<br />
<input type="button" value="Log In" />
</div>
<div id="mainbar">
<h1><a name="intro" id="intro"></a>Introduction</h1>
<img src="images/backgrounds/menu.jpg" alt="AN EXAMPLE IMAGE" title="AN EXAMPLE IMAGE" class="articleimg" />
<p>
Hello and welcome to PlainBlue. As mentioned earlier this is a fairly simple template, powered entirely by css and xhtml. I am also trying to make as much use of whitespace as possible. Whitespace helps keep the page looking clean and easy on the eye, whilst improving readability also. As with all my templates, a limited number of images have been used, and when they have, they've been to aid the design. This results in an easily customisable template that can be used to an array of different sites.
</p>
<h1><a name="css" id="css"></a>CSS & XHTML</h1>
<p>
As anyone looking for a website template to use would expect - this
template is of course, both <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a> valid according to the w3c.
The benfits of this include;
</p>
<ul>
<li>The website rendering correctly in a wide range of browser platforms</li>
<li>Since CSS is used to maximise the aesthetics of the website the load times are extremely low making for an extremely accessable website.</li>
<li>Low use of images saves bandwidth and improves load times</li>
</ul>
<p>
For more information regarding this, and lots of other usefull web design related stuff, follow this <a href="http://www.w3.org/MarkUp/2004/xhtml-faq" target="_blank">link</a>.
</p>
<h1><a name="about" id="about"></a>About the Author</h1>
<p>
Hi there. My names Jay and I'm an 18 Year old web designer from the United Kingdom. My company; <a href="http://www.sixshootermedia.com" target="_blank">Six Shooter Media</a>
provides a wide range of web design possibilities to a wide range of
clients. I specialise in CSS and XHTML coding but can also install and
modify PHP scripts such as Counters and Content Management Systems.
</p>
<p>
I also run my own personal <a href="http://www.jameskoster.co.uk">website</a>,
which I use as a blog, a place to upload my photographs/drawings, do a
bit of writing, and post news about my web design capers now and again.
Along side this website, I've just opened another website which I use
to host my templates and write tutorials for web design beginners.
</p>
<p>
I make these web templates in my spare time as a kind of hobby, plus I
like 'giving something back' to the web design community. Feel free to
download and use this template as you wish - for you site or just for
education purposes, but please leave the link to my website in at the
bottom of the page, thanks.
</p>
<p>
Also this template was extra modified by Pos3idon. The site was only turned into the blue theme leaving the layout designed by James Koster.
</p>
</div>
</div>
<div id="footer">
This is the footer. Put all your copyright info here.<br />
Page designed by <a href="http://www.sixshootermedia.com">6ix Shooter Media</a>
- <a href="http://www.ehostinfo.com/">Web Hosting</a></div>
</center>
</body>
</html>
Related examples in the same category