Menu
I have got unknown margin on left and the top of my jquery slideshow..cant figure out what's happening? please help!!! below is the code and the screenshot
%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!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 runat="server">
<title>Untitled Page</title>
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/cycle.js" type="text/javascript"></script>
<script type="text/javascript">
$("document").ready(function(){
$('#slideshow').before('<ul id="nav">').cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager: '#nav',
// callback fn that creates a thumbnail to use as pager anchor
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#"><img src="' + slide.src + '" width="198" height="93" /></a></li>';
}
});
$('li:lt(3)').wrapAll('<div class="wrapper" />');
$('li:gt(2)').wrapAll('<div class="wrapper2" />');
});
</script>
<style type="text/css">
#slideshow
{
height: 300px;
width: 469px;
padding: 0;
margin-top: 0px;
position: absolute;
left: 267px;
top: 25px;
}
#slideshow img
{
padding: 10px;
border: 1px solid #ccc;
background-color: #eee;
width: 449px;
height: 290px;
}
.wrapper
{
width: 217px;
float: left;
}
.wrapper2
{
width: 217px;
float: right;
}
#nav
{
width: 920px;
float: left;
}
#nav li
{
width: 198px;
margin-top: 0px;
float: left;
margin-bottom: 5px;
margin-left: 0px;
list-style: none;
}
#nav a
{
width: 198px;
height: 93px;
padding: 3px;
display: block;
border: 1px solid #ccc;
background-color: #eee;
}
#nav a.activeSlide
{
background: #88f;
}
#nav a:focus
{
outline: none;
}
#nav img
{
border: none;
display: block;
}
</style>
</head>
<body>
<div id="slideshow" class="pics">
<img src="http://farm2.static.flickr.com/1429/1252247669_5f014e7dc1_b.jpg" />
<img src="http://farm1.static.flickr.com/153/332584527_bd5efc0197_o.jpg" />
<img src="http://farm4.static.flickr.com/3031/2744217176_33eeeef93a_b.jpg" />
<img src="http://farm2.static.flickr.com/1429/1252247669_5f014e7dc1_b.jpg" />
<img src="http://farm1.static.flickr.com/153/332584527_bd5efc0197_o.jpg" />
<img src="http://farm4.static.flickr.com/3031/2744217176_33eeeef93a_b.jpg" />
</div>
</body>
</html>
here is a link to the screenshot
http://img337.imageshack.us/img337/9043/sliderb.jpg
785
OK, if I strip out your javascript, and comment out the 'left' and 'top' styling from your CSS, and add the CSS rule below, then i get all the pictures stacked vertically, from the very top left corner (no ghost margins).
body {margin: 0;}
Also you should be using the newer version of jQuery (v1.4.2). Finally, you missed an opening angular bracket in the Page Language="VB" line at the top of your quoted code, but are you sure you need that line in there? You may want to try removing it...
If you apply those CSS changes, and remove that top line, and it still doesn't work, we will need to see your cycle.js script.
93
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
