Midddot
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="author" content="Luka Cvrk (www.solucija.com)" />
<meta name="description" content="My Site" />
<meta name="keywords" content="key, words" />
<style type='text/css'>
/* default styles */
body { padding: 5px 0 0 0; margin: 0; font: .7em Tahoma, Arial, sans-serif; line-height: 1.7em; background: #fff url(Midddot-images/bg.gif) repeat-x; color: #454545; }
a { color: #447537; background: inherit; }
a:hover { color: #73d23f; background: inherit; }
p { margin: 0 0 5px 0; }
h1 { font: bold 2.2em Arial, Sans-Serif; padding: 8px 0 0 0; margin: 0; letter-spacing: -1px; }
h2 { margin: 0; padding: 0; font: bold 1.8em Arial, Sans-Serif; letter-spacing: -1px; }
h1 a, h2 a { color: #000; background: inherit; text-decoration: none; }
ul { margin: 0; padding : 0; list-style : none; }
img { border: 0; }
/* layout */
#content { margin: 10px auto; width: 960px; }
#logo { margin: 0 0 10px 0; }
#slogan { font-size: 0.9em; margin: 0 0 10px 2px; padding: 0; color: #808080; background: #fff; }
#top_info { line-height: 27px; float: right; color: #808080; background: #fff; margin: 12px 5px 7px 0; text-align: right; height: 74px; }
/* round blue login button */
#loginbutton a { text-decoration: none; width: 24px; padding: 7px 12px; margin: 0 0 0 8px; height: 28px; background: #fff url(Midddot-images/lb.gif) no-repeat; color: #000; }
#loginbutton a:hover{ background: #fff url(Midddot-images/lbhover.gif) no-repeat; color: #000;}
/* main horizontal menu */
#tablist{ padding: 3px 0; margin: 0; float: left; }
#tablist li{ list-style: none; display: inline; margin: 0; }
#tablist li a{
text-decoration: none;
padding: 4px 22px;
margin-right: 2px;
background: #808080 url(Midddot-images/corner.gif) no-repeat top right;
font-weight: bold;
color: #fff;
}
#tablist li a:hover{
background: #b5ec47 url(Midddot-images/corner.gif) no-repeat top right;
color: #fff;
}
#tablist li a.current{
background: #b2eb40 url(Midddot-images/corner.gif) no-repeat top right;
color: #2F637A;
padding: 6px 22px;
}
#tablist .key { text-decoration: underline; }
/* main menu topics */
#topics {
clear: left;
float: left;
width: 640px;
background: #B0D0DC url(Midddot-images/topicsbg.gif) repeat-x left bottom;
padding: 8px 5px;
margin: 0 0 5px 0;
color: #fff;
height: 59px;
}
#topics li a { background-image: url(Midddot-images/bullet.gif); background-repeat: no-repeat; background-position: center left; padding: 0 0 0 12px; }
/* main menu search */
#search {
float: right;
text-align: right;
background: #fff url(Midddot-images/searchbg.gif) no-repeat;
color: #000;
padding: 32px 20px 12px 20px;
min-height: 32px; /* FF height */
height: 25px; /* IE height */
width: 270px;
}
/* search form styling */
form, form p { margin: 0; padding: 0; line-height: 25px; }
.search { width: 170px; border: 1px solid #357994; background: #fff; color: #478F36; padding: 4px; margin: 0; font-weight: bold; font-size: 1.3em; }
.button { padding: 4px; font: bold 12px Arial, Sans-Serif; }
/* left side */
#left {
float: left;
width: 635px;
margin: 0 0 10px 0;
}
.subheader {
margin: 0 0 10px 0;
padding: 8px;
background: #f4f4f4 url(Midddot-images/bgshade.gif) repeat-x;
color: #808080;
border-bottom: 1px solid #ccc;
}
.left_articles {
margin: 0px 0 10px 0;
background: #fff url(Midddot-images/bgshade.gif) repeat-x;
color: #454545;
padding: 15px 15px 5px 10px;
}
.date { font-size: .9em; padding: 0 0 0 12px; background: #fff url(Midddot-images/news.gif) no-repeat center left; color: #808080; }
.bigimage {
float: left;
clear: left;
border: 1px solid #ccc;
background: #eee;
color: #000;
width: 200px;
height: 150px;
margin: 0 15px 10px 0;
}
.left_box {
background: #f4f4f4;
color: #808080;
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
padding: 15px;
margin: 0 0 15px 0;
}
.thirds {
float: left;
width: 186px;
padding: 0 10px 0 15px;
}
/* right side */
#right {
float: right;
width: 310px;
margin: 0 0 10px 0;
}
.right_articles {
border: 1px solid #ccc;
padding: 8px;
margin: 0 0 10px 0;
background: #eee;
color: #454545;
}
.image { float: left; margin: 0 9px 3px 0; }
.notes {
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
padding: 17px 10px 17px 80px;
margin: 0 0 10px 0;
background: #fff url(Midddot-images/notes.gif) no-repeat center left;
color: #454545;
}
/* footer */
#footer {
clear: both;
color: #808080;
background: #FFF;
padding: 10px 15px;
border-top: 1px solid #ccc;
}
#footer .right { float: right; }
</style>
<title>Internet Broadcast · We share the relevant.</title>
<style type="text/css">
<!--
.style1 {color: #000000}
.style2 {
font-size: 11px
}
-->
</style>
</head>
<body>
<div id="content">
<div id="top_info">
<p>Welcome to <b>Website Title</b> <span id="loginbutton"><a href="#" title="Log In"> </a></span><br />
<b>You are not Logged in!</b> <a href="#">Log in</a> to check your messages.</p>
</div>
<div id="logo">
<h1><a href="#" title="We share the relevant.">Website Title</a></h1>
<p class="style2" id="slogan">We share the relevant.</p>
</div>
<ul id="tablist">
<li><a class="current" href="#" accesskey="n"><span class="key">N</span>ews</a></li><li><a href="#" accesskey="b"><span class="key">B</span>logs</a></li><li><a href="#" accesskey="p"><span class="key">P</span>hotos</a></li><li><a href="#" accesskey="r">P<span class="key">r</span>ofiles</a></li><li><a href="#" accesskey="f"><span class="key">F</span>eeds</a></li><li><a href="#" accesskey="o">Br<span class="key">o</span>adcast News</a></li>
</ul>
<div id="topics">
<div class="thirds">
<p><br />
<span class="style1">Today's Popular Articles and Posts:</span></p>
</div>
<div class="thirds">
<ul>
<li><a href="#">Conducting a CMS Survey</a></li>
<li><a href="#">Interests behind politics</a></li>
<li><a href="#">Web 2.0 business startup tips</a></li>
</ul>
</div>
<div class="thirds">
<ul>
<li><a href="#">How stress affects your health</a></li>
<li><a href="#">10 ways to buy a used car</a></li>
<li><a href="#">Are mobile phones really safe?</a></li>
</ul>
</div>
</div>
<div id="search">
<form method="post" action="?">
<p><input type="text" name="search" class="search" /> <input type="submit" value="Search" class="button" /></p>
</form>
</div>
<div id="left">
<div class="subheader">
<p><a href="#">Lorem ipsum dolor</a> sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p>
</div>
<div class="left_articles">
<h2>Today's Featured Article</h2>
<p class="date">Posted on 8th September</p>
<img class="bigimage" src="Midddot-images/bigimage1.gif" alt="Big Image" />
<p>This is GreenLime, a free, fully standards-compliant CSS template designed by Free CSS Templates. <br />
This free template is released under a Creative <a href="http://creativecommons.org/licenses/by/2.5/" target="_blank">Commons Attributions 2.5</a> license, so you?re pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it <br />
</p>
</div>
<div class="left_box">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.</p>
</div>
<div class="thirds">
<p><b><a href="#" class="title">Web 2.0 business startup tips</a></b><br />Lorem ipsum dolor sit amet esta pa, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci. <a href="#"><img src="Midddot-images/comment.gif" alt="Comment" /></a></p>
</div>
<div class="thirds">
<p><b><a href="http://andreasviklund.com/templates/" class="title">Visualize your website</a></b><br />Lorem ipsum dolor sit amet esta pa, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci. <a href="#"><img src="Midddot-images/comment.gif" alt="Comment" /></a></p>
</div>
<div class="thirds">
<p><b><a href="http://snews.solucija.com/" class="title">Manage your content</a></b><br />Lorem ipsum dolor sit amet esta pa, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci. <a href="#"><img src="Midddot-images/comment.gif" alt="Comment" /></a></p>
</div>
</div>
<div id="right">
<div class="right_articles">
<p><img src="Midddot-images/image1.gif" alt="Image" title="Image" class="image" /><b>Lorem ipsum dolor sit amet</b><br />
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam <a href="#">erat volutpat</a>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis <a href="#">nisl ut aliquip ex</a>.</p>
</div>
<div class="right_articles">
<p><img src="Midddot-images/image3.gif" alt="Image" title="Image" class="image" /><b>Lorem ipsum dolor sit amet</b><br />
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam <a href="#">erat volutpat</a>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis <a href="#">nisl ut aliquip ex</a>.</p>
</div>
<div class="right_articles">
<p><img src="Midddot-images/image2.gif" alt="Image" title="Image" class="image" /><b>Lorem ipsum dolor sit amet</b><br />
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam <a href="#">erat volutpat</a>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis <a href="#">nisl ut aliquip ex</a>.</p>
</div>
<div class="notes">
<p>Lorem ipsum dolor sit amet consecteuter<br />
adpisicing elit, sed diam nonummy nibh.</p>
</div>
</div>
<div id="footer">
<p class="right">© Copyright 2008 All Rights Reserved<a href="http://www.solucija.com/" title="What's your solution?"></a></p>
<p><a href="http://www.templatesold.com/" target="_blank">Website Templates</a> by <a href="http://www.free-css-templates.com/" target="_blank">Free CSS Templates</a><br />
</p>
</div>
</div>
</body>
</html>
Related examples in the same category