Hi and thanks for the reply. Here is the html code:
<!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" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--[if IE]><meta http-equiv="MSThemeCompatible" content="no"><![endif]-->
<title>Website 1</title>
<link type="image/x-icon" rel="shortcut icon" href="/favicon.ico" />
<script type="text/javascript" src="/cmp_jq.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#faq").easySlider({
controlsShow: false,
auto: true
});
$("#srv-btm").easySlider({
numeric: true,
continuous: false
});
});
</script>
<link rel="stylesheet" href="/cmp_reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/compressed_css.css" type="text/css" media="screen" />
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap"><!--Wrapper Start-->
<div id="main"><!--Main Start-->
<div id="header"><!--Header Start-->
<div id="logo"><!--Logo Start-->
<div id="logotxt"><!--LogoTXT Start-->
<a href="#"><img src="/images/logo6.png" alt="Logo" /></a>
</div><!--LogoTXT End-->
<div id="logoinfo"><!--LogoINFO Start-->
<a href="#"><img src="/images/email.png" alt="Email" /></a>
</div><!--LogoINFO End-->
</div><!--Logo End-->
<div id="nav"><!--Navigation Start-->
<div class="navwrap">
<ul>
<li><a id=home href="#" >home</a></li>
<li><a id=about href="#">about</a></li>
<li><a id=webdesign href="#">webdesign</a></li>
<li><a id=portofolio href="#">portofolio</a></li>
<li><a id=contact href="#">contact</a></li>
</ul>
</div>
</div> <!--Navigation End-->
</div><!--Header End-->
<div id="content"><!--Content Start-->
<div id="topbox"><!--Topbox Start-->
<p class="maina">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div><!--Topbox End-->
<div id="centerbox"><!--Centerbox Start-->
<p class="mains">Pellentesque fermentum placerat metus id luctus. Suspendisse tincidunt, tortor convallis elementum auctor, arcu nisl fermentum diam, vitae iaculis leo libero sit amet nulla. Morbi ac massa quam, id euismod arcu. </p>
</div><!--Centerbox End-->
<div id="centerbig"><!--centerbig Start-->
<h1>Lorem ipsum</h1>
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum placerat metus id luctus. Suspendisse tincidunt, tortor convallis elementum auctor, arcu nisl fermentum diam, vitae iaculis leo libero sit amet nulla. Morbi ac massa quam, id euismod arcu. Vivamus felis quam, pretium at consequat in, pretium sed nibh. Suspendisse potenti. Aenean et justo fermentum felis posuere accumsan. </p>
</div><!--centerbig End-->
</div><!--Content End-->
</div><!--Main End-->
</div><!--Wrapper End-->
<div id="footer"><!--Footer Start-->
<div class="footwrap"><!--FooterWrap Start-->
<div class="column"><!--Footloc Start-->
<h3>Find us on</h3>
<p class="twitter"><a href="#">Twitter </a></p>
<p class="facebook"><a href="#">Facebook </a></p>
<p class="linkedin"><a href="#">Linkedin </a></p>
</div><!--Footloc End-->
<div class="column"><!--Footblog Start-->
<h3 class="rss">Latest Blog Entries</h3>
<div id="blog">
<ul>
<li><a href="#" rel="bookmark" title="Blog 1">Blog 1</a></li>
<li><a href="#" rel="bookmark" title="Blog 2">Blog 2</a></li>
<li><a href="#" rel="bookmark" title="Blog 3">Blog 3</a></li>
</ul>
</div>
</div><!--Footblog End-->
<div class="column"><!--Footfaq Start-->
<h3>Frequently Asked Questions</h3>
<div id="faq">
<ul>
<li><p><a href="#">Question 1:Pellentesque habitant morbi tristique senectus et netus et malesuada</a></p></li>
<li><p><a href="#">Question 2:Pellentesque habitant morbi tristique senectus et netus et malesuada</a></p></li>
<li><p><a href="#">Question 3:Pellentesque habitant morbi tristique senectus et netus et malesuada</a></p></li>
<li><p><a href="#">Question 4:Pellentesque habitant morbi tristique senectus et netus et malesuada</a></p></li>
<li><p><a href="#">Question 5:Pellentesque habitant morbi tristique senectus et netus et malesuada</a></p></li>
</ul>
</div>
</div><!--Footfaq End-->
<div id="sitemap"><!--Sitemap Start-->
<img src="/images/footerline.png" width="1000px" alt="" />
<div class="footlogo"><!--Footlogo Start-->
<a href="#"><img src="/images/footlogo.png" alt="Logo" /></a>
</div><!--Footlogo End-->
<ul class="footnav">
<li class="page_item page-item-5"><a href="#" title="home">home</a></li>
<li class="page_item page-item-7"><a href="#" title="about">about</a></li>
<li class="page_item page-item-9"><a href="#" title="webdesign">webdesign</a></li>
<li class="page_item page-item-11"><a href="#" title="portofolio">portofolio</a></li>
<li class="page_item page-item-13"><a href="#" title="contact">contact</a></li>
</ul>
<div class="copyright"><!--Copyright Start-->
Copyright © 2010.All Rights Reserved.
</div><!--Copyright End-->
</div><!--Sitemap End-->
</div><!--FooterWrap End-->
</div><!--Footer End-->
</body>
</html>
Here is my styles css code:
* {
margin:0;
padding:0;
}
html, body {
height: 100%;
background:#ffffff url("../images/bodybg12.png") repeat-x;
}
h1,h2,h3,h5{
font: italic lighter 26px Helvetica, sans serif;
/*color: #0E7CA3;*/
color: #259ecd;
background:url(../images/headline.png) no-repeat left 50px;
z-index:0;
}
h1{
padding: 15px;
font-size: 28px;
}
h2{
padding: 15px 15px 10px 20px;
}
h5{
font-size: 14px;
padding-left: 20px;
}
p{
font: italic 12px Verdana, Geneva, sans-serif;
color: #333333;
}
img {
border-style: none;
}
a, a:visited {
text-decoration: none;
color: #00A5F8;
}
a:hover, a:active{
text-decoration: underline;
}
#wrap {
min-height: 100%;
width:1000px;
margin:0 auto;
}
/* HeadLogo */
#logotxt{
float: left;
padding-top: 17px;
}
#logoinfo{
float: right;
padding: 70px 40px 0 0;
}
/* HeadNav */
#nav{
height: 49px;
clear: both;
}
#nav .navwrap{
width: 800px;
margin: 0 auto;
}
#nav ul{
display: block;
list-style-type: none;
margin: 0;
padding: 0;
text-indent:-9999px;
}
#nav ul li{display:inline;}
#nav a{
background:url(../images/massivemenu9.png) no-repeat -177px 0px;
display:block;
float: left;
width: 130px;
height: 49px;
}
#nav a:hover, #nav a.active{background-position: -177px bottom;}
#nav a:active{background-position: -177px -49px;}
#nav a#about {background-position:-307px 0px;}
#nav a#about:hover, #nav a#about.active{background-position: -307px bottom;}
#nav a#about:active{background-position: -307px -49px;}
#nav a#webdesign {background-position:-437px 0px;}
#nav a#webdesign:hover, #nav a#webdesign.active {background-position: -437px bottom;}
#nav a#webdesign:active{background-position: -437px -49px;}
#nav a#portofolio {background-position:-567px 0px;}
#nav a#portofolio:hover, #nav a#portofolio.active {background-position: -567px bottom;}
#nav a#portofolio:active{background-position: -567px -49px;}
#nav a#contact {background-position:-697px 0px;}
#nav a#contact:hover, #nav a#contact.active {background-position: -697px bottom;}
#nav a#contact:active{background-position: -697px -49px;}
/* Content */
#content{
float:left;
padding: 10px 20px 0px 20px;
}
#topbox, centerbox, #centerbig, #bottombox{
padding: 5px 0;
}
/* Left */
#left{
float: left;
padding: 5px 0 10px 0;
width: 481px;
}
#left h3{padding-top: 15px;}
#left input, #left textarea {
padding: 5px;
width: 350px;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: 1px solid #c4c3c3;
}
#left .formstyle{background:url(../images/formtxtbg.png) no-repeat left bottom;}
#left textarea {
height: 90px;
background:url(../images/formtxtarea.png) no-repeat left bottom;
}
#left textarea:focus, #left input:focus {
border: 1px solid #00ccff;
}
#left input.submit-button {
float: right;
background:#ffffff url(../images/enquiry.png) no-repeat right;
border:none;
padding: 5px;
text-indent: -9999px;
margin-right: 30px;
}
#left label {
float: left;
text-align: right;
width: 70px;
font-size: 14px;
color: #646464;
}
/* Right */
#right{
float:right;
padding: 5px 0 10px 0;
width: 453px;
}
/* Centerbig */
#centerbig p{
padding: 10px 40px 10px 20px;
line-height: 20px;
}
#centerbig h2.qed {
padding: 0 0 0 16px;
margin: 0 0 5px 5px;
background: url(../images/faqstyle2.png) no-repeat left 0px;
height: 41px;
line-height: 40px;
width: 700px;
font-size: 1.1em;
font-weight: normal;
float: left;
}
#centerbig h2.qed a {
color: #666;
text-decoration: none;
display: block;
outline: none;
}
#centerbig h2.qed a:hover {
color: #258093;
}
#centerbig h2.active {
background-position: left -40px;
} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/
.toggle_container {
margin: 0 0;
padding: 0;
background: #FFF left top;
overflow: hidden;
font-size: 1.2em;
width: 700px;
clear: both;
float:left;
border:none;
}
.toggle_container .block {
padding: 5px 20px; /*--Padding of Container--*/
background: no-repeat left bottom #FFF; /*--Bottom rounded corners--*/
}
.toggle_container .block p {
}
.toggle_container .block span {
font-size:1em!important;
}
/* Bottombox left */
#bottomboxleft{
float: left;
padding: 5px 0 10px 0;
width: 631px;
}
#bottomboxleft p{
padding: 10px;
line-height: 25px;
}
/*Bottombox right */
#bottomboxright{
float:right;
padding:5px 0 10px 0;
width: 303px;
background:url(../images/quotebg4.png) no-repeat;
}
#bottomboxright p{
padding: 30px 10px 10px 40px;
}
#bottomboxright input, #bottomboxright textarea {
width: 225px;
font: 12px Helvetica, sans-serif;
margin: 0px 0px 10px 0px;
border: 1px solid #c4c3c3;
}
#bottomboxright textarea{height: 90px;}
#bottomboxright textarea:focus, #bottomboxright input:focus {border: 1px solid #00ccff;}
#bottomboxright input.submit-button {
width: 86px;
float: right;
margin-right: 25px;
background:url(../images/submitbtn.png) no-repeat;
color: #ffffff;
border:none;
padding: 2px 10px 10px 10px;
font-size: 14px;
font-style: italic;
}
label {
float: left;
text-align: right;
width: 50px;
font-size: 1.4em;
padding: 0 10px 0 5px;
}
/* Column */
#topcolumn{
width: 945px;
background:url(../images/headline.png) no-repeat left 50px;
margin-bottom: 10px;
}
#leftcolumn{
float: left;
width: 465px;
background:url(../images/headline.png) no-repeat left 60px;
margin-bottom: 10px;
}
#rightcolumn{
float: right;
width: 465px;
background:url(../images/headline.png) no-repeat left 60px;
margin: 0 15px 0 10px;
}
#bottomcolumn{
float:left;
width: 945px;
background:url(../images/headline.png) no-repeat left 60px;
margin-bottom: 10px;
}
/*#topcolumn h2{padding: 25px 15px 10px 20px;}*/
#leftcolumn h2{padding: 25px 15px 10px 20px;}
#rightcolumn h2{padding: 25px 15px 10px 20px;}
#bottomcolumn h2{padding: 25px 15px 10px 20px;}
/* Services */
#srv{
background:url(../images/layoutservicesspritev5.png) no-repeat -1px 0;
height: 280px;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 945px;
}
#srv-btm{
float: right;
height: 280px;
width: 738px;
}
#srv-btm ul{
list-style-type: none;
margin: 0;
padding: 0 0 0 20px;
}
#srv-btm ul li{
float: left;
height: 280px;
width: 738px;
}
#srv-btm .top{
background: url(../images/servicesweb.png) no-repeat right;
padding: 35px 0 0 5px;
width: 489px;
}
#srv-btm .top h3{
padding: 0;
font-size:1.1em;
font-style: normal;
}
#srv-btm .top span{
color: #6a6a6a;
display: block;
font-size: 1.4em;
padding-bottom: 14px;
}
#srv-btm .top.loptimize{background-image: url(../images/servicesoptimize2.png);}
#srv-btm .top.lecommerce{background-image: url(../images/servicesecommerce.png);}
#srv-btm .top.lcontact{background-image: url(../images/servicescontact.png);}
#srv-btm .btm{
background: url(../images/serviceswebicons2.png) no-repeat;
height: 180px;
padding: 0 0 0 5px;
width: 738px;
}
#srv-btm .btm ol{
list-style-type: none;
margin: 0;
padding: 6px 0 0;
}
#srv-btm .btm li{
font-size: 0.8em;
height: 32px;
margin: 0;
padding: 5px 0px 0 60px;
text-shadow: 1px 1px 1px #FFFFFF;
width:285px;
color: #646464;
}
#srv-btm .btm.optimize{background-image: url(../images/servicesoptimizeicons2.png);}
#srv-btm .btm.ecommerce{background-image: url(../images/servicesecommerceicons.png);}
#srv-btm .btm.contact{background-image: url(../images/servicescontactinfo3.png);}
#srv-btm #message{
display: block;
margin: 0 auto;
padding-top: 40px;
text-align: center;
width: 280px;
}
ol#control{
float: left;
height: 295px;
list-style-type: none;
margin: 0;
padding: 0;
width: 207px;
}
ol#control li a{
background-image: url(../images/servicesspritev2.png);
display: block;
text-decoration: none;
height: 70px;
width:207px;
}
ol#control li.current a, ol#control li.current a:hover{
background-position: -207px 0;
cursor: default;
}
ol#control li a:hover{background-position: -414px 0;}
ol#control li a:active{background-position: -621px 0;}
ol#control li#control2 a{
background-position: 0px -70px;
height: 70px;
}
ol#control li#control2.current a, ol#control li#control2.current a:hover{background-position: -207px -70px;}
ol#control li#control2 a:hover{background-position: -414px -70px;}
ol#control li#control2 a:active{background-position: -621px -70px;}
ol#control li#control3 a{
background-position: 0px -140px;
height: 70px;
}
ol#control li#control3.current a, ol#control li#control3.current a:hover{background-position: -207px -140px;}
ol#control li#control3 a:hover{background-position: -414px -140px;}
ol#control li#control3 a:active{background-position: -621px -140px;}
ol#control li#control4 a{
background-position: 0px -210px;
height: 70px;
}
ol#control li#control4.current a, ol#control li#control4.current a:hover{background-position: -207px -210px;}
ol#control li#control4 a:hover{background-position: -414px -210px;}
ol#control li#control4 a:active{background-position: -621px -210px;}
#srv input, #srv textarea {
width: 200px;
font: 0.8em Helvetica, sans-serif;
margin: 0px 0px 5px 0px;
border: 1px solid #c4c3c3;
}
#srv .formstyle{background:url(../images/formtxtbg.png) no-repeat left bottom;}
#srv textarea {
height: 90px;
background:url(../images/formtxtarea.png) no-repeat left bottom;
}
#srv textarea:focus, #srv input:focus {
border: 1px solid #00ccff;
}
#srv input.submit-button {
background:url(../images/enquirybtnsmall2.png) no-repeat;
width: 151px;
height: 69px;
border:none;
text-indent: -9999px;
}
#srv label {
float: left;
text-align: right;
width: 56px;
font-size: 12px;
color: #646464;
}
/* Blog */
.blogwrap{
width:950px;
overflow:hidden;
margin: 0 auto;
}
#postwrap{
float:left;
width: 750px;
}
#postwrap h3{
font-style: normal;
}
#sidebar{
float:right;
width: 150px;
border: 1px solid #B1DDFF;
background-color: #E2F2FF;
padding: 0 20px;
margin-top: 15px;
}
#sidebar h2{
font-style: normal;
padding: 0;
background-image: none;
border-bottom: 1px solid #B1DDFF;
}
.apost{
padding: 10px 0 0 15px;
}
.more-link{
padding-left: 20px;
}
.widget{
padding: 10px 0;
}
blockquote p{
margin-bottom: 0.5em;
}
#post p{
font-style: normal;
line-height: 1.4em;
}
.meta {
color: #999999;
display: block;
font-size: 0.9em;
margin-bottom: 10px;
padding: 5px 0 0 20px;
}
cite{
color: #999999;
}
small {
font-size: 0.8em;
line-height: 1.5em;
}
#commentbox{
background-color: #E2F2FF;
border: 1px solid #B1DDFF;
padding: 10px;
width: 550px;
margin-top: 5px;
}
#respond label{
float: left;
text-align: right;
width: 70px;
font-size: 1.1em;
color: #646464;
}
#respond input, #respond textarea {
padding: 5px;
width: 400px;
margin: 0px 0px 10px 0px;
border: 1px solid #B1DDFF;
}
#respond textarea {
height: 150px;
margin-left: 85px;
}
#respond textarea:focus, #respond input:focus {
border: 1px solid #00ccff;
}
#respond input#submit {
float: right;
padding: 5px;
width:200px;
margin-right: 250px;
margin-top: 10px;
font-size: 1em;
color: #ffffff;
background-color:#09F;
}
/* Footer */
#footer .footwrap{
width:1000px;
margin:0 auto;
}
#footer .column h3{
font: 120% Georgia, "Times New Roman", Times, serif;
color: #f4f4f4;
border-bottom: thin #f4f4f4 solid;
padding-top: 10px;
text-indent: 5px;
}
#footer p {
padding: 15px 0;
font-size: 1.1em;
}
#footer .column{
width: 310px;
float: left;
padding: 10px 15px 0px 0px;
position: relative;
height: 200px;
}
#footer .column h4{
color: #f4f4f4;
font-size: 1.4em;
text-shadow: #222 1px 0px 1px;
}
#footer .column ul{
padding: 0px;
margin: 10px 0px;
list-style-type: none;
color: #f4f4f4;
font-size: 1.1em;
line-height: 1em;
}
#footer .column ul li{
margin-bottom: 5px;
}
#footer .column #blog ul li{
padding: 10px 0 0 5px;
font-size: 1em;
color: #f4f4f4;
font-weight:lighter;
}
#footer .column #faq {
width: 300px;
height: 130px;
position: relative;
overflow: hidden;
margin: 5px 0 0 5px;
text-align: center;
}
#footer .column #faq li {
width: 300px;
height: 130px;
position: relative;
overflow: hidden;
font: italic 1em/1.6em Georgia, "Times New Roman", Times, serif;
}
#footer .column #faq p {
position: absolute;
top: 10px;
padding: 0;
margin: 0px;
font-size: 0.9em;
color: #f4f4f4;
}
#footer #sitemap{
clear: both;
padding-top: 10px;
color: #c2c2c2;
text-align: center;
font-size: 1.1em;
}
#footer #sitemap ul{
padding: 10px;
margin: 0px 0px 15px;
list-style-type: none;
}
#footer #sitemap li{
display: inline;
margin: 0px 10px;
text-transform: uppercase;
}
#footer #sitemap li a{
color: #c2c2c2;
}
#footer #sitemap a:hover{
color: #00b2da;
}
#footer .copyright{
clear: both;
color: #a6a6a6;
margin: 0 auto;
font-size: 80%;
}
#footer .footlogo{
float: left;
margin-left: 20px;
}
#footer .footnav{
float: right;
margin-right: 20px;
padding-top:15px;
}
#footer .footnav ul {
list-style: none;
}
#footer .footnav li {
float: left;
margin-left: 20px;
}
#footer .footnav li a {
display: block;
font: italic 12px Verdana, Geneva, sans-serif;
text-decoration: none;
color: #f4f4f4;
}
#footer .footnav li a:hover {
text-decoration: none;
color: #119fcd;
cursor: pointer; /* For IE6 */
}
#footer .footnav li.current_page a{color: #119fcd;}
#footer a, #footer a:hover, #footer a:visited, #footer a:active {
text-decoration: none;
color: #d9d9d9;
}
/* General Classes */
ul.mybullets li{
background:url(../images/mybullet.gif) no-repeat 0 8px;
padding: 5px;
text-indent: 15px;
font: italic 12px Verdana, Geneva, sans-serif;
color: #333333;
margin-left: 20px;
}
.formp{
font:italic 12px Verdana, Geneva, sans-serif;
}
.mains{
background:url(../images/mainsays9.png) no-repeat;
text-indent:-9999px;
width: 950px;
height: 206px;
}
.maina{
background:url(../images/fmainadd.png) no-repeat;
text-indent:-9999px;
width: 960px;
height: 304px;
}
.maina.abouta{background:url(../images/about3.png) no-repeat;}
.mains.abouts{background:url(../images/aboutsaying6.png) no-repeat;height:137px;}
.maina.weba{background:url(../images/fwebadd.png) no-repeat;}
.mains.webs{background:url(../images/websays4.png) no-repeat;height:184px;}
.maina.contacta{background:url(../images/contactadd2.png) no-repeat -5px 0;height:315px;}
.mains.contacts{background:url(../images/contactsays2.png) no-repeat;height:185px;}
.rss{background: url(../images/rssicon.png) no-repeat 200px -2px;}
.twitter{
text-indent: 40px;
background: url(../images/twitter2.png) no-repeat 0 5px;
}
.facebook{
text-indent: 40px;
background: url(../images/facebook2.png) no-repeat 0 5px;
}
.linkedin{
text-indent: 40px;
background: url(../images/linkedin2.png) no-repeat 0 5px;
}
.web{
background:url(../images/pcicon2.png) no-repeat left 20px;
text-indent: 40px;
}
.time{
background:url(../images/clockicon.png) no-repeat left 20px;
text-indent: 40px;
}
.tools{
background:url(../images/toolsicon2.png) no-repeat left 20px;
text-indent: 40px;
}
/* Layout Continued Sticky footer */
#main {
overflow:auto;
padding-bottom: 320px;
} /* must be same height as the footer */
#footer {
position: relative;
margin-top: -320px; /* negative value of footer height */
height: 320px;
clear:both;
background:#1a1a1a url("../images/footerbg.png") repeat-x;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
Here is my reset css code:
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
Here is the easyslider 1.7 javascript code I am using:
/*
* Easy Slider 1.7 - jQuery plugin
* written by Alen Grakalic
* http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
*
* Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Built for jQuery library
* http://jquery.com
*
*/
/*
* markup example for $("#slider").easySlider();
*
* <div id="slider">
* <ul>
* <li><img src="images/01.jpg" alt="" /></li>
* <li><img src="images/02.jpg" alt="" /></li>
* <li><img src="images/03.jpg" alt="" /></li>
* <li><img src="images/04.jpg" alt="" /></li>
* <li><img src="images/05.jpg" alt="" /></li>
* </ul>
* </div>
*
*/
(function($) {
$.fn.easySlider = function(options){
// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next',
controlsShow: true,
controlsBefore: '',
controlsAfter: '',
controlsFade: true,
firstId: 'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: false,
vertical: false,
speed: 800,
auto: false,
pause: 8000,
continuous: true,
numeric: false,
numericId: 'control'
};
var options = $.extend(defaults, options);
this.each(function() {
var obj = $(this);
var s = $("li", obj).length;
var w = $("li", obj).width();
var h = $("li", obj).height();
var clickable = true;
obj.width(w);
obj.height(h);
obj.css("overflow","hidden");
var ts = s-1;
var t = 0;
$("ul", obj).css('width',s*w);
if(options.continuous){
$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
$("ul", obj).css('width',(s+1)*w);
};
if(!options.vertical) $("li", obj).css('float','left');
if(options.controlsShow){
var html = options.controlsBefore;
if(options.numeric){
html += '<ol id="'+ options.numericId +'"></ol>';
} else {
if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\\"javascript:void(0);\\">'+ options.firstText +'</a></span>';
html += ' <span id="'+ options.prevId +'"><a href=\\"javascript:void(0);\\">'+ options.prevText +'</a></span>';
html += ' <span id="'+ options.nextId +'"><a href=\\"javascript:void(0);\\">'+ options.nextText +'</a></span>';
if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\\"javascript:void(0);\\">'+ options.lastText +'</a></span>';
};
html += options.controlsAfter;
$(obj).after(html);
};
if(options.numeric){
for(var i=0;i<s;i++){
$(document.createElement("li"))
.attr('id',options.numericId + (i+1))
.html('<a rel='+ i +' href=\\"javascript:void(0);\\"></a>')
.appendTo($("#"+ options.numericId))
.click(function(){
animate($("a",$(this)).attr('rel'),true);
});
};
} else {
$("a","#"+options.nextId).click(function(){
animate("next",true);
});
$("a","#"+options.prevId).click(function(){
animate("prev",true);
});
$("a","#"+options.firstId).click(function(){
animate("first",true);
});
$("a","#"+options.lastId).click(function(){
animate("last",true);
});
};
function setCurrent(i){
i = parseInt(i)+1;
$("li", "#" + options.numericId).removeClass("current");
$("li#" + options.numericId + i).addClass("current");
};
function adjust(){
if(t>ts) t=0;
if(t<0) t=ts;
if(!options.vertical) {
$("ul",obj).css("margin-left",(t*w*-1));
} else {
$("ul",obj).css("margin-left",(t*h*-1));
}
clickable = true;
if(options.numeric) setCurrent(t);
};
function animate(dir,clicked){
if (clickable){
clickable = false;
var ot = t;
switch(dir){
case "next":
t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;
break;
case "prev":
t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
break;
case "first":
t = 0;
break;
case "last":
t = ts;
break;
default:
t = dir;
break;
};
var diff = Math.abs(ot-t);
var speed = diff*options.speed;
if(!options.vertical) {
p = (t*w*-1);
$("ul",obj).animate(
{ marginLeft: p },
{ queue:false, duration:speed, complete:adjust }
);
} else {
p = (t*h*-1);
$("ul",obj).animate(
{ marginTop: p },
{ queue:false, duration:speed, complete:adjust }
);
};
if(!options.continuous && options.controlsFade){
if(t==ts){
$("a","#"+options.nextId).hide();
$("a","#"+options.lastId).hide();
} else {
$("a","#"+options.nextId).show();
$("a","#"+options.lastId).show();
};
if(t==0){
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
} else {
$("a","#"+options.prevId).show();
$("a","#"+options.firstId).show();
};
};
if(clicked) clearTimeout(timeout);
if(options.auto && dir=="next" && !clicked){;
timeout = setTimeout(function(){
animate("next",false);
},diff*options.speed+options.pause);
};
};
};
// init
var timeout;
if(options.auto){;
timeout = setTimeout(function(){
animate("next",false);
},options.pause);
};
if(options.numeric) setCurrent(0);
if(!options.continuous && options.controlsFade){
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
};
});
};
})(jQuery);
(function($) {
jQuery.fn.pngFix = function(settings) {
// Settings
settings = jQuery.extend({
blankgif: 'blank.gif'
}, settings);
var ie55 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 5.5") != -1);
var ie6 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 6.0") != -1);
if (jQuery.browser.msie && (ie55 || ie6)) {
//fix images with png-source
jQuery(this).find("img[src$=.png]").each(function() {
jQuery(this).attr('width',jQuery(this).width());
jQuery(this).attr('height',jQuery(this).height());
var prevStyle = '';
var strNewHTML = '';
var imgId = (jQuery(this).attr('id')) ? 'id="' + jQuery(this).attr('id') + '" ' : '';
var imgClass = (jQuery(this).attr('class')) ? 'class="' + jQuery(this).attr('class') + '" ' : '';
var imgTitle = (jQuery(this).attr('title')) ? 'title="' + jQuery(this).attr('title') + '" ' : '';
var imgAlt = (jQuery(this).attr('alt')) ? 'alt="' + jQuery(this).attr('alt') + '" ' : '';
var imgAlign = (jQuery(this).attr('align')) ? 'float:' + jQuery(this).attr('align') + ';' : '';
var imgHand = (jQuery(this).parent().attr('href')) ? 'cursor:hand;' : '';
if (this.style.border) {
prevStyle += 'border:'+this.style.border+';';
this.style.border = '';
}
if (this.style.padding) {
prevStyle += 'padding:'+this.style.padding+';';
this.style.padding = '';
}
if (this.style.margin) {
prevStyle += 'margin:'+this.style.margin+';';
this.style.margin = '';
}
var imgStyle = (this.style.cssText);
strNewHTML += '<span '+imgId+imgClass+imgTitle+imgAlt;
strNewHTML += 'style="position:relative;white-space:pre-line;display:inline-block;background:transparent;'+imgAlign+imgHand;
strNewHTML += 'width:' + jQuery(this).width() + 'px;' + 'height:' + jQuery(this).height() + 'px;';
strNewHTML += 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader' + '(src=\\'' + jQuery(this).attr('src') + '\\', sizingMethod=\\'scale\\');';
strNewHTML += imgStyle+'"></span>';
if (prevStyle != ''){
strNewHTML = '<span style="position:relative;display:inline-block;'+prevStyle+imgHand+'width:' + jQuery(this).width() + 'px;' + 'height:' + jQuery(this).height() + 'px;'+'">' + strNewHTML + '</span>';
}
jQuery(this).hide();
jQuery(this).after(strNewHTML);
});
// fix css background pngs
jQuery(this).find("*").each(function(){
var bgIMG = jQuery(this).css('background-image');
if(bgIMG.indexOf(".png")!=-1){
var iebg = bgIMG.split('url("')[1].split('")')[0];
jQuery(this).css('background-image', 'none');
jQuery(this).get(0).runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + iebg + "',sizingMethod='scale')";
}
});
//fix input with png-source
jQuery(this).find("input[src$=.png]").each(function() {
var bgIMG = jQuery(this).attr('src');
jQuery(this).get(0).runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader' + '(src=\\'' + bgIMG + '\\', sizingMethod=\\'scale\\');';
jQuery(this).attr('src', settings.blankgif)
});
}
return jQuery;
};
})(jQuery);
$(document).ready(function(){
$(document).pngFix();
});
My jquery library is jQuery 1.2.3. I havent posted it but if you need it I can. Is my problem anything to do with my position:relative in my css on certain things?
Thanks