media
<!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"/>
<title>Media</title>
<style type='text/css'>
html, body, h1, h2, h3, h4, ul, li {
margin: 0;
padding: 0;
}
h1 img {
display: block;
}
img {
border: 0;
}
a {
color: #464544;
}
a:hover {
color: #FFA405;
}
.left {
float: left;
}
.right {
float: right;
}
.more {
text-align: right;
}
.clear {
clear: both;
}
body {
background: #fff url(media-images/page_bg.gif) repeat-x;
text-align: center;
font: 12px arial, sans-serif;
color: #464544;
}
/** layout **/
#wrapper {
text-align: left;
margin: auto;
width: 728px;
position: relative;
}
h1 {
position: absolute;
top: 46px;
left: 0;
height: 43px;
padding-top: 8px;
width: 414px;
text-align: center;
background: #7A808C;
color: #ffffff;
font: 24px "Times new roman", serif;
font-weight: normal;
}
h1 strong {
font-weight: normal;
color: #0E1520;
}
#top-nav {
position: absolute;
top: 15px;
left: 414px;
width: 266px;
height: 269px;
background: #6D7481 bottom left url(media-images/header.jpg) no-repeat;
}
#top-nav ul {
text-align: center;
line-height: 32px;
}
#top-nav li {
display: inline;
font-size: 12px;
color: #fff;
}
#top-nav a {
text-decoration: none;
font-weight: normal;
color: #fff;
}
#top-nav a:hover {
text-decoration: underline;
}
#mmagic {
background: url(media-images/media_magic.gif) no-repeat;
position: absolute;
top: 46px;
left: 680px;
width: 48px;
height: 238px;
}
#header {
background: url(media-images/header_bg.jpg) no-repeat;
position: absolute;
top: 89px;
left: 0px;
width: 414px;
height: 195px;
}
/** body **/
#spacer {
height: 285px;
}
#body {
background: url(media-images/body_bg.gif) repeat-y;
width: 100%;
}
#left {
float: left;
width: 412px;
}
#right {
float: right;
width: 312px;
}
#nav ul {
}
#nav li {
float: left;
width: 102px;
height: 34px;
line-height: 34px;
text-align: center;
background: url(media-images/tab_lit.gif) repeat-x;
border-left: 1px solid white;
list-style: none;
}
#nav a {
font: 16px "Times new roman", serif;
color: #ffffff;
text-decoration: none;
}
#nav a:hover {
text-decoration: underline;
}
#nav li.drk {
background: url(media-images/tab_drk.gif) repeat-x;
border-left: none;
padding-left: 1px;
}
#visit {
background: #EEEEEE;
padding: 15px 40px 14px 36px;
}
#visit h2 {
font: 24px "Times new roman", serif;
}
#visit a {
text-decoration: none;
}
#visit a:hover {
text-decoration: underline;
}
#subs-left {
float: left;
width: 160px;
padding-left: 35px;
padding-bottom: 10px;
margin-top: 22px;
}
#subs-right {
float: right;
width: 145px;
padding-right: 30px;
padding-bottom: 10px;
margin-top: 22px;
}
#subs-left a {
color: #fff;
}
#subs-left {
color: #fff;
}
#subs-left h3 {
color: #000000;
font: 16px "Times new roman", serif;
}
#subs-left p {
text-align: justify;
}
#subs-right {
color: #fff;
}
#subs-right h3 {
color: #000000;
padding-left: 20px;
padding-bottom: 14px;
font: 16px "Times new roman", serif;
}
#subs-right h4 {
color: #000000;
font: 14px "Times new roman", serif;
margin: 0.6em 0;
}
#subs-right ul {
margin-top: 1em;
}
#subs-right li {
list-style: none;
padding-left: 20px;
background: 5px 3px url(media-images/bullet.gif) no-repeat;
}
#subs-right p {
text-align: justify;
margin: 0.6em 0;
}
#right-i {
padding: 4px 25px 0 20px;
}
#right h2 {
color: #323E51;
font: 22px "Times new roman", serif;
margin-bottom: 12px;
}
#right h3 {
color: #000000;
font: 14px "Times new roman", serif;
margin-bottom: 5px;
}
#right p {
margin-top: 0;
color: #163348;
}
#right .left {
margin-right: 4px;
}
#right a {
color: #163348;
font-weight: bold;
text-decoration: none;
}
#right a:hover {
text-decoration: underline;
}
/** footer **/
#copyright {
background: #6D7481;
color: #fff;
text-align: center;
font-size: 11px;
float: right;
width: 315px;
padding: 10px 0;
margin-bottom: 20px;
}
#copyright p {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>...The <strong>Worldwide</strong> Media...</h1>
<div id="top-nav">
<ul>
<li><a href="http://www.freewebsitetemplates.com">faq</a> | </li>
<li><a href="http://www.freewebsitetemplates.com">site maps</a></li>
</ul>
</div>
<div id="mmagic"> </div>
<div id="header"> </div>
<div id="spacer"> </div>
<div id="body">
<div id="left">
<div id="nav">
<ul>
<li class="drk"><a href="http://www.freewebsitetemplates.com">Home</a></li>
<li><a href="http://www.freewebsitetemplates.com">About Us</a></li>
<li><a href="http://www.freewebsitetemplates.com">Services</a></li>
<li><a href="http://www.freewebsitetemplates.com">Contact us</a></li>
</ul>
<div class="clear"> </div>
</div>
<div id="visit">
<h2>Visit Us...</h2>
<p>You can find some <a href="http://www.webhostingservices.us/">web hosting services</a> which are also a need for website building which are listed in web hosting search.</p>
<p>You can remove any link to our websites from this template you're free to use the template without linking back to us.</p>
<p class="more"><a href="http://www.freewebsitetemplates.com">more...</a></p>
</div>
<div id="subs">
<div id="subs-left">
<h3>Compant Information & Profile</h3>
<p>Even more websites all about website templates on <a href="http://www.justwebtemplates.com">Just Web Templates</a>.</p>
<h3>Company News</h3>
<p>If you're looking for beautiful and professionally made templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
<h3>Company Services</h3>
<p>This is just a place holder so you can see how the site would look like.</p>
</div>
<div id="subs-right">
<h3>Browse</h3>
<ul>
<li>
<h4>Business & Money</h4>
<p>This is just a place holder so you can see how the site would look like.</p>
</li>
<li>
<h4>Entertainment</h4>
<p>This is just a place holder so you can see how the site would look like.</p>
</li>
<li>
<h4>Society & Culture</h4>
<p>This is just a place holder so you can see </p>
</li>
</ul>
</div>
</div>
</div>
<div id="right">
<div id="right-i">
<h2>Media Coverage</h2>
<p>This is a template designed by free website templates for you for free you can replace all the text by your own text.</p>
<h3>News</h3>
<img src="media-images/pic_1.jpg" width="103" height="79" alt="Pic 1" class="left" />
<p>If you're having problems editing the template please don't hesitate to ask for help on <a href="http://www.freewebsitetemplates.com/forum/">the forum</a>.</p>
<p class="more"><a href="http://www.freewebsitetemplates.com">more...</a></p>
<h3>Sports</h3>
<img src="media-images/pic_2.jpg" width="103" height="79" alt="Pic 2" class="left" />
<p>This is a template designed by free website templates for you for free you can replace all the text by your own text.</p>
<p class="more"><a href="http://www.freewebsitetemplates.com">more...</a></p>
<h3>Television</h3>
<img src="media-images/pic_3.jpg" width="103" height="79" alt="Pic 3" class="left" />
<p>If you're having problems editing the template please don't hesitate to ask for help on <a href="http://www.freewebsitetemplates.com/forum/">the forum</a>.</p>
<p class="more"><a href="http://www.freewebsitetemplates.com">more...</a></p>
</div>
</div>
<div class="clear"> </div>
</div>
<div id="copyright">
<p>Hosting by <a href="http://www.webhostingservices.us/">Web Hosting Services</a>. All rights reserved</p>
</div>
</div>
</body>
</html>
Related examples in the same category