Tab pages
<!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>Expert Vision</title>
<style type='text/css'>
/* CSS Document */
body{padding:0px; margin:17px 0 0; background:url(Expert-Vision-images/mainbg.gif) 0 0 repeat-x #F3F3F3; color:#6D6D6D; font:14px/18px Arial, Helvetica, sans-serif;}
div, p, ul, li, h1, h2, h3, h4{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:330px; background:url(Expert-Vision-images/topbg.jpg) 0 0 no-repeat; position:relative; margin:0 auto;}
#topPan img.logo{width:230px; height:44px; position:absolute; top:48px; left:26px;}
#topPan h1{width:241px; height:78px; display:block; background:url(Expert-Vision-images/header.jpg) 0 0 no-repeat #F3F3F3; color:#fff; position:absolute; top:114px; left:0px; font-size:12px; font-weight:bold; line-height:16px; padding:73px 186px 0 53px;}
#topPan h2{width:200px; height:25px; display:block; position:absolute; bottom:0px; left:53px; background:#fff; color:#B88F00; font:22px/25px Georgia, "Times New Roman", Times, serif;}
#topPan ul{width:438px; height:16px; display:block; position:absolute; top:64px; right:45px;}
#topPan ul li{width:59px; height:16px; float:left;}
#topPan ul li a{width:47px; height:16px; display:block; background:url(Expert-Vision-images/arrow3.gif) 0 6px no-repeat #fff; color:#5A5A5A; font-size:13px; text-decoration:none; padding:0 0 0 12px;}
#topPan ul li a:hover{background:url(Expert-Vision-images/arrow4.gif) 0 6px no-repeat #fff; color:#5A5A5A; text-decoration:none;}
#topPan ul li.about{width:80px;}
#topPan ul li.about a{width:70px; height:16px; display:block; background:url(Expert-Vision-images/arrow3.gif) 0 6px no-repeat #fff; color:#5A5A5A; font-size:13px; text-decoration:none; padding:0 0 0 12px;}
#topPan ul li.about a:hover{background:url(Expert-Vision-images/arrow4.gif) 0 6px no-repeat #fff; color:#5A5A5A; text-decoration:none;}
#toprightPan{width:300px; height:151px; background:url(Expert-Vision-images/specialbg.jpg) 0 0 no-repeat #F3F3F3; color:#fff; position:absolute; top:114px; right:0px;}
#toprightPan p{padding:64px 76px 0 59px; font-size:12px; font-weight:bold; line-height:16px;}
#toprightPan p.more{padding:13px 0 0; font-size:13px; font-weight:bold;}
#toprightPan p.more a{width:130px; height:23px; display:block; background:url(Expert-Vision-images/viewmore.gif) 0 0 no-repeat #EFBA00; color:#A98401; line-height:21px; text-decoration:none; margin:0 0 0 56px; padding:0 0 0 35px;}
#toprightPan p.more a:hover{display:block; background:url(Expert-Vision-images/viewmore-hover.gif) 0 0 no-repeat #EFBA00; color:#A98401; text-decoration:none;}
/*----/TOP PANEL----*/
/*----BODY PANEL----*/
#bodyTopPan{width:778px; height:234px; position:relative; margin:0 auto;}
#bodyTopPan p{padding:23px 53px 0;}
#bodyTopPan p span{font-weight:bold;}
#bodyTopPan p.more{width:73px; height:26px; background:url(Expert-Vision-images/morebg.gif) 0 0 no-repeat; position:absolute; bottom:0px; right:0px; padding:0px;}
#bodyTopPan p.more a{display:block; width:48px; height:20px; background: url(Expert-Vision-images/arrow1.gif) 100% 50% no-repeat #fff; color:#A98401; font-size:13px; font-weight:bold; text-decoration:none; margin:3px 0 0 12px;}
#bodyTopPan p.more a:hover{background: url(Expert-Vision-images/arrow2.gif) 100% 50% no-repeat #fff; color:#A98401; text-decoration:none;}
/*----Body Left Panel---*/
#leftPan{width:538px; float:left; background:url(Expert-Vision-images/body-bottombg.gif) bottom left no-repeat #fff; color:#6D6D6D;}
#leftPan ul{width:538px; height:102px; background:url(Expert-Vision-images/togel.gif) 0 0 no-repeat; margin:0px; padding:0px;}
#leftPan ul li{width:110px; height:52px; float:left;}
#leftPan ul li a{width:110px; height:22px; display:block; background:#fff; color:#6D6D6D; text-decoration:none; font:20px/22px Georgia, "Times New Roman", Times, serif;}
#leftPan ul li a:hover{background:#fff; color:#B88F00; text-decoration:none;}
#leftPan ul li.positioncommunity{padding:20px 0 0 53px; background:#fff; color:#B88F00; font:20px/22px Georgia, "Times New Roman", Times, serif;}
#leftPan ul li.positionsolutions{padding:20px 0 0 100px;}
#leftPan ul li.positionmeetings{padding:20px 0 0 40px;}
#leftPan ul.next{background:none; height:164px;}
#leftPan ul.next li{height:24px; width:413px; padding:0 0 0 53px;}
#leftPan ul.next li a{height:24px; width:413px; background:url(Expert-Vision-images/buttet1.gif) 0 11px no-repeat #fff; color:#6D6D6D; font-size:14px; font-weight:normal; line-height:24px; text-decoration:none; padding:0 0 0 15px;}
#leftPan ul.next li a:hover{height:24px; background:url(Expert-Vision-images/buttet2.gif) 0 11px no-repeat #fff; color:#B88F00; line-height:24px; text-decoration:none;}
#leftPan h2{width:250px; height:41px; display:block; background:url(Expert-Vision-images/icon1.gif) 0 0 no-repeat #fff; color:#B88F00; font-size:12px; line-height:18px; font-weight:bold; margin:0 0 0 53px; padding:0 0 0 52px; text-transform:uppercase;}
#leftPan h2 span{font-size:12px; line-height:18px; font-weight:bold; background:#fff; color:#0554AD;}
#leftPan h3{width:250px; height:41px; display:block; background:url(Expert-Vision-images/icon4.gif) 0 0 no-repeat #fff; color:#3D3D3D; font:18px/22px "Trebuchet MS",Arial, Helvetica, sans-serif; margin:0 0 0 53px; padding:0 0 0 30px;}
#leftPan h4{width:250px; height:41px; display:block; background:url(Expert-Vision-images/icon1.gif) 0 0 no-repeat #fff; color:#B88F00; font-size:12px; line-height:18px; font-weight:bold; margin:0 0 0 53px; padding:0 0 0 52px; text-transform:uppercase;}
#leftPan h4 span{font-size:12px; line-height:18px; font-weight:bold; background:#fff; color:#0554AD;}
#leftPan p{padding:20px 53px 0;}
#leftPan p span{font-weight:bold;}
#leftPan p.bottompadding{padding:40px 53px;}
#bodyleftlinkboxonePan{width:428px; height:50px; display:block; margin:25px 0 0 53px; padding:0px;}
#bodyleftlinkboxonePan ul{width:428px; height:28px; background:none; font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;}
#bodyleftlinkboxonePan ul li{display:block; width:148px; height:34px; float:left;}
#bodyleftlinkboxonePan ul li.comments{width:110px; height:28px; display:block; background:url(Expert-Vision-images/icon2.gif) 0 0 no-repeat #fff; color:#1A5BB2; font-size:14px; font-weight:normal; padding:0 0 0 35px;}
#bodyleftlinkboxonePan ul li.comments span.boldtext{font-weight:bold;}
#bodyleftlinkboxonePan ul li.continue{float:left; width:150px; height:34px; background:url(Expert-Vision-images/icon3.gif) 0 0 no-repeat; padding:2px 0 0 35px; }
#bodyleftlinkboxonePan ul li.continue a{display:block; width:150px; height:18px; background:#fff; color:#1A5BB2; font-size:14px; line-height:18px; font-weight:normal; text-decoration:none; }
#bodyleftlinkboxonePan ul li.continue a:hover{display:block; height:18px; background:#F4F4F4; color:#B88F00; text-decoration:none;}
#bodyleftlinkboxtwoPan{width:428px; height:50px; display:block; margin:25px 0 0 53px; padding:0px;}
#bodyleftlinkboxtwoPan ul{width:428px; height:28px; background:none; font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;}
#bodyleftlinkboxtwoPan ul li{display:block; width:148px; height:34px; float:left;}
#bodyleftlinkboxtwoPan ul li.comments{width:110px; height:28px; display:block; background:url(Expert-Vision-images/icon2.gif) 0 0 no-repeat #fff; color:#1A5BB2; font-size:14px; font-weight:normal; padding:0 0 0 35px;}
#bodyleftlinkboxtwoPan ul li.comments span.boldtext{font-weight:bold;}
#bodyleftlinkboxtwoPan ul li.continue{float:left; width:150px; height:34px; background:url(Expert-Vision-images/icon3.gif) 0 0 no-repeat; padding:2px 0 0 35px; }
#bodyleftlinkboxtwoPan ul li.continue a{display:block; width:150px; height:18px; background:#fff; color:#1A5BB2; font-size:14px; line-height:18px; font-weight:normal; text-decoration:none; }
#bodyleftlinkboxtwoPan ul li.continue a:hover{display:block; height:18px; background:#F4F4F4; color:#B88F00; text-decoration:none;}
/*----/Body Left Panel---*/
/*----Body Right Panel---*/
#bodyrightPan{width:240px; float:left;}
#bodyrightPan h2{height:55px; font:22px/55px Georgia, "Times New Roman", Times, serif; background:#F3F3F3; color:#B88F00; font-weight:normal; margin:0 0 0 44px;}
#bodyrightPan p{padding:11px 75px 0 44px;}
#bodyrightPan p.toppadding-rightpantext{padding:33px 67px 0 44px;}
#bodyrightPan p span{padding:11px 0 25px 0; font-size:12px; font-weight:bold;}
/*----/Body Right Panel---*/
/*----FOOTER PANEL---*/
#footermainPan{height:195px; background:url(Expert-Vision-images/footerbg.gif) 0 0 repeat-x; clear:both;}
#footerPan{width:778px; height:90px; display:block; position:relative; margin:0 auto; color:#fff; background:url(Expert-Vision-images/footerbg.gif) 0 0 repeat-x #979797; font-family:Tahoma,Arial, Helvetica, sans-serif;}
#footerPan p{padding:51px 0 0;}
#footerPan p span{background:#1C1B19; color:#AC2626; font-size:10px;}
#footerPan p.copyright{ background:#979797; display:block; position:absolute; top:130px; left:192px; color:#fff; font:11px/15px Tahoma,Arial, Helvetica, sans-serif; padding:0;}
#footerPan ul{width:424px; display:block; position:absolute; left:120px; top:41px; padding:0; }
#footerPan li{float:left; font:13px/18px Arial, Helvetica, sans-serif; font-weight:normal;}
#footerPan ul li a{padding:0 0 0 12px; color:#fff; background:#979797; text-decoration:none;}
#footerPan ul li a:hover{text-decoration:underline;}
#footerPan ul.info{width:424px; height:45px; display:block; position:absolute; left:120px; top:70px; padding:0;}
#footerPan ul.info li{display:block; width:109px;}
#footerPan ul.info li.address{width:97px; background:url(Expert-Vision-images/vertical-dot.gif) 100% 0 repeat-y #979797; color:#353535; font-size:10px; font-family:Tahoma,Arial, Helvetica, sans-serif; font-weight:bold; padding:0 0 0 12px;}
#footerPan ul.info li.phone{width:94px; background:url(Expert-Vision-images/vertical-dot.gif) 100% 0 repeat-y #979797; color:#353535; font-family:Tahoma,Arial, Helvetica, sans-serif; font-size:10px; padding:0 0 0 15px; font-weight:bold;}
#footerPan ul.info li.fax{width:94px; background:#979797; color:#353535; font-size:10px; padding:0 0 0 15px; font-family:Tahoma,Arial, Helvetica, sans-serif; font-weight:bold;}
#footerPan ul li span{background:#979797; color:#FFDB5D; font-size:10px; font-weight:bold; line-height:18px;}
#footerPan ul.templateworld{width:250px; background:#979797; color:#fff; display:block; position:absolute; top:147px; left:192px;}
#footerPan ul.templateworld li{widows:150; font-size:11px;}
#footerPan ul.templateworld li a{background:#979797; display:block; color:#fff; text-decoration:none;}
#footerPan ul.templateworld li a:hover{text-decoration:underline;}
</style>
</head>
<body>
<div id="mainPan">
<div id="topPan">
<a href="index.html"><img src="images/logo.gif" alt="Expart Vision" width="230" height="44" border="0" class="logo" /></a>
<h1>Lorem ipsum dolor sit amet, consectetuer adipiscingelit. Ut pretium dignissim </h1>
<h2>about expert vision</h2>
<ul>
<li><a href="#">Home</a></li>
<li class="about"><a href="#">About Us</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>
</div>
<div id="toprightPan">
<p>Lorem ipsum dolor sit amet,consectetuer</p>
<p class="more"><a href="#">view more</a></p>
</div>
<div id="bodyTopPan">
<p>Expert Vision is a free, tableless, W3C-compliant web design layout by <span>Template World</span>. 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>We only ask you to not remove <span>"Design by Template World"</span> and the link http://www.templateworld.com from the footer of the template.</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="#">more</a></p>
</div>
<div id="leftPan">
<ul>
<li class="positioncommunity">community</li>
<li class="positionsolutions"><a href="#">solutions</a></li>
<li class="positionmeetings"><a href="#">meetings</a></li>
</ul>
<h2>on 1st, england<br />
<span>M piterson</span></h2>
<p><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec Class aptent taciti lectarcu egestas luctus.</span></p>
<p>d nulla quis tellus ornare aliquam. Curabitur eu lectus eu massa orni mperdiet. Proin nec neque vitae lacus sollicitudin malesuada. Curab vitae magna. metus non blandit aliquet,dalacut molestie arcu ante at felis.</p>
<div id="bodyleftlinkboxonePan">
<ul>
<li class="comments">Comments: <span class="boldtext">23</span></li>
<li class="continue"><a href="#">Continue reading....</a></li>
</ul>
</div>
<h3>Special tips:</h3>
<ul class="next">
<li><a href="#">id nulla quis tellus ornare aliquam. Curabitur eu lectus eu</a></li>
<li><a href="#">massa orni</a></li>
<li><a href="#">mperdiet. Proin nec neque vitae lacus sollicitudin male</a></li>
<li><a href="#">suada. Curab</a></li>
<li><a href="#">vitae magna. metus non blandit aliquet,dalacut molestie</a></li>
</ul>
<h4>on 22nd, england<br />
<span>D johnson</span></h4>
<p><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec Class aptent taciti lectarcu egestas luctus.</span></p>
<p>d nulla quis tellus ornare aliquam. Curabitur eu lectus eu massa orni mperdiet. Proin nec neque vitae lacus sollicitudin malesuada. Curab vitae magna. metus non blandit aliquet,dalacut molestie arcu ante at felis.</p>
<div id="bodyleftlinkboxtwoPan">
<ul>
<li class="comments">Comments: <span class="boldtext">23</span></li>
<li class="continue"><a href="#">Continue reading....</a></li>
</ul>
</div>
<p class="bottompadding"> </p>
</div>
<div id="bodyrightPan">
<h2>publications</h2>
<p>metus non blandit aliquet, massa dui sodales lacus, ut molestie arcu</p>
<p><span>24th may 2006</span></p>
<p class="toppadding-rightpantext">ante at felis.Duis vestibulum, ipsum id cursus pellent esq ue, eros leo viverra est,vel posuere felis mauris </p>
<p><span>26th may 2006</span></p>
<p>sit amet libero. Ut ipsum libero,sceler isque sed, elemen tum nec,bibend um et,orci. Quisque </p>
<p><span>14th june 2006</span></p>
<p>nec libero. Donec dui felis, laoreet pretium,congue et, ullamcorper vitae, nibh. Donec augue tortor, convallis id, aliquam eu, blandit nec,</p>
<p><span>20th june 2006</span></p>
</div>
</div>
<div id="footermainPan">
<div id="footerPan">
<ul>
<li><a href="#">Home </a>| </li>
<li><a href="#">About Us</a> | </li>
<li><a href="#">Support </a>| </li>
<li><a href="#">Clients</a> | </li>
<li><a href="#">Contact </a> </li>
</ul>
<ul class="info">
<li class="address">23-Ambush road 0128thonhill <br />CANADA</li>
<li class="phone"><span>PH: </span><br />
012-2568-6897 <br />
012-2568-6898</li>
<li class="fax"><span>FAX:</span> <br />
012-2568-6897 <br />
012-2568-6898</li>
</ul>
<p class="copyright">>>expartvision. All right reserved.</p>
<ul class="templateworld">
<li>Design By:</li>
<li><a href="http://www.templateworld.com" target="_blank">Template World</a></li>
<li><a href="http://www.ehostinfo.com/">Web Hosting</a></li>
</ul>
</div>
</div>
</body>
</html>
Related examples in the same category