miniblog : Blog « Templates « HTML / CSS

Home
HTML / CSS
1.CSS
2.CSS Controls
3.Form
4.IE Firefox
5.Layout
6.Marquee Attributes
7.Meta Tags
8.Microsoft Attributes
9.Object
10.Reference
11.Style Basics
12.Tags
13.Templates
14.XML
HTML / CSS » Templates » Blog 




miniblog
   

<!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>Mini Blog</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* CSS Document */

body {
  background-color:#fff;
  background-image:url(miniblog-images/backgrounds/body.gif);
  background-position:center;
  background-repeat:repeat-y;
  font-family: "Lucida Grande","Lucida Sans Unicode",geneva,verdana,sans-serif;
  font-size:10px;
  color:#777;
}
#container {
  width:500px;
  margin:auto;
}

#header {
  background-color:#eeeeee;
  margin:10px;
  padding:30px 10px 30px 10px;
  border-top:2px solid #ccc;
}

#header h1 {
  text-align:center;
  font-family:Trebuchet MS, Geneva, Arial, Helvetica, sans-serif;
  font-size:30px;
  color:#333;
  margin:0;
  font-weight:normal;
}
#header h1 strong {
  color:#A85BA6;
}
#header h1 a {
  color:#333;
  text-decoration:none;
}
#header h2 {
  font-size:11px;
  font-weight:normal;
  text-align:center;
  color:#999;
}
#header ul {
  margin:20px 0 0 0;
  padding:0;
}
#header li {
  margin:0;
  padding:0;
  list-style:none;
  float:left;
}
#header li a {
  display:block;
  padding:7px;
  color:#999;
  text-decoration:none;
  border-bottom:5px solid #fff;
  margin:0 10px 0 0;
  font-size:10px;
}
#header li a:hover {
  color:#000;
  border-bottom:7px solid #fff;
  padding:5px 7px 7px 7px;
}
#header li a em {
  font-style:normal;
  text-decoration:underline;
}

#sidebar {
  float:right;
  width:164px !important;
  width:154px;
  margin:10px 10px 10px 0;
}

#sidebar h1 {
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
  color:#000;
  margin:10px 5px 15px 10px;
}
#sidebar p {
  padding:5px;
  margin:5px 5px 5px 10px;
  line-height:17px;
  word-spacing:-1px;
}

ul.submenu {
  margin:0;
  padding:0;
}
.submenu li {
  marign:0;
  padding:0;
  list-style:none;
}
.submenu a {
  display:block;
  height:13px;
  padding:7px 7px 7px 17px;
  margin:1px 0 0 0;
  background-color:#fff;
  background-image:url(miniblog-images/backgrounds/submenua_normal.jpg);
  background-position:left;
  background-repeat:repeat-y;
}
.submenu a:hover {
  background-image:url(miniblog-images/backgrounds/submenua.jpg);
  background-position:bottom;
  background-repeat:no-repeat;
  background-color:#fff;
  padding:7px 7px 7px 15px;
}
.submenu a:focus {
  background-image:url(miniblog-images/backgrounds/submenua.jpg);
  background-position:bottom;
  background-repeat:no-repeat;
  background-color:#fff;
  padding:7px 7px 7px 15px;
}
.submenu a:active {
  background-image:url(miniblog-images/backgrounds/submenua.jpg);
  background-position:bottom;
  background-repeat:no-repeat;
  background-color:#fff;
  padding:7px 7px 7px 15px;
}

.note {
  padding:10px;
  background-color:#eee;
  border:1px solid #ccc;
  margin:20px 5px 20px 5px;
}


#content {
  margin:10px 185px 10px 10px;
}
#content h1 {
  font-family:Trebuchet MS, Geneva, Arial, Helvetica, sans-serif;
  font-size:14px;
  border-bottom:1px solid #eee;
  padding:5px;
  color:#000;
}
#content h1 a {
  color:#000;
  text-decoration:none;
  display:block;
  background-image:url(miniblog-images/backgrounds/h1.png);
  background-position:right;
  background-repeat:no-repeat;
}
#content h1 a:hover {
  color:#444;
  background-image:url(miniblog-images/backgrounds/h1_hover.png);
}
#content h2 {
  font-size:11px;
  color:#ccc;
  margin:10px 0 10px 0;
  padding:5px;
}
#content p {
  padding:5px;
  line-height:18px;
  word-spacing: 0.1em;
}
#content .article_menu {
  text-align:right;
  padding:5px;
  margin:10px 0 20px 0;
  border-top:1px solid #eee;
}
#content .article_menu b {
  float:left;
  font-weight:normal;
}
#content .article_menu a {
  padding:0 0 0 15px;
  background-image:url(miniblog-images/backgrounds/comment.png);
  background-position:left;
  background-repeat:no-repeat;
  color:#333;
  text-decoration:none;
}
#content p a {
  color:#333;
  text-decoration:none;
}

