BlueBridge : Blue « Templates « HTML / CSS






BlueBridge

     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title>Blue Bridge</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
/*  
Theme Name: Blue-Bridge
Theme URI: http://www.wmw.be
Description: Future with css is so nice
Version: 1.0
Author: Joery Stroo
Author URI: http://www.wmw.be
*/
* {
  margin: 0;
  padding: 0;
}

html, body {
text-align : center;
font-size: small;
font-family: Verdana, Tahoma, Arial, Serif;
background :#fff url(BlueBridge-images/bg.gif);
}

ul, ol {
  margin : 10px 0 15px 15px;
}

ul, ol {
  margin : 10px 0 15px 15px;
}

ul li, ol li {
  margin : 6px 0 3px 0;
}

em {
  font-style : italic;
      color: #666;
}

strong, .b {
  font-weight : bold;
}

fieldset {
  border : none;
}

h3 {
  margin: 6px 0 3px 0;
}

h4 {
  font : bold 1.1em "Trebuchet MS", serif;
}

blockquote {
  margin:0;
  padding:10px 18px;
  font-style:italic;
  border : 1px solid #8F8F8F;
  background: url(BlueBridge-images/quote.gif);
}

pre {
  overflow:auto;
  margin:0 0 18px 0;
  padding:4px;
}


.code{
padding: 5px;
font-family:Courier, Monaco, monospace;
  border: 1px solid blue;
}


abbr, acronym {
  font-size:0.9em;
  letter-spacing:1px;
  border-bottom : 1px dotted;
  cursor : help;
}


.input {
width : 160px;
margin : 5px 0 5px 5px;
border: 1px solid #1E90FF;
padding: 2px 2px 3px 3px;
font-size: 0.9em;
color: #444;
vertical-align : middle;
background : #FFF url(BlueBridge-images/zoek.gif) no-repeat 97% 50%;
}
.zoek{
width : 160px;
margin : 5px 0 5px 5px;
border: 1px solid #1E90FF;
padding: 2px 2px 3px 3px;
font-size: 0.9em;
color: #444;
vertical-align : middle;  
}


#container, #main, #footer, #navigation {
  margin : 0 auto;
  
}


#container {
margin-left: 35px;
width : 768px;
text-align : left;

}

#main {

  width : 758px;
  overflow : hidden;
}

/* alle header stuff ----------------------------------*/

#header {
margin-left: 7px;
background : url(BlueBridge-images/header.jpg) no-repeat top left;
height : 314px;
}

#header h1 {
font-size: 30px;
padding-left: 530px;
padding-top: 135px;
}

#header h4 {
  font : italic 110% "Trebuchet MS", Verdana, serif;
  padding-left: 20px;
  color: White;
  margin-top: -15px;
}

#header a {
  color : #ccc;
  font :20px bold  "Trebuchet MS", serif;
  text-decoration : none;
}

#header a:hover {
  color : #fff;
}



/* alles wat met posts te maken heeft ----------------------------------------------*/

#content {
float: left;
width: 63%;
padding : 0 10px 0 10px;
}

div#content h2.post-title {
  font : bold 1.5em/1.0em Georgia, "Trebuchet MS", serif;
  border-bottom : 1px solid #D5D5D5;
  margin : 8px 0 5px;
    color : #869EC1;
}

div#content h1.post-title {
  font : bold 1.9em/1.0em Georgia, "Trebuchet MS", serif;
  border-bottom : 1px solid #D5D5D5;
  margin : 8px 0 5px;
    color : #80B60C;
}

div#content h1.cal {
  background : url(BlueBridge-images/cal.gif) no-repeat 0 50%;
  padding-left : 25px;
}

div#content h1.cat {
  background : url(BlueBridge-images/file.gif) no-repeat 0 50%;
  padding-left : 25px;
}

div#content h2.post-title a {
  color : #466289;
  text-decoration : none;
    background : url(BlueBridge-images/star.png) no-repeat 0 50%;
  padding : 0 0 0 15px;
}

div#content h2.post-title a:visited,  div#content h2.post-title a:active {
  color : #466289;
  text-decoration : none;
}

