Hi,
I'm having issues with the current page I'm working on. It works fine in IE, Chrome and Safari but not so much in Firefox.
The problem I'm having is that the slideshow is positioned all the way off the screen (towards the right). It's supposed to be straight below the logo. Someone please help!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
<!-- This is the start of the slideshow stuff -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script>
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true
});
});
</script>
<!-- This is the end of the slideshow stuff -->
<!-- This is the start of the lightbox stuff -->
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
$(document).ready(function() {
/*
* Examples - images
*/
$("a#example1").fancybox();
$("a#example2").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
$("a#example3").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none'
});
$("a#example4").fancybox({
'opacity' : true,
'overlayShow' : true,
'overlayColor' : '#FFF',
'transitionIn' : 'elastic',
'transitionOut' : 'none'
});
$("a#example5").fancybox();
$("a#example6").fancybox({
'titlePosition' : 'outside',
'overlayColor' : '#000',
'overlayOpacity' : 0.9
});
$("a#example7").fancybox({
'titlePosition' : 'inside'
});
$("a#example8").fancybox({
'titlePosition' : 'over'
});
$("a[rel=example_group]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
/*
* Examples - various
*/
$("#various1").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});
$("#various2").fancybox();
$("#various3").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
$("#various4").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
<!-- This is the end of the lightbox stuff -->
</head>
<body>
<div id="container">
<div id="logo">
<img src="img/logo.png" width="200" height="109">
</div>
<div id="example">
<div id="slides">
<div class="slides_container">
<img src="img/1.jpg" width="800" height="532" alt="Slide 1">
<img src="img/2.jpg" width="800" height="532" alt="Slide 2">
<img src="img/3.jpg" width="800" height="532" alt="Slide 3">
<img src="img/4.jpg" width="800" height="532" alt="Slide 4">
<img src="img/5.jpg" width="800" height="532" alt="Slide 5">
<img src="img/6.jpg" width="800" height="532" alt="Slide 6">
<img src="img/7.jpg" width="800" height="532" alt="Slide 7">
<img src="img/8.jpg" width="800" height="532" alt="Slide 8">
</div>
</div>
</div>
<div id="footer">
<a id="example4" href="#contact"><span class="contactcolor">CONTACT ME</span></a>
<div style="display:none"><div id="contact">
If you'd like to get a quote or see more of my work you can use the following: <p></p>
Email: <p></p>
Phone:
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body {
background:black;
}
#logo {
float:left;
height:109px;
width:850px;
margin-bottom:50px;
margin-top:20px;
}
#container {
width:850px;
margin:0 auto;
}
#example {
width:800px;
}
#frame {
z-index:0;
width:830px;
height:552px;
top:100px;
margin-left:0px;
}
/*
Slideshow
*/
#slides {
}
/*
Slides container
Important:
Set the width of your slides container
Set to display none, prevents content flash
*/
.slides_container {
width:800px;
overflow:hidden;
display:none;
margin-top:50px;
border:20px white solid;
}
/*
Each slide
Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display block
*/
.slides_container a {
width:900px;
height:270px;
display:block;
}
.slides_container a img {
display:block;
}
/*
Next/prev buttons
*/
#slides .next,#slides .prev {
position:absolute;
top:107px;
left:-39px;
width:24px;
height:43px;
display:block;
z-index:101;
}
#slides .next {
}
/*
Pagination
*/
.pagination {
margin:26px auto 0;
width:150px;
}
.pagination li {
float:left;
margin:0 1px;
list-style:none;
}
.pagination li a {
display:block;
width:12px;
height:0;
padding-top:12px;
background-image:url(../img/pagination.png);
background-position:0 0;
float:left;
overflow:hidden;
}
.pagination li.current a {
background-position:0 -12px;
}
/*
Footer
*/
#footer {
text-align:center;
width:800px;
color:white;
margin-top:70px;
font-family:Arial, Helvetica;
}
#footer p {
margin:4.5px 0;
font-size:1.0em;
}
/*
Anchors
*/
a:link,a:visited {
color:#09F;
text-decoration:none;
}
a:hover,a:active {
color:#599100;
}
#contact {
font-family:arial;
height:150px;
color:#FFF;
background:black;
border:0px;
padding:20px;
padding-top:100px;
}
.contactcolor {
color:white;
font-weight:bold;
}
