Binder like banner
<!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>Business Events</title>
<style type='text/css'>
/* CSS Document */
body {
margin: 0px;
padding: 0px;
background: url(Business-Events-images/main-bg.gif) 0 0 repeat-x #F2F0DC;
color: #5D5B46;
font: 14px/18px Georgia, "Times New Roman", Times, serif;
}
div,p,ul,h2,img {
margin: 0px;
padding: 0px;
}
ul {
list-style-type: none;
}
/*----TOP PANEL----*/
#topPan {
width: 778px;
height: 141px;
position: relative;
margin: 0 auto;
font: 14px/18px Arial, Helvetica, sans-serif;
}
#topPan ul {
width: 125px;
height: 22px;
position: absolute;
top: 0px;
right: 130px;
}
#topPan ul li {
float: left;
width: 45px;
height: 22px;
}
#topPan ul li a {
width: 45px;
height: 16px;
display: block;
background: url(Business-Events-images/arrow1.gif) 40px 6px no-repeat
#CC0000;
color: #fff;
font: 13px/16px Arial, Helvetica, sans-serif;
text-decoration: none;
}
#topPan ul li a:hover {
background: url(Business-Events-images/arrow1-hover.gif) 40px 6px
no-repeat #CC0000;
color: #FEF0B7;
text-decoration: none;
}
#topPan ul li.register {
float: left;
width: 65px;
height: 22px;
}
#topPan ul li.register a {
width: 65px;
height: 16px;
display: block;
background: url(Business-Events-images/arrow1.gif) 65px 6px no-repeat
#CC0000;
color: #fff;
font: 13px/16px Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 0 0 0 10px;
}
#topPan ul li.register a:hover {
background: url(Business-Events-images/arrow1-hover.gif) 65px 6px
no-repeat #CC0000;
color: #FEF0B7;
text-decoration: none;
}
#topPan img.logo {
width: 281px;
height: 56px;
position: absolute;
top: 53px;
left: 29px;
}
#topPan p.callus {
width: 119px;
height: 25px;
background: url(Business-Events-images/callus-bg.gif) 0 0 no-repeat
#212121;
color: #fff;
position: absolute;
top: 53px;
right: 115px;
line-height: 24px;
text-align: center;
}
#topPan p.phone {
width: 130px;
height: 25px;
background: #212121;
color: #EAE8CD;
position: absolute;
top: 83px;
right: 109px;
font-size: 20px;
line-height: 25px;
text-align: center;
}
/*----/TOP PANEL----*/
/*----HEADER- PANEL----*/
#headerPan {
width: 778px;
height: 228px;
position: relative;
margin: 0 auto;
}
#headerleftPan {
width: 46px;
height: 228px;
float: left;
background: url(Business-Events-images/leftfolder.gif) 0 0 no-repeat;
}
/*----Header Middle Panel----*/
#headermiddlePan {
width: 686px;
height: 228px;
float: left;
}
/*----Menu Panel----*/
#menuPan {
width: 686px;
height: 33px;
background: url(Business-Events-images/menu-bg.gif) 0 0 repeat-x;
position: relative;
margin: 0 auto;
}
#menuPan ul {
width: 660px;
height: 28px;
position: absolute;
top: 2px;
left: 14px;
}
#menuPan ul li {
width: 110px;
height: 28px;
float: left;
}
#menuPan ul li a {
width: 109px;
height: 28px;
display: block;
background: #fff;
color: #2F2A28;
border-right: 1px dashed #969260;
font: 13px/28px Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
text-decoration: none;
}
#menuPan ul li a:hover {
width: 110px;
height: 28px;
background: #2F2A28;
color: #fff;
border: none;
text-decoration: none;
}
#menuPan ul li.home {
width: 110px;
height: 28px;
background: #2F2A28;
color: #fff;
font: 13px/28px Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
border: none;
text-decoration: none;
}
#menuPan ul li.contact a {
width: 110px;
height: 28px;
display: block;
background: #fff;
color: #2F2A28;
border: none;
font: 13px/28px Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
text-decoration: none;
}
#menuPan ul li.contact a:hover {
width: 110px;
height: 28px;
background: #2F2A28;
color: #fff;
border: none;
text-decoration: none;
}
/*----/Menu Panel----*/
#headerbodyPan {
width: 686px;
height: 184px;
position: absolute;
top: 42px;
left: 46px;
background: #FEFDF1;
color: #fff;
border-bottom: 1px solid #CDCAA3;
border-top: 1px solid #CDCAA3;
}
/*---- Header Red Panel----*/
#headerleftredPan {
width: 478px;
height: 123px;
background: url(Business-Events-images/redpan-bg.jpg) 0 0 repeat-x
#FEFDF1;
color: #fff;
position: absolute;
top: 32px;
left: 0px;
}
#headerleftredPan h2 {
width: 160px;
height: 69px;
font: 24px/24px "Trebuchet MS", Arial, Helvetica, sans-serif;
position: absolute;
top: 29px;
left: 36px;
text-transform: uppercase;
}
#headerleftredPan h2 span {
font-size: 39px;
line-height: 30px;
}
#headerleftredPan p {
width: 262px;
height: 74px;
display: block;
position: absolute;
top: 24px;
left: 190px;
font-size: 14px;
line-height: 17px;
}
#headerleftredPan p span.largetext {
font-size: 18px;
line-height: 20px;
}
#headermiddleredPan {
width: 161px;
height: 142px;
background: url(Business-Events-images/red-image.jpg) 0 0 no-repeat;
position: absolute;
top: 13px;
left: 478px;
}
/*----Header MORE Panel----*/
#headermorePan {
width: 47px;
height: 123px;
position: absolute;
top: 32px;
right: 0px;
font: 13px/14px "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
}
#headermorePan a {
width: 39px;
height: 38px;
display: block;
background: url(Business-Events-images/headermore-normal.gif) 0 0
no-repeat #FEFDF1;
color: #FDFCEC;
text-decoration: none;
padding: 85px 0 0 8px;
}
#headermorePan a:hover {
background: url(Business-Events-images/headermore-hover.gif) 0 0
no-repeat;
text-decoration: none;
}
/*----/Header MORE Panel----*/
/*----Header Middle Panel----*/
#headerrightPan {
width: 46px;
height: 228px;
float: left;
background: url(Business-Events-images/rightfolder.gif) 0 0 no-repeat;
}
/*----HEADER- PANEL----*/
/*----BODY PANEL----*/
#bodyPan {
width: 686px;
position: relative;
margin: 0 auto;
}
#bodyPan h2 {
width: 300px;
height: 54px;
background: #F2F0DC;
color: #D80000;
font: 26px/54px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#bodyPan p {
padding: 10px 0 0;
}
#bodyPan p span {
font-weight: bold;
}
#bodyPan p.date {
width: 174px;
height: 22px;
background: #FEFEF6;
color: #000;
font-size: 18px;
line-height: 22px;
padding: 0px;
}
#bodyPan p.more {
width: 102px;
height: 16px;
margin: 0 0 0 582px;
padding: 0 0 14px 0;
}
#bodyPan p.more a {
width: 102px;
height: 16px;
display: block;
background: #F2F0DC;
color: #D80000;
font: 13px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
}
#bodyPan p.more a:hover {
background: #F2F0DC;
color: #7E0202;
text-decoration: none;
}
#bodyPan p.border {
background: url(Business-Events-images/dot-line.gif) 0 0 repeat-x;
height: 1px;
padding: 0 0 14px 0;
}
/*----Body Bottom Panel----*/
#bodybottomPan {
width: 778px;
position: relative;
margin: 0 auto;
padding: 30px 0 0 8px;
}
/*----Bottom Left Panel----*/
#bottomleftPan {
width: 375px;
float: left;
background: url(Business-Events-images/bodybottombg.gif) 0 0 no-repeat
#FEFDF0;
color: #D80000;
border-bottom: 1px solid #CDCAA3;
border-left: 1px solid #CDCAA3;
border-right: 1px solid #CDCAA3;
margin: 0px;
}
#bottomleftPan h2 {
width: 250px;
height: 58px;
background: url(Business-Events-images/icon1.jpg) 0 0 no-repeat;
font: 26px/26px "Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 0 0 0 65px;
margin: 22px 0 0 41px;
}
#bottomleftPan h2 span {
font-size: 20px;
background: #FCFBED;
color: #5D5B46;
}
#bottomleftPan ul {
width: 290px;
margin: 15px 0 0 50px;
}
#bottomleftPan ul li {
width: 290px;
height: 30px;
background: url(Business-Events-images/bullet1.gif) 0 0 no-repeat;
}
#bottomleftPan ul li a {
width: 210px;
height: 30px;
display: block;
background: url(Business-Events-images/bullet1.gif) 0 10px no-repeat
#FEFDF1;
color: #2F2A28;
font-size: 14px;
line-height: 30px;
text-decoration: none;
padding: 0 0 0 80px;
}
#bottomleftPan ul li a:hover {
display: block;
background: url(Business-Events-images/bullet1.gif) 0 10px no-repeat
#FEFDF1;
color: #2F2A28;
line-height: 30px;
}
#bottomleftPan p.more {
width: 270px;
height: 21px;
padding: 0px;
margin: 10px 0 25px 50px;
}
#bottomleftPan p.more a {
width: 270px;
height: 21px;
display: block;
background: url(Business-Events-images/bottom-more-bg.gif) 0 0 no-repeat
#FEFDF1;
color: #fff;
font: 13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
text-decoration: none;
}
#bottomleftPan p.more a:hover {
background: url(Business-Events-images/bottom-more-bg.gif) 0 0 no-repeat
#FEFDF1;
color: #FDF6B6;
text-decoration: none;
}
/*----/Bottom Left Panel----*/
/*----Bottom Right Panel----*/
#bottomrightPan {
width: 375px;
float: left;
background: url(Business-Events-images/bodybottombg.gif) 0 0 no-repeat
#FEFDF0;
color: #D80000;
border-bottom: 1px solid #CDCAA3;
border-left: 1px solid #CDCAA3;
border-right: 1px solid #CDCAA3;
margin: 0 0 0 8px;
}
#bottomrightPan h2 {
width: 250px;
height: 58px;
background: url(Business-Events-images/icon2.jpg) 0 0 no-repeat;
font: 26px/26px "Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 0 0 0 65px;
margin: 22px 0 0 41px;
}
#bottomrightPan h2 span {
font-size: 20px;
background: #FCFBED;
color: #5D5B46;
}
#bottomrightPan ul {
width: 290px;
margin: 15px 0 0 50px;
}
#bottomrightPan ul li {
width: 290px;
height: 30px;
background: url(Business-Events-images/bullet1.gif) 0 0 no-repeat;
}
#bottomrightPan ul li a {
width: 210px;
height: 30px;
display: block;
background: url(Business-Events-images/bullet1.gif) 0 10px no-repeat
#FEFDF1;
color: #2F2A28;
font-size: 14px;
line-height: 30px;
text-decoration: none;
padding: 0 0 0 80px;
}
#bottomrightPan ul li a:hover {
display: block;
background: url(Business-Events-images/bullet1.gif) 0 10px no-repeat
#FEFDF1;
color: #2F2A28;
line-height: 30px;
}
#bottomrightPan p.more {
width: 270px;
height: 21px;
padding: 0px;
margin: 10px 0 25px 50px;
}
#bottomrightPan p.more a {
width: 270px;
height: 21px;
display: block;
background: url(Business-Events-images/bottom-more-bg.gif) 0 0 no-repeat
#FEFDF1;
color: #fff;
font: 13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
text-decoration: none;
}
#bottomrightPan p.more a:hover {
background: url(Business-Events-images/bottom-more-bg.gif) 0 0 no-repeat
#FEFDF1;
color: #FDF6B6;
text-decoration: none;
}
/*----/Bottom Left Panel----*/
/*----FOOTER PANEL----*/
#footermainPan {
height: 135px;
background: url(Business-Events-images/footerbg.gif) 0 0 repeat-x
#3B3B3B;
color: #fff;
font: 13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
position: relative;
margin: 0 auto;
clear: both;
padding: 75px 0 0;
}
#footerPan {
width: 700px;
position: relative;
margin: 0 auto;
}
#footerPan ul {
width: 480px;
height: 20px;
position: relative;
margin: 0 auto;
}
#footerPan li {
float: left;
}
#footerPan ul li a {
padding: 0 10px 0;
color: #fff;
background: #3B3B3B;
text-decoration: none;
font-size: 12px;
}
#footerPan ul li a:hover {
text-decoration: underline;
}
#footerPan p.copyright {
width: 220px;
position: relative;
margin: 0 auto;
background: #3B3B3B;
color: #fff;
font-size: 11px;
}
#footerPan ul.templateworld {
width: 250px;
background: #3B3B3B;
color: #fff;
display: block;
position: absolute;
top: 70px;
left: 260px;
font-size: 10px;
}
#footerPan ul.templateworld li {
height: 20px;
}
#footerPan ul.templateworld li a {
background: #3B3B3B;
display: block;
color: #fff;
text-decoration: none;
padding: 0px;
}
#footerPan ul.templateworld li a:hover {
text-decoration: underline;
}
#footerPanhtml {
width: 70px;
height: 24px;
display: block;
position: absolute;
top: 45px;
left: 265px;
}
#footerPanhtml a {
width: 66px;
height: 24px;
display: block;
background: url(Business-Events-images/html-bg-normal.gif) 0 0 no-repeat
#3B3B3B;
color: #fff;
font-size: 14px;
line-height: 24px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
padding: 0 0 0 4px;
}
#footerPanhtml a:hover {
background: url(Business-Events-images/html-bg-hover.gif) 0 0 no-repeat
#3B3B3B;
color: #fff;
}
#footerPancss {
width: 58px;
height: 24px;
display: block;
position: absolute;
top: 45px;
left: 340px;
}
#footerPancss a {
width: 58px;
height: 24px;
display: block;
background: url(Business-Events-images/css-bg-normal.gif) 0 0 no-repeat
#3B3B3B;
color: #fff;
font-size: 14px;
line-height: 24px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
padding: 0 0 0 8px;
}
#footerPancss a:hover {
background: url(Business-Events-images/css-bg-hover.gif) 0 0 no-repeat
#3B3B3B;
color: #fff;
text-decoration: none;
}
/*----/FOOTER PANEL----*/
</style>
</head>
<body>
<div id="topPan">
<ul>
<li><a href="#">login</a></li>
<li class="register"><a href="#" class="register">resister</a></li>
</ul>
<a href="index.html"><img src="images/logo.gif" alt="Business Events" width="281" height="56" border="0" class="logo" title="Business Events" /></a>
</div>
<div id="headerPan">
<div id="headerleftPan"><img src="images/blank.gif" alt="" width="1" height="1" /></div>
<div id="headermiddlePan">
<div id="menuPan">
<ul>
<li class="home">Home</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Testimonials</a></li>
<li class="contact"><a href="#" class="contact">Contact</a></li>
</ul>
</div>
<div id="headerbodyPan">
<div id="headerleftredPan">
<h2>whatsnew <br />
<span>in 2006</span></h2>
<p><span class="largetext">Praesent quis ipsum. ut dui tell</span> dapibus vitae,vehicula vitaeaculis anteftr congue vel,risus.Aenean a pede.Sed..re fringilla,quam utfacilisis consequat dtrer.</p>
</div>
<div id="headermiddleredPan"><img src="images/blank.gif" alt="" /></div>
<div id="headermorePan"><a href="#">know more</a></div>
</div>
</div>
<div id="headerrightPan"><img src="images/blank.gif" alt="" width="1" height="1" /></div>
</div>
<div id="bodyPan">
<h2>latest updates</h2>
<p class="date">on 2nd october 2006</p>
<p>Business Events is a <span>free, tableless, W3C-compliant</span> 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>We only ask you to not remove "Design by Template World" and the link http://www.templateworld.com from the footer of the template.</p>
<p class="more"><a href="#">....know more</a></p>
<p class="border"><img src="images/blank.gif" alt="" width="1" height="1" /></p>
<p class="date">on 2nd october 2006</p>
<p>Business Events is a <span>free, tableless, W3C-compliant</span> 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>We only ask you to not remove "Design by Template World" and the link http://www.templateworld.com from the footer of the template.</p>
<p class="more"><a href="#">....know more</a></p>
</div>
<div id="bodybottomPan">
<div id="bottomleftPan">
<h2>about services <br />
<span>dapibus sit amet, aliquet</span></h2>
<ul>
<li><a href="#">Dapibus vitae,vehicula vitaea</a></li>
<li><a href="#">Anteftr congue vel,risus.</a></li>
<li><a href="#">Pede.fringilla,quam utfacilisis</a></li>
<li><a href="#">Consequat dtrer.</a></li>
</ul>
<p class="more"><a href="#">want to know more solutions</a></p>
</div>
<div id="bottomrightPan">
<h2>about services <br />
<span>dapibus sit amet, aliquet</span></h2>
<ul>
<li><a href="#">Dapibus vitae,vehicula vitaea</a></li>
<li><a href="#">Anteftr congue vel,risus.</a></li>
<li><a href="#">Pede.fringilla,quam utfacilisis</a></li>
<li><a href="#">Consequat dtrer.</a></li>
</ul>
<p class="more"><a href="#">want to know more solutions</a></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="#">Services</a>| </li>
<li><a href="#">Support</a>| </li>
<li><a href="#">Testimonials</a>| </li>
<li><a href="#">Contact</a></li>
</ul>
<p class="copyright">>>business events. 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><a href="http://www.cssportal.com" target="_blank">CSS Portal</a></li>
</ul>
</div>
</div>
</body>
</html>
Related examples in the same category