div#content h2.post-title a:hover {
color : #7B95BC;
background : url(BlueBridge-images/star_hover.png) no-repeat 0 50%;
text-decoration: none;
}

div#content.archive h3 {
  border-bottom : 2px dotted;
  margin : 10px 0 5px 8px;
  font-size : 1.1em;
  color : #6A6A6A;
}

div#content a:link,div#content a:visited{
  color : #6A5ACD;
  text-decoration : none;
}


div#content a:hover, div#content a:active {
text-decoration: underline;
}

p.day-date {
  color : #6E6E6E;
  margin : 6px 0 4px 10px;
  font-size : 0.8em;
  line-height : 1.3em;
  border-left : 1px solid #8C8C8C;
  padding : 0 0 0 4px;
}

div#content p.day-date span.editlink a {
  background : url(BlueBridge-images/wrench.gif) no-repeat 0 50%;
  color : #C1C1C1;
  text-decoration : none;
  padding : 0 0 0 15px;
}
div#content p.day-date span.editlink a:hover{
  color: #7D7D7D;
  text-decoration: underline;
}

div.post-content {
  color : #494949;
  font-size : 1.0em;
  line-height : 1.1em;
  padding : 10px 9px 0 10px;
}

div.post-content p {
  padding : 5px 0 5px;
}

div.post-content img {
  border : #909090;
  background-color : #FFF;
  padding : 5px;
  border: double;
}

div.post-content img:hover {
  border : 3px solid #3B3B3B;
  background-color : #FCFCFC;
}

div.post-content ul, div.post-content ol {
  margin : 3px 0 5px 25px;
}

div.post-content ul li {
  background : url(BlueBridge-images/content_bullet.jpg) transparent no-repeat 0 50%;
  padding-left : 15px;
    list-style : none;
}

div.post-content p.post-info {
  font : 0.8em Verdana, sans-serif;
    border-top : 1px solid #D5D5D5;
  margin : 12px 0 29px 0;
  padding : 6px 0 3px 14px;

}
span.comment a:link,span.comment a:visited
{
padding-left: 16px;
background :url('BlueBridge-images/comment.gif') no-repeat 0 50%;
}
span.comment a:hover{

background : url('BlueBridge-images/comment_hover.png') no-repeat 0 50%;
}

.more  {
  background : url('BlueBridge-images/book.gif') no-repeat 0 50%;
  padding-left:15px; 
}

/* dingen voor de zijkant ---------------------------------------------------------*/

#sidebar {
padding-left: 20px;
float : left;
width : 23%;
margin : 0 0 0 3px;
}

#sidebar h2 {
  font : bold 1.2em Georgia, serif;
  margin : 18px 0 10px 4px;
  background : url(BlueBridge-images/arrow.png) no-repeat 0 50%;
  padding : 0 0 0 14px;
  color : #555;
}

#sidebar ul {
  list-style-type : none;
  margin : 0 0 5px 15px;
}

#sidebar ul li {
  font : 0.9em/1.4em Tahoma, Arial, serif;
    color : #444444;
}

#sidebar a, #sidebar a:visited,#sidebar a:active {
  text-decoration : none;
  color : #555;
    background : url(BlueBridge-images/bullet.gif) no-repeat 0 50%;
  padding-left : 16px;
}

#sidebar a:hover {
  text-decoration : underline;
  color : #B83903;
  background : url(BlueBridge-images/bullet_hover.gif) no-repeat 0 50%;
}
#sidebar .pages a:link,#sidebar .pages a:visited{
  background: url(BlueBridge-images/page.gif) no-repeat;
}
#sidebar .pages a:hover{
  background: url(BlueBridge-images/page_hover.gif) no-repeat;
}
#sidebar .cats a:link,#sidebar .cats a:visited{
background: url(BlueBridge-images/cats.png) no-repeat;
}
#sidebar .cats a:hover{
  background: url(BlueBridge-images/cats_hover.png) no-repeat;
}
#sidebar .rss a:link,#sidebar .rss a:visited{
padding-left: 40px;
background: url(BlueBridge-images/rss.gif) no-repeat;
}
#sidebar .rss a:hover{
  background: url(BlueBridge-images/rss_hover.gif) no-repeat;
}
/* footer stuff staat hier ---------------------------------------------*/

