But using float property now it is giving jerks. Because when we take mouse over the link button it loads image towards down and then take it up and also banner section is not align top. It comes just down to some place. Here is my code
HTML files
[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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="includes/slideshow.css" type="text/css" media="screen" />
<script type="text/javascript" src="includes/jquery.js"></script>
<script type="text/javascript" src="includes/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="includes/slideshow.js"></script>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" align="center" width="1100">
<tr>
<td align="center" valign="top" width="1100">
<!-- Features -->
<div id="features">
<!-- Feature Nav -->
<ul id="feature-nav">
<li id="button1"><a href="#." rel="#feature-1">Lorem Ipsum</a></li>
<li id="button2"><a href="#." rel="#feature-2">Lorem Ipsum</a></li>
<li id="button3"><a href="#." rel="#feature-3">Lorem Ipsum</a></li>
<li id="button4"><a href="#." rel="#feature-4">Lorem Ipsum</a></li>
</ul>
<!-- /Feature Nav -->
<div class="feature" id="feature-1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac eleifend urna. Aenean felis est, dignissim nec dapibus sit amet, aliquet sit amet velit.<br /><br />
<a href="#.">Read More</a></p>
</div>
<div class="feature" id="feature-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac eleifend urna. Aenean felis est, dignissim nec dapibus sit amet, aliquet sit amet velit.<br /><br />
<a href="#.">Read More</a></p>
</div>
<div class="feature" id="feature-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac eleifend urna. Aenean felis est, dignissim nec dapibus sit amet, aliquet sit amet velit.<br /><br />
<a href="#.">Read More</a></p>
</div>
<div class="feature" id="feature-4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac eleifend urna. Aenean felis est, dignissim nec dapibus sit amet, aliquet sit amet velit.<br /><br />
<a href="#.">Read More</a></p>
</div>
</div>
<!-- /Features -->
</td>
</tr>
</table>
</body>
</html>
/CODE]
CSS file
-
body{
-
margin:0px;
-
padding:0px;
-
}
-
/*
-
Slideshow Addition
-
*/
-
#features {
-
background: #2c3f4d;
-
height: 400px;
-
position: relative;
-
width: 1100px;
-
}
-
#features .feature {
-
height: 340px;
-
left: 0;
-
float:right;
-
/*position: absolute;*/
-
top: 0;
-
width: 880px;
-
}
-
#features #feature-2,
-
#features #feature-3,
-
#features #feature-4 {
-
display: none;
-
}
-
#features #feature-1 h2, #features #feature-2 h2, #features #feature-3 h2, #features #feature-4 h2 {
-
color: #ffffff;
-
font-size: 26px;
-
font-family: Times, "Times New Roman", serif;
-
font-weight: 500;
-
text-shadow: 1px 1px #000;
-
padding-top: 185px;
-
padding-left: 30px;
-
}
-
#features h2 span.yellow {
-
color: #f9edc3;
-
}
-
#features #feature-1 p, #features #feature-2 p, #features #feature-3 p, #features #feature-4 p {
-
color: #ececec;
-
font-size: 12px;
-
line-height: 16px;
-
padding-left: 30px;
-
width: 390px;
-
}
-
#features p a {
-
background: url(../images/arrow.jpg) 0px 2px no-repeat;
-
color: #f9edc3;
-
padding-left: 15px;
-
}
-
#features #feature-1 {
-
background: url(../images/slide1.jpg) top left no-repeat;
-
}
-
#features #feature-2 {
-
background: url(../images/slide2.jpg) top left no-repeat;
-
}
-
#features #feature-3 {
-
background: url(../images/slide3.jpg) top left no-repeat;
-
}
-
#features #feature-4 {
-
background: url(../images/slide4.jpg) top left no-repeat;
-
}
-
#features #feature-nav {
-
bottom: 0px;
-
height: 93px;
-
float:left;
-
/*position: absolute;*/
-
left: 0;
-
width: 880px;
-
list-style:none;
-
padding:0px;
-
}
-
#feature-nav li {
-
float: left;
-
height: 92px;
-
text-align: center;
-
width: 220px;
-
clear:left;
-
}
-
#feature-nav li a {
-
display: block;
-
height: 92px;
-
width: 220px;
-
text-indent: -9000px;
-
}
-
#feature-nav li a:hover {
-
cursor: pointer;
-
}
-
#feature-nav li#button1 {
-
background: url(../images/button1.jpg) top left no-repeat;
-
}
-
#feature-nav li#button2 {
-
background: url(../images/button2.jpg) top left no-repeat;
-
}
-
#feature-nav li#button3 {
-
background: url(../images/button3.jpg) top left no-repeat;
-
}
-
#feature-nav li#button4 {
-
background: url(../images/button4.jpg) top left no-repeat;
-
}
-
#feature-nav li#button1 a.active {
-
background: url(../images/button1-active.jpg) top left no-repeat;
-
}
-
#feature-nav li#button2 a.active {
-
background: url(../images/button2-active.jpg) top left no-repeat;
-
}
-
#feature-nav li#button3 a.active {
-
background: url(../images/button3-active.jpg) top left no-repeat;
-
}
-
#feature-nav li#button4 a.active {
-
background: url(../images/button4-active.jpg) top left no-repeat;
-
}
-
javascript file
-
-
/* | Homepage Slideshow
-
---------------------------------------- */
-
var slideshow = {
-
timer : null,
-
delay : 5500,
-
t : 0,
-
-
init : function()
-
{
-
slideshow.triggers = $('#feature-nav a');
-
slideshow.trigger_first = $('#feature-nav a:first');
-
slideshow.trigger_last = $('#feature-nav a:last');
-
-
slideshow.items = $('#features .feature');
-
-
slideshow.triggers.mouseover( function(){ slideshow._slide(this); slideshow._stop(); return false; });
-
slideshow._automate();
-
},
-
-
_automate : function()
-
{
-
var most = slideshow.triggers.length;
-
target = $('#feature-nav a:eq('+ slideshow.t +')');
-
slideshow._slide(target);
-
slideshow.t++;
-
if ( slideshow.t == most )
-
slideshow.t = 0;
-
slideshow.timer = setTimeout( function(){ slideshow._automate() }, slideshow.delay );
-
},
-
-
_stop : function()
-
{
-
slideshow.timer = clearTimeout(slideshow.timer);
-
},
-
-
_slide : function(el)
-
{
-
var target = $(el).attr('rel');
-
slideshow.triggers.not(el).removeClass('active');
-
//alert(el);
-
$(el).addClass('active');
-
$(target).fadeIn('fast');
-
$(slideshow.items).not(target).fadeOut('fast');
-
}
-
}
-
$(document).ready(slideshow.init);
-
-
245