#content p:hover a {
  border-bottom:1px dotted #000;
}
#content p:hover a:hover {
  border-bottom:1px solid #000;
}
#content .article_menu a:hover {  
  color:#000;
  background-image:url(miniblog-images/backgrounds/comment_hover.png);
}
#content ul {
  margin:0 0 0 15px;
  padding:0;
  border-top:1px solid #f6f6f6;
}
#content li {
  margin:5px 0 5px 0;
  border-bottom:1px solid #f6f6f6;
  padding:0 0 5px 20px;
  list-style:none;
  background-image:url(miniblog-images/backgrounds/arrow.png);
  background-position:top left;
  background-repeat:no-repeat;
  color:#999;
}
#content blockquote {
  background-color:#f6f6f6;
  margin:4px;
  padding:5px;
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
}
#content blockquote p {
  marign:0;
  padding:0 10px 0 10px;
}
.comment_odd {
  background-color:#f6f6f6;
  padding:10px;
  border-top:1px solid #fff;
  border-bottom:1px solid #eee;
}
.comment_even {
  padding:10px;
  background-color:#fcfcfc;
  border-top:1px solid #fff;
  border-bottom:1px solid #eee;
}
.comnum {
  float:right;
  font-family:Georgia, "Times New Roman", Times, serif;
  font-size:25px;
  color:#ccc;
}
input, textarea {
  background-color:#fff;
  border:1px solid #ccc;
  padding:3px;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:10px;
  color:#777;
}
#footer {
  background-color:#eee;
  border-top:2px solid #ccc;
  padding:10px;
  text-align:center;
}

{
  color:#333;
  text-decoration:none;
}


</style>