#footer {
clear : both;
height : 45px;
width : 696px;
margin-left: 6px;
margin-top: 37px;
background: #E2E2E2;
border:1px solid #CCC;
}

#footer a,#footer a:visited {
font-weight : bold;
text-decoration : none;
color : #066;
}


#footer a:hover, #footer a:active {
  color : #066;
  text-decoration : underline;
}

#footer p {
  padding : 14px 0 0 0;
  font : 0.8em Verdana, sans-serif;
  text-align : center;
}
/* classes */
em.user{
padding-left: 13px;
  background: url(BlueBridge-images/user.png) no-repeat;
}

em.time{
padding-left: 13px;
  background: url(BlueBridge-images/time.png) no-repeat 0 50%;
}
ul.bullet {
  list-style: none;
}
.bullet li a:link,.bullet li a:visited{
padding-left: 25px;
background: url(BlueBridge-images/content_bullet.jpg) no-repeat 0 50%;
}
.bullet li a:hover{
  background: url(BlueBridge-images/content_bullet_hover.gif) no-repeat 0 50%;
}
.submit{
font-size: 0.9em;
color: #444;
border: 1px solid #1E90FF;
}

</style>


</head>
<body>
<div id="container">
<div id="header">
<h1><a href="#">Blue-Bridge</a></h1>
<h4>A work of art</h4>
</div>
<div id="main">
<div id="content">

<div class="post">
<h2 class="post-title"><a href="#" rel="bookmark" title="Permanent Link: A word of the designer">A word of the designer</a></h2>
<p class="day-date">Posted by <em class="user">Joery</em> on <em class="time">27/11/2005</em><br />
Field under: <em class="cat"><a href="#" title="View all posts in Test Category 1" rel="category tag">Test Category 1</a></em><span class="editlink"> <a href="#">Edit</a> </span></p>
<div class="post-content">  
<p>This is my first work for a template i hope you like it <br/>
Jou kan visit <a href="http://www.wmw.be" title="Webmasterworld css tutorials en hulp">my website</a> and lurn more for <acronym title="Cascading Style Sheets">css</acronym> designs<br/>
please <a href="http://www.wmw.be/?page_id=3" title="Please contact me here if you use this design">contact</a> me if there is enyone who is using this.<br/>
I hafe made this first for a <acronym title="WordPress &rsaquo; Free Blog Tool and Weblog Platform">wordpress</acronym> theme and maybey i will send it to him.</p>
<p>You kan show a link to here lake this </p><div class="code">&lt;a href=&quot;http://www.wmw.be/fclick/fclick.php?fid=1000&quot; title=&quot;Blue-Bridge 
design by WebMasterWorld&quot;&gt;Blue-Bridge&lt;/a&gt; A template by WebmasterWorld</div>
<p>and for the zip like this</p>
<div class="code">&lt;a href=&quot;http://www.wmw.be/fclick/fclick.php?fid=1001&quot; title=&quot;Blue-Bridge 
  (zip) 
design by WebMasterWorld&quot;&gt;Blue-Bridge (zip)&lt;/a&gt; A template by WebmasterWorld</div>
<p>The visited :<script type="text/javascript" src="http://www.wmw.be/fclick/show.php?js=1000"></script> time 
<br/>The Downloads :<script type="text/javascript" src="http://www.wmw.be/fclick/show.php?js=1001"></script> time</p>
<p class="post-info"><span class="comment"><a href="#">No comment&#8217;s &#187;</a></span></p>
</div>
</div>

