military-school
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Military School</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* CSS Document */
body{padding:0px; margin:0px; background:#2c2916; color:#d4cfb7; font:11px/14px Arial, Helvetica, sans-serif;}
div, p, ul, h2, h3, h4, img{padding:0px; margin:0px;}
ul{list-style-type:none;}
.clear {clear: both; margin: 0px; height:0}
p a{font:11px/14px Arial, Helvetica, sans-serif; color:#d4cfb7; text-decoration:underline;}
p a:hover{ color:#FFF; text-decoration:none;}
.headline{font:12px/14px Arial, Helvetica, sans-serif; color:#ffffff; font-weight:bold}
.headline2{font:11px/14px Arial, Helvetica, sans-serif; color:#ffffff;}
#container{width:775px; position:relative; margin:0 auto;}
/* HEADER */
#header{width:775px; height:349px; position:relative; background:url(military-school-images/b_header.jpg) 0 0 no-repeat}
#header img#logo{position:absolute; top:22px; left:45px}
#header img#slogan{position:absolute; top:132px; left:305px}
#header ul.menu{position:absolute; top:34px; left:331px; width:440px}
#header ul.menu li{height:16px; margin-right:25px; float:left}
#header ul.menu li a{height:16px; display:block; text-indent:-20000px; }
#header ul.menu li a:hover{height:16px;}
#header ul.menu li.btn_1 a{width:47px; background:url(military-school-images/btn_1.gif) 0 0 no-repeat; }
#header ul.menu li.btn_1 a:hover{width:47px; background:url(military-school-images/btn_1_over.gif) 0 0 no-repeat;}
#header ul.menu li.btn_2 a{width:60px; background:url(military-school-images/btn_2.gif) 0 0 no-repeat; }
#header ul.menu li.btn_2 a:hover{width:60px; background:url(military-school-images/btn_2_over.gif) 0 0 no-repeat;}
#header ul.menu li.btn_3 a{width:73px; background:url(military-school-images/btn_3.gif) 0 0 no-repeat; }
#header ul.menu li.btn_3 a:hover{width:73px; background:url(military-school-images/btn_3_over.gif) 0 0 no-repeat;}
#header ul.menu li.btn_4 a{width:64px; background:url(military-school-images/btn_4.gif) 0 0 no-repeat; }
#header ul.menu li.btn_4 a:hover{width:64px; background:url(military-school-images/btn_4_over.gif) 0 0 no-repeat;}
#header ul.menu li.btn_5{margin-right:0}
#header ul.menu li.btn_5 a{width:67px; background:url(military-school-images/btn_5.gif) 0 0 no-repeat; }
#header ul.menu li.btn_5 a:hover{width:67px; background:url(military-school-images/btn_5_over.gif) 0 0 no-repeat;}
/* CONTENT */
#content{width:775px; position:relative; clear:both; margin: 0 auto}
#leftPan{width:415px; float:left; margin:23px 50px 0 47px; display:inline}
#rightPan{width:235px; float:left; margin:29px 0 0 0;}
#welcome{margin-bottom:36px}
#welcome h2{height:24px; position:relative; background:url(military-school-images/h_welcome.gif) 0 0 no-repeat; margin-bottom:16px}
#welcome img{float:left; margin-right:14px; margin-left:5px; display:inline}
#welcome p{float:left; width:322px}
#about h2{height:24px; position:relative; background:url(military-school-images/h_about.gif) 0 0 no-repeat; margin-bottom:16px}
#about img{float:left; margin-right:14px; margin-left:5px; display:inline}
#about p{float:left; width:322px}
#news{margin-bottom:20px}
#news h2{height:31px; position:relative; background:url(military-school-images/h_news.gif) 0 0 no-repeat; margin-bottom:12px}
#news p{margin-bottom:10px}
#life h2{height:31px; position:relative; background:url(military-school-images/h_life.gif) 0 0 no-repeat; margin-bottom:12px}
#life img{float:left; margin-right:14px; margin-left:1px; display:inline}
#life p{float:left; width:145px}
.clear#end{height:20px}
/* FOOTER */
#footer{width:775px; height:75px; clear:both; background:url(military-school-images/b_footer.gif) 0 0 repeat-x }
#footer p{padding: 20px 0 0 0; font:11px/16px Arial, Helvetica, sans-serif; font-weight:normal; text-align:center; color:#fff;}
#footer p a{font:11px/16px Arial, Helvetica, sans-serif; font-weight:normal; color:#fff; text-decoration:none; padding: 0 3px }
#footer p a:hover{text-decoration:underline; color:#fff}
</style>
</head>
<body>
<div id="container">
<div id="header">
<ul class="menu">
<li class="btn_1"><a href="#">home</a></li>
<li class="btn_2"><a href="#">history</a></li>
<li class="btn_3"><a href="#">education</a></li>
<li class="btn_4"><a href="#">careers</a></li>
<li class="btn_5"><a href="#">contacts</a></li>
</ul>
<img src="military-school-images/logo.gif" alt="" name="logo" width="214" height="28" id="logo"/> <img src="military-school-images/slogan.jpg" alt="" name="logo" width="387" height="146" id="slogan"/> </div>
<div id="content">
<div id="leftPan">
<div id="welcome">
<h2></h2>
<img src="military-school-images/img_welcome.jpg" width="69" height="69" alt="" />
<p><span class="headline">Nam justo augue, dictum a, hendrerit </span><br />
Morbi volutpat leo in ligula. Integer vel magna. Nam justo augue, dictum a, hendrerit in, ultricies in, leo. Nullam eleifend. Duis tempor ipsum vitae diam. Curabitur felis dui, bibendum ictum a, hendrerit in, ultricies in, leo. Nullam eleifend. Duis tempor ipsum vitae diam. </p>
<div class="clear"></div>
</div>
<div id="about">
<h2></h2>
<img src="military-school-images/img_about.jpg" width="69" height="69" alt="" />
<p><span class="headline">Nam justo augue, dictum a, hendrerit </span><br />
Morbi volutpat leo in ligula. Integer vel magna. Nam justo augue, dictum a, hendrerit in, ultricies in, leo. Nullam eleifend. Duis tempor ipsum vitae diam. Curabitur felis dui, bibendum ictum a, hendrerit in, ultricies in, leo. Nullam eleifend. Duis tempor ipsum vitae diam. </p>
<div class="clear"></div>
</div>
</div>
<div id="rightPan">
<div id="news">
<h2></h2>
<p><span class="headline2">28/09/09</span> <a href="#">Morbi volutpat leo in ligula. Integer vel magna. Quisque ut magna et nisi</a> </p>
<p><span class="headline2">28/09/09</span> <a href="#">Morbi volutpat leo in ligula. Integer vel magna. Quisque ut magna et nisi</a> </p>
</div>
<div id="life">
<h2></h2>
<img src="military-school-images/img_life.jpg" width="69" height="69" alt="" />
<p><span class="headline">Nam justo augue, dictum </span><br />
Morbi volutpat leo in ligula. Integer vel magna. Nam justo augue, dictum a, hendrerit in, ultricies in, leo. Nullam </p>
<div class="clear"></div>
</div>
</div>
<div class="clear" id="end"></div>
</div>
<div id="footer">
<p><a href="#">HOME PAGE</a> | <a href="#">HISTORY</a> | <a href="#">EDUCATION</a> | <a href="#">CAREERS</a> | <a href="#">CONTACTS</a><br/>
Copyright © Your Company Name | Design by <a href="http://freshtemplates.com/">Website Templates</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category