blue_circles : Blue « Templates « HTML / CSS

HTML / CSS » Templates » Blue 
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.jpgrepeat-y 500%;
width:700px;
margin:auto;
}

#container {
  width:700px;
  background:transparent;
margin: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 &copy; 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
1.metamorph_blue
2.metamorph_bluefeather
3.metamorph_blueflower
4.metamorph_blueglowing
5.metamorph_bluemadness
6.metamorph_bluemess_lt2
7.metamorph_bluerock
8.metamorph_bluething
9.metamorph_bluewave
10.metamorph_bubbleblue_lt
11.metamorph_bubblesonblue
12.metamorph_lightblue
13.metamorph_shiningblue
14.metamorph_simpleblue
15.metamorph_uberblue
16.metamorph_wavesinblue
17.blue-hosting
18.blue-neutral
19.blue-pigment1
20.blue-sky
21.blue-white
22.blue-wood
23.Blue 1
24.blue99
25.blueblogtemplate
26.bluebottle
27.BlueBridge
28.bluebrush
29.bluebusiness
30.bluecarbon
31.bluecorporation
32.bluediamond
33.blueflex
34.BlueFlower
35.BlueFresh
36.bluegray
37.blueled
38.blueminimal
39.blueminimalsidebar
40.blueprism
41.Blueshine
42.blueshuffle
43.BlueSpace
44.BlueSquareShadow
45.bluesurge
46.bluethickline
47.bluetoolkit
48.bluewave
49.blueweb
50.blueworld
51.bluey
52.blue_sky
53.blue_space
54.blue_trees
55.bublue-studio
56.bussinesblue
57.fain-blue
58.fairyblue
59.basicblue
60.CleanandBlue
61.cleanblue
62.freecss_blue
63.flyingblue
64.easy-blue
65.FunkyCoolBlue
66.genericblue
67.gallery-blue
68.MonsterBlue
69.Simple_Blue
70.wide-blue
71.a_bit_modern_bigBlue
72.mistyblue
73.portal_blue
74.SimplyBlue
75.sleekcssblue
76.Sexy_Blue
77.WonderfulBlue
78.sweetbuzzblue
79.light-blue
80.groovyblue
81.iblue2b
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.