<div class="post">
<h2 class="post-title"><a href="#" rel="bookmark" title="Permanent Link: A sample of a code">A sample of a code</a></h2>
<p class="day-date">Posted by <em class="user">Joery</em> on <em class="time">26/11/2005</em><br />
Field under: <em class="cat"><a href="#" title="View all posts in Test Category 1" rel="category tag">Test Category 1</a></em><span class="editlink"> <a href="#">Edit</a> </span></p>
<div class="post-content">  <p>This is a simple sample of a code :<br />
</p><div class="code">.code {<br />
width: 25%;<br />
text-align: right;<br />
clear: both;<br />
float: left;<br />
display: inline;<br />
padding: 4px;<br />
margin: 5px 0;<br />
}</div><p><br />
This was a display of a code</p>
<p class="post-info"><span class="comment"><a href="#">No comment&#8217;s &#187;</a></span></p>
</div>
</div>
<div class="post">
<h2 class="post-title"><a href="#" rel="bookmark" title="Permanent Link: An image in a post">An image in a post</a></h2>
<p class="day-date">Posted by <em class="user">Joery</em> on <em class="time">20/11/2005</em><br />
Field under: <em class="cat"><a href="#" title="View all posts in Uncategorized" rel="category tag">Uncategorized</a></em><span class="editlink"> <a href="#">Edit</a> </span></p>
<div class="post-content">  <p>
  <img src="BlueBridge-images/bril.gif" style="float:left;margin:5px;" alt="an image" width="165" height="210" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.</p>
