Link bar with dotted line
<!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>Consultant</title>
<style type='text/css'>
/* CSS Document */
body{margin:0px; padding:0px; background:url(109x-images/mainbg.gif) 0 0 repeat-x #F6F4E4; color:#6B6854; font:14px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;}
div, p, ul, h1, h2, h4, img, form, label{padding:0px; margin:0px;}
ul{list-style-type:none;}
/*----MAIN PANEL----*/
#mainPan{width:691px; position:relative; margin:0 auto; padding:0px;}
/*----Left Panel----*/
#leftPan{width:240px; float:left;}
#leftTopPan{width:240px; height:125px; position:relative; margin:0 auto; padding:0; background:url(109x-images/left-top.jpg) 0 0 no-repeat;}
#leftTopPan img{width:160px; height:39px; margin:30px 0 0 37px;}
#leftPan ul{width:240px; height:231px; display:block; background:url(109x-images/menu-bg.jpg) 0 0 no-repeat; padding:28px 0 0;}
#leftPan ul li{width:118px; height:27px; position:relative; margin:0 auto; background:url(109x-images/dot.gif) 0 100% repeat-x;}
#leftPan ul li a{width:96px; height:26px; display:block; background:url(109x-images/arrow-normal.gif) 0 50% no-repeat #F6F4E4; color:#8F8C73; font:13px/26px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; padding:0 0 0 22px; text-decoration:none;}
#leftPan ul li a:hover{background:url(109x-images/arrow-normal.gif) 0 50% no-repeat #F6F4E4; color:#7F0A5F; text-decoration:none;}
#leftPan ul li.home{width:96px; height:27px; display:block; background: url(109x-images/homebg.gif) 0 0 no-repeat #F6F4E4; color:#7F0A5F; font:13px/26px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; text-decoration:none; padding:0 0 0 22px;}
#leftPan ul li.contact{background:none;}
#leftPan ul.linkone{width:240px; height:259px; padding:0; background:none;}
#leftPan ul.linkone li{width:118px; height:26px; position:relative; margin:0 auto; background:none; padding:0px;}
#leftPan ul.linkone li a{width:96px; height:26px; display:block; background:url(109x-images/arrow-normal.gif) 0 50% no-repeat #F6F4E4; color:#8F8C73; font:13px/26px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:normal; padding:0 0 0 22px; text-decoration:underline;}
#leftPan ul.linkone li a:hover{background:url(109x-images/arrow-normal.gif) 0 50% no-repeat #F6F4E4; color:#25241E; text-decoration:underline;}
#leftPan h2{width:90px; height:63px; background:#F6F4E4; color:#8F146E; font-size:24px; line-height:63px; padding:0 0 0 63px; font-weight:normal;}
#leftPan form{width:222px; height:173px; position:relative; margin:0 auto; background:url(109x-images/formbg.gif) 0 0 no-repeat #ABA894; color:#fff;}
#leftPan form input{width:143px; height:17px; margin:3px 0 2px 35px; }
#leftPan form label{width:143px; height:18px; margin:2px 0 0 35px; font:12px/15px Arial, Helvetica, sans-serif; font-weight:bold;}
#leftPan form input.button{width:51px; height:17px; float:left; background:url(109x-images/button.gif) 0 0 no-repeat #FEFEFE; color:#fff; font-size:12px; font-weight:bold; line-height:18px; border:none; padding:0 10px 0 0; margin:3px 10px 2px 28px; }
#leftPan form h2{width:150px; height:47px; display:block; background:url(109x-images/memberbg.gif) 0 0 no-repeat #D5D2BC; color:#fff; font-size:18px; line-height:47px; padding:0 0 0 65px;}
#leftPan form #register{width:100px; height:24px; float:left; margin:3px 0 0; }
#leftPan form #register a{display:block; background: url(109x-images/arrow4.gif) 100% 50% no-repeat #ABA894; color:#fff; font-size:14px; padding:0 5px 0 0; text-decoration:none;}
#leftPan form #register a:hover{text-decoration:underline;}
/*----/Left Panel----*/
/*----Right Panel----*/
#rightPan{width:451px; float:left;}
#rightPan h1{width:438px; height:124px; background:url(109x-images/header.jpg) 0 0 no-repeat #D33F9F; color:#fff; font:20px/13px Georgia, "Times New Roman", Times, serif; padding:37px 0 0 13px;}
#rightPan h1 span{font:13px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;}
#rightPan h2{width:240px; height:36px; display:block; background:url(109x-images/icon1.jpg) 0 0 no-repeat #F6F4E4; color:#8F146E; font-size:24px; line-height:36px; padding:0 0 0 65px; margin:29px 0 0 9px;}
#rightPan h4{width:240px; height:50px; display:block; background:url(109x-images/icon2.jpg) 0 0 no-repeat #F6F4E4; color:#8F146E; font-size:24px; line-height:22px; padding:0 0 0 75px; margin:0 0 0 9px; clear:both;}
#rightPan h4 span{color:#9F9D81; background:#F6F4E4; font-size:16px; font-weight:bold; line-height:18px;}
#rightPan p{padding:20px 0 0 9px;}
#rightPan p.bottompadding{padding:22px 0 0 9px; margin:0 0 38px 0;}
#rightPan p span.boldtext{font-weight:bold;}
#rightPan p span.magedacolortext{background:#F6F4E4; color:#8F146E;}
#rightmorePan{width:420px; height:28px; display:block; background:url(109x-images/pattern.gif) 0 0 repeat; border:1px solid #fff; line-height:28px; padding:0 0 0 20px; margin:0 0 0 9px;}
#rightmorePan p.textposition{float:left; padding:0 0 0 18px; margin:0px;}
#rightmorePan a{float:left; width:36px; height:28px; display:block; background:url(109x-images/morebg.gif) 0 0 no-repeat #D5D2BC; color:#1F1E15; text-decoration:none; padding:0 15px 0 45px; margin:0 0 0 135px;}
#rightmorePan a:hover{text-decoration:underline;}
#rightmorenextPan{width:420px; height:28px; display:block; background:url(109x-images/pattern.gif) 0 0 repeat; border:1px solid #fff; line-height:28px; padding:0 0 0 20px; margin:0 0 0 9px;}
#rightmorenextPan p.textposition{float:left; padding:0 0 0 18px; margin:0px;}
#rightmorenextPan a{float:left; width:36px; height:28px; display:block; background:url(109x-images/morebg.gif) 0 0 no-repeat #D5D2BC; color:#1F1E15; text-decoration:none; padding:0 15px 0 45px; margin:0 0 0 135px;}
#rightmorenextPan a:hover{text-decoration:underline;}
#rightaddPan{width:442px; height:170px; position:relative; margin:0 auto; padding:50px 0 0 9px;}
#rightaddonePan{width:218px; height:110px; float:left; background:url(109x-images/image1.jpg) 100% 0 no-repeat #CBC8B2; color:#fff; }
#rightaddonePan p.whitetext{font-size:22px; padding:16px 0 0 16px;}
#rightaddonePan p.whitetextbig{font-size:28px; padding:10px 0 0 16px;}
#rightaddonePan a{width:97px; height:33px; display:block; background:url(109x-images/viewmore.jpg) 0 0 no-repeat #ABA894; color:#fff; font-size:16px; line-height:30px; text-decoration:none; margin:15px 0 0; padding:0 0 0 55px;}
#rightaddonePan a:hover{text-decoration:underline;}
#rightaddtwoPan{width:218px; height:110px; float:left; background:url(109x-images/image2.jpg) 100% 0 no-repeat #CBC8B2; color:#fff; margin:0 0 0 6px;}
#rightaddtwoPan p.whitetext{font-size:22px; padding:16px 0 0 16px;}
#rightaddtwoPan p.whitetextbig{font-size:28px; padding:10px 0 0 16px;}
#rightaddtwoPan a{width:82px; height:33px; display:block; background:url(109x-images/viewmore.jpg) 0 0 no-repeat #ABA894; color:#fff; font-size:16px; line-height:30px; text-decoration:none; margin:15px 0 0; padding:0 0 0 55px;}
#rightaddtwoPan a:hover{text-decoration:underline;}
/*----/Right Panel----*/
/*----Footer Panel----*/
#footermainPan{background:url(109x-images/footerbg.gif) 0 0 repeat-x #6B6854; color:#fff; position:relative; margin:0 auto; height:227px; clear:both;}
#footerPan{width:691px; position:relative; margin:0 auto; font:12px/15px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:normal;}
#footerPan ul{width:546px; position:absolute; top:85px; left:42px;}
#footerPan li{float:left; }
#footerPan ul li a{padding:0 10px 0; color:#fff; background:#6B6854; text-decoration:none;}
#footerPan ul li a:hover{text-decoration:underline;}
#footerPan ul.templateworld{width:190px; background:#6B6854; color:#fff; display:block; position:absolute; top:160px; left:240px; }
#footerPan ul.templateworld li{height:20px;}
#footerPan ul.templateworld li a{background:#6B6854; display:block; color:#fff; text-decoration:none; padding:0px;}
#footerPan ul.templateworld li a:hover{text-decoration:underline;}
#footerPan p.copyright{width:204px; background:#6B6854; color:#F3F1DF; position:absolute; top:105px; left:218px;}
#footerPanhtml{width:64px; height:19px; display:block; position:absolute; top:132px; left:240px;}
#footerPanhtml a{width:59px; height:18px; background:url(109x-images/arrow2.gif) no-repeat 45px 0px #D0CEB8; display:block; position:absolute; top:0px; left:0px; line-height:19px; padding:1px 0 0 5px; border:1px solid #FFFFFA; color:#353427; text-transform:uppercase; text-decoration:none;}
#footerPanhtml a:hover{background:url(109x-images/arrow3.gif) no-repeat 45px 0px #B0AD93; color:#353427; text-decoration:none;}
#footerPancss{width:64px; height:19px; display:block; position:absolute; top:132px; left:320px;}
#footerPancss a{width:49px; height:18px; background:url(109x-images/arrow3.gif) no-repeat 45px 0px #D0CEB8; display:block; position:absolute; top:0px; left:0px;line-height:19px; padding:1px 0 0 15px; border:1px solid #FFFFFA; color:#353427; text-transform:uppercase; text-decoration:none;}
#footerPancss a:hover{background:url(109x-images/arrow2.gif) no-repeat 45px 0px #B0AD93; color:#353427; text-decoration:none;}
</style>
</head>
<body>
<div id="mainPan">
<div id="leftPan">
<div id="leftTopPan">
<a href="index.html"><img src="109x-images/logo.gif" title="Consultant" alt="Consultant" width="160" height="39" border="0" /></a> </div>
<ul>
<li class="home">Home</li>
<li><a href="#">About us</a></li>
<li><a href="#">Network</a></li>
<li><a href="#">Submission</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Finance</a></li>
<li class="contact"><a href="#">Contact</a></li>
</ul>
<form action="" method="post">
<h2>members login</h2>
<label>Log In:</label>
<input name="Your name" type="text" id="Yourname" />
<label>Password:</label>
<input name="password" type="password" id="password" />
<input name="" type="submit" class="button" value="Login" />
<div id="register"><a href="#">register now</a></div>
</form>
<h2>services</h2>
<ul class="linkone">
<li><a href="#">pit tellus, at</a></li>
<li><a href="#">iaculis ante</a></li>
<li><a href="#">ante eget</a></li>
<li><a href="#">massa. Vestibu</a></li>
<li><a href="#">lum facilisis.</a></li>
<li><a href="#">Quisque vel est.</a></li>
<li><a href="#">Donec ante</a></li>
<li><a href="#">velit, eleifend</a></li>
<li><a href="#">ucont cont,</a></li>
<li><a href="#">ucont cont,</a></li>
<li><a href="#">rhoncus</a></li>
</ul>
</div>
<div id="rightPan">
<h1>A new begining<br /><span>senectus et netus et<br />
malesuada</span> </h1>
<h2>About G-Consultant</h2>
<p><span class="boldtext">G-Consultant is a free, tableless, W3C-compliant web design layout by 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 class="magedacolortext">"Design by Template World"</span> and the link http://www.templateworld.com from the footer of the template.</p>
<p class="bottompadding">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>
<div id="rightmorePan">
<p class="textposition">culis ante faucibus enim.</p>
<a href="#">more</a></div>
<div id="rightaddPan">
<div id="rightaddonePan">
<p class="whitetext">g-consultant</p>
<p class="whitetextbig">new launch</p>
<a href="#">view </a></div>
<div id="rightaddtwoPan">
<p class="whitetext">g-consultant</p>
<p class="whitetextbig">solutions</p>
<a href="#">view </a></div>
</div>
<h4>g-consultant updates<br /><span>24rth august 2006</span></h4>
<p><span class="boldtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. DonecSed fringilla ligula dolor, eleifend cursus,</span> tincidunt id, tempus id, elitau auguearcu. Nulla pede sapien, varius vitae, </p>
<p class="bottompadding">Praesent quis ipsum. Ut dui tellus, dapibus vitae,vehicula vitae,aculis ante congue vel, risus. <span class="magedacolortext">Aenean a pede.</span> Sed fringilla, quam ut facilisis consequat, elit augue suscipit tellus, at iaculis ante ante eget massa. Vestibulum facilisis. Quisque vel est. Donec ante velit,eleifend ucont cont, euismod et, rhoncus eget,sapien. Integer condimentum nunca culis ante faucibus enim. Pellentesque habitant </p>
<div id="rightmorenextPan">
<p class="textposition">culis ante faucibus enim.</p>
<a href="#">more</a></div>
</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="#">Network</a>| </li>
<li><a href="#">Submission</a> | </li>
<li><a href="#">Archives</a> |</li>
<li><a href="#">Finance</a> |</li>
<li><a href="#">Contact</a></li>
</ul>
<p class="copyright">>>gconsultant all right reaserved</p>
<div id="footerPanhtml"><a href="http://validator.w3.org/check?uri=referer" target="_blank">html</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>
</ul>
</div>
</div>
</body>
</html>
Related examples in the same category