</head>
<body>
<div id="container">
  <div id="header">
    <h1><a href="http://www.free-css.com/">mini<strong>BLOG</strong> 1.0</a></h1>
    <h2>For all your blogging needs.</h2>
    <ul id="nav">
      <li><a href="http://www.free-css.com/" accesskey="h"><em>H</em>ome</a></li>
      <li><a href="#css" title="CSS and XHTML (a:c)" accesskey="c"><em>c</em>ss &amp; xhtml</a></li>
      <li><a href="#about" title="All about me (a:a)" accesskey="a"><em>A</em>bout the author</a></li>
      <li><a href="#contact" title="Get in Touch (a:o)" accesskey="o">C<em>o</em>ntact</a></li>
    </ul>
  </div>
  <div id="sidebar">
    <h1>The Sidebar</h1>
    <p> This is where you will put anything that uhm, belongs here really. Latest Comments. Submenus. Blogrolls. Affiliates. Anything! </p>
    <h1>Menu Take 2</h1>
    <ul class="submenu">
      <li><a href="#intro">Intro</a></li>
      <li><a href="#css">css &amp; xhtml</a></li>
      <li><a href="#about">About the author</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <h1>Check it out!</h1>
    <ul class="submenu">
      <li><a href="http://www.free-css.com/">Six Shooter Media</a></li>
      <li><a href="http://www.free-css.com/">JamesKoster.co.uk</a></li>
      <li><a href="http://www.free-css.com/">Buy a Button!</a></li>
      <li><a href="http://www.free-css.com/">Open Web Design</a></li>
      <li><a href="http://www.free-css.com/">OSWD</a></li>
    </ul>
    <p class="note"> Here is a special paragraph for any important notes that you might want to display. </p>
  </div>
  <div id="content">
    <h1><a href="#intro" id="intro">Introduction</a></h1>
    <h2>Everyting needs an intro!</h2>
    <p> Hello and welcome to miniBLOG! This is just a simple, small template designed specifically for the blog obsessives. Regarding colours, I've left everything very plain using mainly greys. These colours are all easily changed via the stylesheet. The backgorund image can be changed easily too by opening it in a graphics program and adjusting the hue/saturation. Got something to say? Say it with miniBLOG! </p>
    <p> Speaking of the background image, it was created using a pattern which can be found on squidfingers.com. </p>
    <div class="article_menu"> <b>Posted on Thursday 08 December 2005</b> <a href="http://www.free-css.com/">28 Comments</a> </div>
    <h1><a href="#css" id="css">CSS &amp; XHTML</a></h1>
    <p> As you would expect, this web site makes use of css for its entire layout. No nasty tables here baby! The markup is also valid XHTML 1.1 strict. CSS &amp; XHTML are important for the following reasons: </p>
    <ul>
      <li>Accessibility. Big subject</li>
      <li>Keeping file sizes small</li>
      <li>Search Engine Optimisation</li>
      <li>Loads more</li>
    </ul>
    <p> Anyway, this site validates as both <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML 1.1 Strict</a> compliant. Which is nice. </p>
    <div class="article_menu"> <b>Posted on Thursday 08 December 2005</b> <a href="http://www.free-css.com/">28 Comments</a> </div>
    <h1><a href="#about" id="about">About the Author</a></h1>
    <p> Hi! My names Jay and I'm 19 year old web designer from England. My main projects are conducted through my website Six Shooter Media. But I also run various other sites. These include my blog, nothing special really, and, more interestingly for people setting up new sites with these templates I run a tutorials web site which gives you some good techniques for spicing up your web sites. Be it a template site or something else, there's bound to be somehting interesting there, so take a look at Pretty as a Picture. </p>
    <p> Another site of mine that you might find interesting if you're setting up a site with a free template like this is Buy a Button. There, for a great price you can purchase a link to your site in the form of a button. This link will obviously provide you site with some additional traffic which is always nice! </p>
    <div class="article_menu"> <b>Posted on Thursday 08 December 2005</b> <a href="http://www.free-css.com/">28 Comments</a> </div>
    <h1>Some Examples</h1>
    <p> OK, here I'll just put some example html elements that you will most probably be using in your blog. </p>
    <h2>Blockquote Example</h2>
    <blockquote>
      <p> Here's your blockquote text jfds jkndskf ndsknf sldnfjk sdnf jdsbf hdsbf jbsdjfk bdskj bdsjfb dsk bds bfsdj bfsjk bfsjdbf sbjd fjsbdk fsdbf sdb fksbd sb </p>
    </blockquote>
    <h2>List Example</h2>
    <ul>
      <li>Here</li>
      <li>Is our friend</li>
      <li>The list!</li>
    </ul>
    <h2>Comment Example</h2>
    <div class="comment_odd"> <span class="comnum">3</span>
      <p><a href="http://www.free-css.com/">Author Name</a> comments:</p>
      <p> jd slksdnf dsnfk lndskfj ndskfj lndskfj dsn lksdnf kjsdnf sdlknf sjkf nsdlkfn sdjfk ndslk fnds jfknsdk fjnsdlk fnsdjf nsdlkjf nsdkljf nsdjfk nsdlf ndsjfk ndskl fnds jkfndsl jfknds jkfnds fknsdkn fksd nfsdknf lsdkn fksdn fklsdnfkjsndf ksdnf klsdn fsdknf </p>
    </div>
    <div class="comment_even"> <span class="comnum">2</span>
      <p><a href="http://www.free-css.com/">Author Name</a> comments:</p>
      <p> jd slksdnf dsnfk lndskfj ndskfj lndskfj dsn lksdnf kjsdnf sdlknf sjkf nsdlkfn sdjfk ndslk fnds jfknsdk fjnsdlk fnsdjf nsdlkjf nsdkljf nsdjfk nsdlf ndsjfk ndskl fnds jkfndsl jfknds jkfnds fknsdkn fksd nfsdknf lsdkn fksdn fklsdnfkjsndf ksdnf klsdn fsdknf </p>
    </div>
    <div class="comment_odd"> <span class="comnum">1</span>
      <p><a href="http://www.free-css.com/">Author Name</a> comments:</p>
      <p> jd slksdnf dsnfk lndskfj ndskfj lndskfj dsn lksdnf kjsdnf sdlknf sjkf nsdlkfn sdjfk ndslk fnds jfknsdk fjnsdlk fnsdjf nsdlkjf nsdkljf nsdjfk nsdlf ndsjfk ndskl fnds jkfndsl jfknds jkfnds fknsdkn fksd nfsdknf lsdkn fksdn fklsdnfkjsndf ksdnf klsdn fsdknf </p>
    </div>
    <div class="article_menu"> <b>Posted on Thursday 08 December 2005</b> <a href="http://www.free-css.com/">28 Comments</a> </div>
    <h1><a href="#contact" id="contact">Contact</a></h1>
    <p> If you decide to use this template please <a href="http://www.free-css.com/">drop me a line</a> to let me know! Don't hesitiate to get in touch if your interested in a custom template or just in any of my services in general. I look forward to hearing from you! </p>
    <div class="article_menu"> <b>Posted on Thursday 08 December 2005</b> <a href="http://www.free-css.com/">28 Comments</a> </div>
  </div>
  <div id="footer">
    <p> Template design by <a href="http://www.sixshootermedia.com">Six Shooter Media</a>.<br />
&copy; All your copyright information here. </p>
  </div>
</div>
</body>
</html>

   
    
    
  














Related examples in the same category
1.blog-style
2.blogger
3.bloggersgreen
4.blogging
5.blogsmith
6.blog_division
7.blog_graphic_design
8.christines-blog
9.chilli-blog
10.baronsblog
11.dkblog
12.metamorph_wordpress
13.design-blog
14.genericblog
15.my_dog_spot
16.orange-blog
17.paper-blog
18.personal
19.personalwebsite
20.slash-blog
21.your-blog
22.ntechblog
23.oldenglishblog
24.paint-blog
25.spotlightblog
26.theragblog
27.tilersblog
28.intrablog
29.happyblog
30.Day by day blog
31.Blog by date
32.Blog layout
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.