<p class="post-info"><span class="comment"><a href="#">5 Reaction&#8217;s &#187;</a></span></p>
</div>
</div>
<div class="post">
<h2 class="post-title"><a href="#" rel="bookmark" title="Permanent Link: Blockquotes galore">Blockquotes galore</a></h2>
<p class="day-date">Posted by <em class="user">Joery</em> on <em class="time">20/11/2005</em><br />
Field under: <em class="cat"><a href="#" title="View all posts in Uncategorized" rel="category tag">Uncategorized</a></em><span class="editlink"> <a href="#">Edit</a> </span></p>
<div class="post-content"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.<br />
With some blockquotes too of course?</p>
<blockquote><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.</p></blockquote>
<p>and a suggestion by Steve Cooley for a blockquote within a blockquote:</p>
<blockquote><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra.</p></blockquote>
<blockquote><p>This is a blockquote within a blockquote</p></blockquote>
<p>Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.</p>
<p class="post-info">
<span class="comment"><a href="#">No comment&#8217;s &#187;</a></span></p>
</div>
</div>
<div class="post">
<h2 class="post-title"><a href="#" rel="bookmark" title="Permanent Link: An ordered list">An ordered list</a></h2>
<p class="day-date">Posted by <em class="user">Joery</em> on <em class="time">20/11/2005</em><br />
Field under: <em class="cat"><a href="#" title="View all posts in Uncategorized" rel="category tag">Uncategorized</a></em><span class="editlink"> <a href="#">Edit</a> </span></p>
<div class="post-content">  <p><strong>Be A Kid Again</strong></p>
<ol><li>Do a cartwheel.</li><li>Sing into your hairbrush.</li><li>Walk barefoot in wet grass.</li><li>Play a song you like really loud, over and over.</li><li>Dot all your &ldquo;i&rdquo;s with smiley faces.</li><li>Read the funnies. Throw the rest of the paper away.</li><li>Dunk your cookies.</li><li>Play a game where you make up the rules as you go along.</li><li>Step carefully over sidewalk cracks.</li><li>Change into some play clothes.</li><li>Try to get someone to trade you a better sandwich.</li><li>Eat ice cream for breakfast.</li><li>Kiss a frog, just in case.</li><li>Blow the wrapper off a straw.</li><li>Have someone read you a story.</li><li>Find some pretty stones and save them.</li><li>Wear your favorite shirt with you favorite pants even if they don t match.</li><li>Take a running jump over a big puddle.</li><li>Get someone to buy you something you really don t need.</li><li>Hide your vegetables under your napkin.</li><li>Stay up past your bedtime.</li><li>Eat dessert first.</li><li>Fuss a little, then take a nap.</li><li>Wear red gym shoes.</li><li>Put way too much sugar on your cereal.</li><li>Make cool screeching noises every time you turn a corner.</li><li>Giggle a lot for no reason.</li><li>Give yourself a gold star for everything you do today.</li></ol>
<p>Ancient wisdom I just made up. . .<br />
Okay,<br />
Father Luke  [<a href="#">via</a>]</p>
<p class="post-info">
<span class="comment"><a href="#">No reaction&#8217;s &#187;</a></span>  </p>
</div>
</div>
<div class="post">
<h2 class="post-title"><a href="#" rel="bookmark" title="Permanent Link: An unordered list">An unordered list</a></h2>
<p class="day-date">Posted by <em class="user">Joery</em> on <em class="time">20/11/2005</em><br />
Field under: <em class="cat"><a href="#" title="View all posts in Uncategorized" rel="category tag">Uncategorized</a></em><span class="editlink"> <a href="#">Edit</a> </span></p>
<div class="post-content">  <p><strong>A list of intelligence</strong></p>
<ul><li>2 chickens</li><li>4 fish</li><li>3 horses</li><li>8 cows</li><li>7 sheep</li><li>13 eels</li><li>4 crows</li><li>9 men</li></ul>
<p>And not one of them was hungry?</p>
<p class="post-info"><span class="comment"><a href="#">No reactions&#8217;s &#187;</a></span></p>
</div>
</div>
<div class="post">
<h2 class="post-title"><a href="#" rel="bookmark" title="Permanent Link: How the ?more? tag works">How the ?more? tag works</a></h2>
<p class="day-date">Posted by <em class="user">Joery</em> on <em class="time">19/11/2005</em><br />
Field under: <em class="cat"><a href="#" title="View all posts in Uncategorized" rel="category tag">Uncategorized</a></em><span class="editlink"> <a href="#">Edit</a> </span></p>
<div class="post-content">  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.</p>
<p class="post-info">
<span class="comment"><a href="#">No reaction&#8217;s &#187;</a></span>&nbsp;&#124;&nbsp;<a href="#" class="more">Read more &#187;</a>        </p>
</div>
</div>
<div class="post">
<h2 class="post-title"><a href="#" rel="bookmark" title="Permanent Link: Order or Unorder - you decide">Order or Unorder - you decide</a></h2>
<p class="day-date">Posted by <em class="user">Joery</em> on <em class="time">19/11/2005</em><br />
Field under: <em class="cat"><a href="#" title="View all posts in Uncategorized" rel="category tag">Uncategorized</a></em><span class="editlink"> <a href="#">Edit</a> </span></p>
<div class="post-content">  <p>A post with lists [just for Alphoide] 
<img src='BlueBridge-images/icon_smile.gif' alt=':)' class='wp-smiley' width="15" height="15" /> <br />
<strong>Unordered List</strong></p>
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
<p><strong>Ordered List</strong></p>
<ol>
<li>Item one</li>
<li>Item two</li>
</ol>
<p class="post-info">
<span class="comment"><a href="#">No reaction&#8217;s &#187;</a></span></p>  
</div>
</div>
<div class="post">
<h2 class="post-title"><a href="#" rel="bookmark" title="Permanent Link: A post with links and 3 pages within">A post with links and 3 pages within</a></h2>
<p class="day-date">Posted by <em class="user">Joery</em> on <em class="time">19/11/2005</em><br />
Field under: <em class="cat"><a href="#" title="View all posts in Uncategorized" rel="category tag">Uncategorized</a></em><span class="editlink"> <a href="#">Edit</a> </span></p>
<div class="post-content"><p>A link to <a href="http://wrc.os42.com"><span class="caps">WRC</span></a> combined with a link to <a href="http://shadows.os42.com">Shadows</a> and perhaps a link to <a href="http://www.mozilla.org/products/firefox/">Firefox</a></p>
<p class="post-info">
<span class="comment"><a href="#">No reaction&#8217;s &#187;</a></span>  </p>
</div>
</div>
<div class="post">
<h2 class="post-title"><a href="#" rel="bookmark" title="Permanent Link: An example of child categories">An example of child categories</a></h2>
<p class="day-date">Posted by <em class="user">Joery</em> on <em class="time">19/11/2005</em><br />
Field under: <em class="cat"><a href="#" title="View all posts in Test Category 1" rel="category tag">Test Category 1</a>,  <a href="#" title="View all posts in Test Category 2" rel="category tag">Test Category 2</a>,  <a href="#" title="View all posts in Test Category 3" rel="category tag">Test Category 3</a>,  <a href="#" title="View all posts in Child 1" rel="category tag">Child 1</a>,  <a href="#" title="View all posts in Child 2" rel="category tag">Child 2</a>,  <a href="#" title="View all posts in Child 3" rel="category tag">Child 3</a></em><span class="editlink"> <a href="#">Edit</a> </span></p>
<div class="post-content">  <p>This is posted in the 3 child categories which sit under the parent categories of 1 and 2<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.</p>
<p class="post-info"><span class="comment"><a href="#">No reaction&#8217;s &#187;</a></span>  </p>    
</div>
</div>
<div class="post">
<h2 class="post-title"><a href="#" rel="bookmark" title="Permanent Link: Hello world!">Hello world!</a></h2>
<p class="day-date">Posted by <em class="user">Joery</em> on <em class="time">19/11/2005</em><br />
Field under: <em class="cat"><a href="http://testblog.wmw.be/?cat=7" title="#" rel="category tag">Uncategorized</a></em><span class="editlink"> <a href="#">Edit</a> </span></p>
<div class="post-content">  <p>Welcome to Your Website. This is your first post. Edit or delete it, then start blogging!</p>
<p class="post-info"><span class="comment"><a href="#">2 Reaction&#8217;s &#187;</a></span></p>
</div>
</div>    
</div>
<div id="sidebar">
<form id="searchform" method="get" action="#">
<fieldset>
<input class="input" type="text" name="s" id="s" size="15" /><input class="zoek"  type="submit" name="submit" value="Search" />
</fieldset>
</form>
<h2>Pages</h2>
<ul class="pages">
<li class='selected'><a href="#">Home</a></li>
<li class="page_item"><a href="#" title="Archief">Archief</a></li>
<li class="page_item"><a href="#" title="Blue-bridge">Blue-bridge</a></li>
<li class="page_item"><a href="#" title="Contact">Contact</a></li>
</ul>
<h2>Tags</h2>
<ul class="cats">
  <li><a href="#" title="View all posts filed under Child 1">Child 1</a> (1)
