internetbroadcast
<!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>
<title>Internet Broadcast</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type='text/css'>
/*
project: internet broadcast template
author: luka cvrk (www.solucija.com)
*/
/* default styles */
body { padding: 5px 0 0 0; margin: 0; font: .7em Tahoma, Arial, sans-serif; line-height: 1.7em; background: #fff url(internetbroadcast-images/bg.gif) repeat-x; color: #454545; }
a { color: #2F637A; background: inherit; }
a:hover { color: #808080; 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(internetbroadcast-images/lb.gif) no-repeat; color: #000; }
#loginbutton a:hover{ background: #fff url(internetbroadcast-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(internetbroadcast-images/corner.gif) no-repeat top right;
font-weight: bold;
color: #fff;
}
#tablist li a:hover{
background: #6495AB url(internetbroadcast-images/corner.gif) no-repeat top right;
color: #fff;
}
#tablist li a.current{
background: #9FC7D8 url(internetbroadcast-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(internetbroadcast-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(internetbroadcast-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(internetbroadcast-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 1em 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(internetbroadcast-images/bgshade.gif) repeat-x;
color: #808080;
border-bottom: 1px solid #ccc;
}
.left_articles {
margin: 0px 0 10px 0;
background: #fff url(internetbroadcast-images/bgshade.gif) repeat-x;
color: #454545;
padding: 15px 15px 5px 10px;
}
.date { font-size: .9em; padding: 0 0 0 12px; background: #fff url(internetbroadcast-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(internetbroadcast-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>
</head>
<body>
<div id="content">
<div id="top_info">
<p>Welcome to <b>Internet Broadcast</b> <span id="loginbutton"><a href="http://www.free-css.com/" title="Log In"> </a></span><br />
<b>You are not Logged in!</b> <a href="http://www.free-css.com/">Log in</a> to check your messages.</p>
</div>
<div id="logo">
<h1><a href="http://www.free-css.com/">Internet Broadcast</a></h1>
<p id="slogan">We share the relevant.</p>
</div>
<ul id="tablist">
<li><a class="current" href="http://www.free-css.com/" accesskey="n"><span class="key">N</span>ews</a></li>
<li><a href="http://www.free-css.com/" accesskey="b"><span class="key">B</span>logs</a></li>
<li><a href="http://www.free-css.com/" accesskey="p"><span class="key">P</span>hotos</a></li>
<li><a href="http://www.free-css.com/" accesskey="r">P<span class="key">r</span>ofiles</a></li>
<li><a href="http://www.free-css.com/" accesskey="f"><span class="key">F</span>eeds</a></li>
<li><a href="http://www.free-css.com/" accesskey="o">Br<span class="key">o</span>adcast News</a></li>
</ul>
<div id="topics">
<div class="thirds">
<p><br />
Today's Popular Articles and Posts:</p>
</div>
<div class="thirds">
<ul>
<li><a href="http://www.free-css.com/">Conducting a CMS Survey</a></li>
<li><a href="http://www.free-css.com/">Interests behind politics</a></li>
<li><a href="http://www.free-css.com/">Web 2.0 business startup tips</a></li>
</ul>
</div>
<div class="thirds">
<ul>
<li><a href="http://www.free-css.com/">How stress affects your health</a></li>
<li><a href="http://www.free-css.com/">10 ways to buy a used car</a></li>
<li><a href="http://www.free-css.com/">Are mobile phones really safe?</a></li>
</ul>
</div>
</div>
<div id="search">
<form method="post" action="http://www.free-css.com/">
<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="http://www.free-css.com/">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="internetbroadcast-images/bigimage.gif" alt="Big Image" />
<p><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a>, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <a href="http://www.free-css.com/">Ut wisi enim ad minim veniam</a>, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p>
<p><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a>, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <a href="http://www.free-css.com/">Ut wisi enim ad minim veniam</a>, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</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="http://www.free-css.com/" 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="http://www.free-css.com/"><img src="internetbroadcast-images/comment.gif" alt="Comment" /></a></p>
</div>
<div class="thirds">
<p><b><a href="http://www.free-css.com/" 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="http://www.free-css.com/"><img src="internetbroadcast-images/comment.gif" alt="Comment" /></a></p>
</div>
<div class="thirds">
<p><b><a href="http://www.free-css.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="http://www.free-css.com/"><img src="internetbroadcast-images/comment.gif" alt="Comment" /></a></p>
</div>
</div>
<div id="right">
<div class="right_articles">
<p><img src="internetbroadcast-images/image.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="http://www.free-css.com/">erat volutpat</a>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis <a href="http://www.free-css.com/">nisl ut aliquip ex</a>.</p>
</div>
<div class="right_articles">
<p><img src="internetbroadcast-images/image.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="http://www.free-css.com/">erat volutpat</a>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis <a href="http://www.free-css.com/">nisl ut aliquip ex</a>.</p>
</div>
<div class="right_articles">
<p><img src="internetbroadcast-images/image.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="http://www.free-css.com/">erat volutpat</a>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis <a href="http://www.free-css.com/">nisl ut aliquip ex</a>.</p>
</div>
<div class="notes">
<p>If you liked this template you might like some other <a href="http://www.free-css.com/">free CSS templates</a> from <a href="http://www.free-css.com/">Solucija</a>.</p>
</div>
</div>
<div id="footer">
<p class="right">© 2006 Internet Broadcast, Design: Luka Cvrk - <a href="http://www.solucija.com/" title="Information Architecture and Web Design">Solucija</a></p>
<p><a href="http://www.free-css.com/">RSS Feed</a> · <a href="http://www.free-css.com/">Contact</a> · <a href="http://www.free-css.com/">Accessibility</a> · <a href="http://www.free-css.com/">Products</a> · <a href="http://www.free-css.com/">Disclaimer</a> · <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a><br />
</p>
</div>
</div>
</body>
</html>
Related examples in the same category