Split the banner with link list
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Aquatic</title>
<style type='text/css'>
?/* CSS Document */
body{padding:0px; margin:0px; background:url(Aquatic-images/main-bg.gif) 0 0 repeat-x #fff; color:#5F7A77; font:13px/19px Arial, Helvetica, sans-serif;}
div, p, ul, h2, h3, h4, h5, img{padding:0px; margin:0px;}
ul{list-style-type:none}
/*----MAIN PANEL----*/
#mainPan{width:778px; position:relative; margin:0 auto;}
/*----TOP PANEL----*/
#topPan{width:778px; height:65px; background:url(Aquatic-images/topbg.jpg) 0 0 no-repeat #fff; color:#828282; position:relative; margin:0 auto;}
#topPan img.logo{width:136px; height:31px; position:absolute; top:12px; left:235px;}
#topPan p.caption{width:200px; background:#fff; color:#828282; position:absolute; top:43px; left:235px;}
#topcontactPan{width:181px; height:36px; background:url(Aquatic-images/icon1.jpg) 68px 0px no-repeat; position:absolute; top:11px; left:567px; padding:7px 0 0;}
#topcontactPan p.callus{width:63px; height:17px; display:block; background:#DDC40C; color:#fff; font:14px/17px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; text-align:center;}
#topcontactPan p.tollfree{width:63px; height:20px; display:block; background:#fff; color:#A99607; font:11px/20px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; text-align:center;}
#topcontactPan p.phoneno{width:88px; height:28px; display:block; position:absolute; top:7px; left:91px; background:#fff; color:#00473E; border:1px solid #A2C1C0; font-size:11px; line-height:14px; text-align:center;}
/*----/TOP PANEL----*/
/*----HEADER PANEL----*/
#headerPan{width:686px; height:153px; background:url(Aquatic-images/header.jpg) 0 0 no-repeat; position:relative; margin:0 auto; padding:11px 0 0 92px;}
#headerPan ul.leftmenu{width:87px;}
#headerPan ul.leftmenu li{width:87px; height:22px; border-bottom:1px dashed #AECCCA;}
#headerPan ul.leftmenu li a{width:72px; height:22px; display:block; background:url(Aquatic-images/bullet-normal.gif) 0 7px no-repeat #fff; color:#305E5C; line-height:22px; text-decoration:none; padding:0 0 0 15px;}
#headerPan ul.leftmenu li a:hover{background:url(Aquatic-images/bullet-hover.gif) 0 7px no-repeat #fff; color:#305E5C; line-height:22px; text-decoration:none; padding:0 0 0 15px;}
#headerPan ul.leftmenu li.Solutions{width:72px; height:22px; display:block; background:url(Aquatic-images/bullet-hover.gif) 0 7px no-repeat #fff; color:#305E5C; line-height:22px; text-decoration:none; padding:0 0 0 15px;}
#headerPan ul.leftmenu li.clients{width:87px; height:22px; border-bottom:none;}
#headerPan ul.botton{width:150px; height:45px; position:absolute; top:118px; left:250px;}
#headerPan ul.botton li{float:left; height:45px;}
#headerPan ul.botton li.home a{width:42px; height:45px; display:block; background:url(Aquatic-images/home-normal.gif) 0 0 no-repeat; text-indent:-200000px; margin:0 12px 0 0;}
#headerPan ul.botton li.home a:hover{background:url(Aquatic-images/home-hover.gif) 0 0 no-repeat;}
#headerPan ul.botton li.aboutus a{width:42px; height:45px; display:block; background:url(Aquatic-images/aboutus-normal.gif) 0 0 no-repeat; text-indent:-200000px; margin:0 12px 0 0;}
#headerPan ul.botton li.aboutus a:hover{background:url(Aquatic-images/aboutus-hover.gif) 0 0 no-repeat;}
#headerPan ul.botton li.contact a{width:42px; height:45px; display:block; background:url(Aquatic-images/contact-normal.gif) 0 0 no-repeat; text-indent:-200000px; margin:0px;}
#headerPan ul.botton li.contact a:hover{background:url(Aquatic-images/contact-hover.gif) 0 0 no-repeat;}
/*----/HEADER PANEL----*/
/*----BODY PANEL----*/
#bodyPan{width:686px; background:url(Aquatic-images/bodybg.gif) 0 0 no-repeat; position:relative; margin:0 auto; padding:22px 0 0 92px;}
/*----Body Left Panel----*/
#leftPan{width:114px; float:left;}
#leftPan h2{width:114px; height:34px; background:#fff; color:#5F7A77; font-size:18px; line-height:34px;}
#leftPan ul{width:114px;}
#leftPan ul li{width:114px; height:24px;}
#leftPan ul li a{width:102px; height:24px; display:block; background:url(Aquatic-images/bullet2-normal.gif) 0 10px no-repeat #fff; color:#5F7A77; text-decoration:none; line-height:24px; padding:0 0 0 12px;}
#leftPan ul li a:hover{background:url(Aquatic-images/bullet2-hover.gif) 0 10px no-repeat #fff; color:#5F7A77; text-decoration:none;}
#leftPan ul li span{text-decoration:underline;}
/*----/Body Left Panel----*/
/*----Body Right Panel----*/
#rightPan{width:511px; float:left; border-left:1px solid #C8E8E2; margin:28px 0 0; padding:0 30px;}
#rightPan p{padding:0 0 10px 0;}
#rightPan p.more{width:502px; height:25px; float:left; background:url(Aquatic-images/sky-color-bg.gif) 0 10px repeat-x; padding:0 0 20px 0;}
#rightPan p.more a{width:92px; height:21px; display:block; background:url(Aquatic-images/icon2.jpg) 0 0 no-repeat #fff; color:#958201; line-height:21px; text-transform:uppercase; text-decoration:none; margin:0 0 0 328px; padding:4px 0 0 50px;}
#rightPan p.more a:hover{background:url(Aquatic-images/icon2.jpg) 0 0 no-repeat #fff; color:#645804; text-decoration:none;}
#rightPan h2{width:96px; height:77px; float:left; display:block; background:url(Aquatic-images/icon3.jpg) 8px 38px no-repeat #B1DED5; color:#fff; font-size:16px; font-weight:bold; line-height:18px; text-transform:uppercase; padding:46px 0 0 75px; margin:0 0 5px 0;}
#rightPan ul.services{width:137px; height:114px; float:left; border:1px solid #B1DED5; background:#fff; color:#5F7A77; padding:7px 0 0 25px;}
#rightPan ul.services li.captionone{background:#fff; color:#AC9601; font-size:12px; font-weight:bold; text-decoration:underline;}
#rightPan ul.services li{width:137px; height:20px;}
#rightPan ul.services li a{width:125px; height:20px; display:block; background:url(Aquatic-images/bullet2-normal.gif) 0 7px no-repeat #fff; color:#5F7A77; text-decoration:none; line-height:20px; padding:0 0 0 12px;}
#rightPan ul.services li a:hover{background:url(Aquatic-images/bullet2-hover.gif) 0 7px no-repeat #fff; color:#5F7A77; text-decoration:none;}
#rightPan ul.servicestwo{width:137px; height:114px; float:left; border-bottom:1px solid #B1DED5; border-top:1px solid #B1DED5; border-right:1px solid #B1DED5;background:#fff; color:#5F7A77; padding:7px 0 0 25px;}
#rightPan ul.servicestwo li.captiontwo{background:#fff; color:#AC9601; font-size:12px; font-weight:bold; text-decoration:underline;}
#rightPan ul.servicestwo li{width:137px; height:20px;}
#rightPan ul.servicestwo li a{width:125px; height:20px; display:block; background:url(Aquatic-images/bullet2-normal.gif) 0 7px no-repeat #fff; color:#5F7A77; text-decoration:none; line-height:20px; padding:0 0 0 12px;}
#rightPan ul.servicestwo li a:hover{background:url(Aquatic-images/bullet2-hover.gif) 0 7px no-repeat #fff; color:#5F7A77; text-decoration:none;}
#rightPan h4{width:96px; height:77px; float:left; display:block; background:url(Aquatic-images/icon4.jpg) 8px 38px no-repeat #DFD79C; color:#fff; font-size:16px; font-weight:bold; line-height:18px; text-transform:uppercase; padding:46px 0 0 75px; margin:0 0 5px 0;}
#rightPan ul.events{width:305px; height:114px; float:left; border:1px solid #B1DED5; background:#fff; color:#5F7A77; padding:7px 0 0 25px;}
#rightPan ul.events li.captionthree{background:#fff; color:#AC9601; font-size:12px; font-weight:bold; text-decoration:none;}
#rightPan ul.events li{width:305px; height:20px;}
#rightPan ul.events li a{width:293px; height:20px; display:block; background:url(Aquatic-images/bullet2-normal.gif) 0 7px no-repeat #fff; color:#959595; text-decoration:underline; line-height:20px; padding:0 0 0 12px;}
#rightPan ul.events li a:hover{background:url(Aquatic-images/bullet2-hover.gif) 0 7px no-repeat #fff; color:#5F7A77; text-decoration:underline;}
/*----/Body Right Panel----*/
/*----/BODY PANEL----*/
/*----/MAIN PANEL----*/
/*----FOOTER PANEL----*/
#footermainPan{height:103px; background:url(Aquatic-images/footerbg.gif) 0 0 repeat-x #D3F0F0; color:#2F5958; font:13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif; position:relative; margin:0 auto; clear:both; padding:36px 0 0;}
#footerPan{width:778px; position:relative; margin:0 auto;}
#footerPan ul{width:608px; height:20px; position:relative; margin:0 auto;}
#footerPan li{float:left; }
#footerPan ul li a{padding:0 10px 0; color:#2F5958; background:#EBF8F7; text-decoration:none; font-size:13px;}
#footerPan ul li a:hover{text-decoration:underline;}
#footerPan p.copyright{width:250px; margin:10px 0 0 92px;}
#footerPan ul.templateworld{width:250px; background:#D3F0F0; color:#007163; display:block; font-size:10px; position:absolute; top:49px; left:92px;}
#footerPan ul.templateworld li{height:20px;}
#footerPan ul.templateworld li a{background:#D3F0F0; display:block; color:#007163; text-decoration:none; padding:0px; font-size:10px;}
#footerPan ul.templateworld li a:hover{text-decoration:underline;}
#footerPanhtml{width:70px; height:24px; display:block; position:absolute; top:35px; left:549px;}
#footerPanhtml a{width:64px; height:24px; display:block; background:url(Aquatic-images/html-normal.gif) 0 0 no-repeat #D3F0F0; color:#fff; font-size:13px; line-height:23px; font-weight:bold; text-decoration:none;text-transform:uppercase; padding:0 0 0 7px;}
#footerPanhtml a:hover{background:url(Aquatic-images/html-hover.gif) 0 0 no-repeat #D3F0F0; color:#fff;}
#footerPancss{width:58px; height:24px; display:block; position:absolute; top:35px; left:624px;}
#footerPancss a{width:49px; height:24px; display:block; background:url(Aquatic-images/css-normal.gif) 0 0 no-repeat #D3F0F0; color:#fff; font-size:13px; line-height:24px; font-weight:bold; text-decoration:none; text-transform:uppercase; padding:0 0 0 10px;}
#footerPancss a:hover{background:url(Aquatic-images/css-hover.gif) 0 0 no-repeat #D3F0F0; color:#fff; text-decoration:none;}
/*----/FOOTER PANEL----*/
</style>
</head>
<body>
<div id="mainPan">
<div id="topPan">
<a href="index.html"><img src="images/logo.gif" alt="Aquatic" width="136" height="31" border="0" class="logo" title="Aquatic"/></a>
<p class="caption">leo pede eleifend</p>
<div id="topcontactPan">
</div>
</div>
<div id="headerPan">
<ul class="leftmenu">
<li class="Solutions">Solutions</li>
<li><a href="#">Support</a></li>
<li><a href="#">Chat</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">forum</a></li>
<li class="clients"><a href="#">Clients</a></li>
</ul>
<ul class="botton">
<li class="home"><a href="#">home</a></li>
<li class="aboutus"><a href="#">home</a></li>
<li class="contact"><a href="#">home</a></li>
</ul>
</div>
<div id="bodyPan">
<div id="leftPan">
<h2>Solutions</h2>
<ul>
<li><a href="#"><span>Lorem ipsum</span></a></li>
<li><a href="#"><span>Dolor sit </span></a></li>
<li><a href="#"><span>amet, Con</span></a></li>
<li><a href="#"><span>sectetuer</span></a></li>
<li><a href="#"><span>Adipiscing</span></a></li>
<li><a href="#"><span>elit. Praesent</span></a></li>
<li><a href="#"><span>adipiScing</span></a></li>
</ul>
<h2>Solutions</h2>
<ul>
<li><a href="#">Magna vel</a></li>
<li><a href="#">Neque porttitor</a></li>
<li><a href="#">Mollis. In</a></li>
<li><a href="#">Eleifend, risu</a></li>
<li><a href="#">Hendreritamc</a></li>
<li><a href="#">Tempor, pur</a></li>
</ul>
</div>
<div id="rightPan">
<p>Aquatic is a free, tableless, W3C-compliant web design layout by Template World. This template has been tested and proven compatible with all major browser environments and operating systems. You are free to modify the design to suit your tastes in any way you like.</p>
<p>These templates are licensed under a Creative Commons Attribution 2.5 License. This means that you are free to modify the design to suit your tastes in any way you like, but you must include the provided link back to Template World.</p>
<p>If you are interested in seeing more of our free web template designs feel free to visit our website, Template World. We intend to add at least 25 new free templates in the coming month.</p>
<p class="more"><a href="#">read more</a></p>
<h2>service overview</h2>
<ul class="services">
<li class="captionone">Quis magna vel</li>
<li><a href="#">Amet, consectetuer</a></li>
<li><a href="#">Adipiscing elit.</a></li>
<li><a href="#">Praesent scing ips</a></li>
<li><a href="#">Um Id nislpo.</a></li>
</ul>
<ul class="servicestwo">
<li class="captiontwo">Quis magna vel</li>
<li><a href="#">Amet, consectetuer</a></li>
<li><a href="#">Adipiscing elit.</a></li>
<li><a href="#">Praesent scing ips</a></li>
<li><a href="#">Um Id nislpo.</a></li>
</ul>
<p class="more"><a href="#">read more</a></p>
<h4>current events</h4>
<ul class="events">
<li class="captionthree">24.07.06</li>
<li><a href="#">Amet, consectetuer Adipiscing elit. Praesent </a></li>
<li><a href="#">Scing ipconvallis, leo pede eleifend orci, sed</a></li>
<li><a href="#">lobortis orci tortor id erat. Etiam facilisis. Etiam</a></li>
<li><a href="#">Rutrum nuncs</a></li>
</ul>
<p class="more"><a href="#">read more</a></p>
</div>
</div>
</div>
<div id="footermainPan">
<div id="footerPan">
<ul>
<li><a href="#">Home</a>| </li>
<li><a href="#">About</a>| </li>
<li><a href="#">Solution</a>| </li>
<li><a href="#">Support</a>| </li>
<li><a href="#">Chat</a>| </li>
<li><a href="#">Blog</a>| </li>
<li><a href="#">Forum</a>| </li>
<li><a href="#">Clients</a>| </li>
<li><a href="#">Contact</a></li>
</ul>
<p class="copyright">>>aquatic. All right reserved.</p>
<div id="footerPanhtml"><a href="http://validator.w3.org/check?uri=referer" target="_blank">XHTML</a></div>
<div id="footerPancss"><a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">css</a></div>
<ul class="templateworld">
<li>design by:</li>
<li><a href="http://www.templateworld.com" target="_blank">Template World</a></li>
<li> | </li>
<li><a href="http://www.cssportal.com/">CSS Portal</a></li>
</ul>
</div>
</div>
</body>
</html>
Related examples in the same category