</li>
  <li><a href="#" title="View all posts filed under Child 2">Child 2</a> (1)
</li>
  <li><a href="#" title="View all posts filed under Child 3">Child 3</a> (1)
</li>
  <li><a href="#" title="View all posts filed under Test Category 1">Test Category 1</a> (2)
</li>
  <li><a href="#" title="View all posts filed under Test Category 2">Test Category 2</a> (1)
</li>
  <li><a href="#" title="View all posts filed under Test Category 3">Test Category 3</a> (1)
</li>
  <li><a href="#" title="View all posts filed under Uncategorized">Uncategorized</a> (8)
</li>
</ul>
<h2>Links</h2>
<ul>
<li><a href='http://www.www.be'>Designers website</a></li>
<li><a href='#'>A link</a></li>
<li><a href='#'>Some input</a></li>
<li><a href='#'>Cool flavors</a></li>
<li><a href='#'>Vanilla</a></li>
<li><a href='#'>Ice</a></li>
<li><a href='#'>Creem</a></li>
</ul>
<h2>RSS Feeds</h2>
<ul class="rss">
<li><a href="#">Posts</a></li>
<li><a href="#">Reactie&#8217;s</a></li>
</ul>
</div>
</div>
<div id="footer">
<p>Design by <a href="http://www.wmw.be">WebMasterWorld</a>&nbsp;&#124;&nbsp;<a href="http://validator.w3.org/check/referer" title="valid xhtml"><em title="Extensible HyperText Markup Language">XHTML</em> 1.0 Strict!</a> 
and <a href="http://jigsaw.w3.org/css-validator/check/referer" title="valid css">correcte <em title="Cascading Style Sheet">Css</em></a>&nbsp;&#124;&nbsp;<!-- Please let this link where it belongs, give me some credit -->Copyright by <a href="http://www.wmw.be/" title="main website from the designer">WebMasterWorld</a></p>        
</div>
</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.bluebrush
28.bluebusiness
29.bluecarbon
30.bluecorporation
31.bluediamond
32.blueflex
33.BlueFlower
34.BlueFresh
35.bluegray
36.blueled
37.blueminimal
38.blueminimalsidebar
39.blueprism
40.Blueshine
41.blueshuffle
42.BlueSpace
43.BlueSquareShadow
44.bluesurge
45.bluethickline
46.bluetoolkit
47.bluewave
48.blueweb
49.blueworld
50.bluey
51.blue_circles
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