blue_circles
<!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-gb">
<head>
<title>blue circles</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type='text/css'>
* {
padding:0;
margin:0;
}
html,body {height: 100%;}
body {background:#fff;
margin : 0;
padding : 0;
text-align : center;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:100%;
}
/* the bg image provides the blue bar*/
#bg {
background : url(blue_circles-images/bg.jpg) repeat-y 50% 0%;
width:700px;
margin:0 auto;
}
#container {
width:700px;
background:transparent;
margin:0 auto;
}
/*this controls the top bar*/
#top {
background : url(blue_circles-images/top.jpg);
width:700px;
height:55px;
text-align:left;
padding-left:90px;
padding-top:25px;
voice-family: "\"}\"";
voice-family: inherit;
width: 610px;
}
html>body #top {
width:610px;
}
/*this is the left content*/
#content_one {
margin-top:20px;
width:300px;
float:left;
font-size:80%;
}
#content_one p{
text-align:left;
padding:10px;
}
/*this is the right content*/
#content_two {
margin-top:20px;
width:200px;
float:right;
font-size:80%;
}
#content_two p{
text-align:left;
padding:10px;
}
/*this formats the logo text*/
#headertext_one {
font-size:250%;
color:#fff;
}
#headertext_two {
font-size:250%;
padding-left:10px;
color:#262C62;
}
/*this is the blue bar*/
#sidebar {
width:200px;
float:left;
}
/*navigation is here*/
#navcontainer { width: 200px;
float:left;}
#navcontainer ul
{
border-top:1px solid #9399d5;
margin-left: 0;
margin-top:30px;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#navcontainer a
{
display: block;
padding: 10px 3px 3px 3px;
width: 194px;
height:30px;
background: transparent;
border-bottom: 1px solid #9399d5;
}
#navcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}
#navcontainer a:hover
{
background-color: #333B8B;
color: #fff;
font-weight:bold;
}
/*footer, obviously*/
#footer {
background : url(blue_circles-images/footer.jpg);
width:700px;
height:75px;
clear:both;
margin:0;
font-size:80%;
text-align:center;
padding-top:5px;
color:#262C62;
}
/* this is my link, please leave if poss */
span.design {
font-size:80%;
color:#9a9a9a;
}
a.design {
text-decoration:none;
color:#9a9a9a;
}
a.design:hover {
color:#000;
}
a.midtext {
text-decoration : none;
color:#126C12;
font-weight:bold;
}
/*this positions the three circles at the side */
#side_logo {
position:absolute;
height:80px;
width:30px;
top:0;
left:0;
}
</style>
</head>
<body>
<div id="bg">
<div id="container">
<div id="top"><span id="headertext_one">blue:</span><span id="headertext_two">circles</span>
</div> <!-- End of "top" div -->
<div id="sidebar">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">home</a></li>
<li><a href="#">news</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">links</a></li>
</ul>
</div><!-- End of "navcontainer" div -->
</div><!-- End of "sidebar" div -->
<div id="content_one">
<p>This is a simple template, suitable for a variety of uses. It is created using validated xhtml and css
with no tables. The code is clear and both the xhtml and css is notated for easy adaptation.</p>
<p>The template was designed by me, <a class="midtext" href="http://www.robdrummond.co.uk">Rob Drummond</a>. I'm a freelance web-designer working in the
North West of England. If you are interested in a bespoke design, or if you just need some help adapting
this one, just let me know. If you intend to use this template as it is, I'd ask you to leave the small link to
me at the bottom if possible. Obviously you don't have to, but it'd be nice :)</p>
<p>I'm always interested in finding out where my templates are used, so keep in touch...</p>
<img alt="pic (10K)" src="blue_circles-images/pic.jpg" height="180" width="275" />
</div><!-- End of "content_one" div -->
<div id="content_two">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur neque. Phasellus scelerisque lobortis
diam. Sed ultrices sapien et eros. Praesent ullamcorper, lorem a feugiat consectetuer, est erat aliquam nunc,
quis vulputate orci nibh eget quam. Nullam mauris tortor, iaculis facilisis, dictum porta, venenatis eu, leo.</p>
<p>Nunc eu leo eget ligula venenatis accumsan. Suspendisse a nunc. Maecenas at massa eu est congue vulputate.
Donec mauris tellus, lobortis in, ultricies sed, accumsan sed, orci. Pellentesque vitae nulla sed augue mollis
molestie. Nulla facilisi. Vestibulum blandit laoreet libero. Morbi vulputate erat id eros. Phasellus congue </p>
<p>pretium augue. Cras eleifend ultricies nisi.</p>
</div><!-- End of "content_two" div -->
<div id="footer">Content © 2006 Your Organisation<br /><br /><span class="design">Site design by <a class="design" href="http://www.robdrummond.co.uk">Rob Drummond</a></span></div>
</div><!-- End of "container" div -->
</div> <!-- End of "bg" div -->
<div id="side_logo"><img alt="side (3K)" src="blue_circles-images/side.jpg" height="78" width="30" /></div>
</body>
</html>
Related examples in the same category