I've encountered some issues with my code: HTML:
<!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>
<script class="jsbin" src="js/jquery.min.js"></script>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bellevue</title>
</head>
<body>
<div id="container">
<div id="gallery">
<center>
<div id="slider">
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/1.jpg">
</div>
</center>
<div id="nav">
<ul>
<li class="active">Go to slide 1</li>
<li>Go to slide 2</li>
<li>Go to slide 3</li>
</ul>
</div>
<div id="info">
<div class="info"><h3>Info panel 1</h3></div>
<div class="info"><h3>Info panel 2</h3></div>
<div class="info"><h3>Info panel 3</h3></div>
</div>
</div>
</div>
<div id="lengte"></div>
<script>
var imgN = "95%";
var galW = $('#gallery').outerWidth(true);
var galL = $('#lengte').outerWidth(true);
$('#slider, #info').width(galW*imgN);
$('#nav li').click(function(){
var ind = $(this).index();
$('#slider').stop(1).animate({top: '-'+galL*ind },1500);
$('#info').stop(1).animate({left: '-'+galW*ind },1500);
$(this).addClass('active').siblings('li').removeClass('active');
});
</script>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
*{
margin:0px;
}
body{
font-family:Arial, Verdana, Helvetica, sans-serif;
background-color: #FFF;
margin:0px;
padding:0px;
}
#container{
margin-left:5%;
margin-right:5%;
}
/*slider*/
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#gallery{
width:100%;
height:490px;
position:relative;
margin:20px auto;
background:#eee;
overflow:hidden;
}
#slider{
width:680px;
margin-left:auto;
margin-right:auto;
position:absolute;
}
#slider img{
position:relative;
float:left;
}
#lengte{
width:350px;
}
#nav{
width:100%;
z-index:2;
position:absolute;
top:305px;
text-align:center;
}
#nav li{
cursor:pointer;
display:inline;
background:#ddd;
padding:10px;
margin:1px;
border-bottom:1px solid #999;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
}
#nav li.active{
background:#eee;
border-bottom:1px solid #eee;
}
#info{
position:absolute;
top:350px;
height:140px;
width:100%;
background:#eee;
}
div.info{
position:relative;
float:left;
padding:10px 25px;
height:120px;
width:100%;
}
Issues:
- The images slide vertically, but they are not centered.
- Text disappears when sliding from right to left and I cannot see them. The next picture is displayed instead.
- The whole page is not positioned at the top, there is white space visible on top of the page.
Could someone assist me with resolving these problems?
View links here:
http://jsfiddle.net/FYgE5/