Hello, I hope someone can point me in correct direction.
I am trying to use the Nivoslider for a page in my website. At the moment the slider is technically working. I've got the slider positioned where I want it, the sliders are transistioning automatically, but I've got one problem.
Problem is that the arrows buttons are located top left of the slider image and not centred along either side like in the demos I've seen. They also don't react to clicks.
Xhtml:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Biography</title>
<link rel="stylesheet" href="../css/nivo-slider.css" type="text/css" media="screen" />
<link href="../css/master.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="../scripts/jquery.nivo.slider.js" type="text/javascript"></script>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="header_container">
<img class="header_image" src="../images/header.jpg" alt="logo"/>
</div>
<div id="central">
<div id="slider_wrapper" >
<div id="slider" class="nivoslider">
<img src="../images/slide1.jpg" alt=""/>
<img src="../images/slide2.jpg" alt=""/>
<img src="../images/slide3.jpg" alt=""/>
</div>
</div>
</div>
<div id="nav_container" class="biography">
<ul id="prinav">
<li id="home"><a href="/"></a></li>
<li id="biography"><a href="/biography"></a></li>
<li id="portfolio"><a href="/portfolio"></a></li>
<li id="contact"><a href="/contact"></a></li>
</ul>
</div>
<div id="sec_nav">
<ul>
<li><a href="/portfolio" class="selected">Landscapes</a></li>
<li><a href="/portfolio/architecture">Architecture</a></li>
<li><a href="/portfolio/portraits">Portraits</a></li>
<li><a href="/portfolio/weddings">Weddings</a></li>
</ul>
</div>
<div id="main">
<p>main</p>
<p>content </p>
<p>container</p>
<p>hopefully thibio </p>
<p> </p>
</div>
</div>
<div id="footer_container">Website Under Construction Photography. All rights reserved and copyrighted. Do not use images without my permission.</div>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</body>
</html>
The CSS refering to the slider:
Code:
/*
* jQuery Nivo Slider v2.4
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/
/* The Nivo Slider styles */
#slider_wrapper {margin: 0 auto; height: 200px; width: 500px;}
#slider {position: relative; height: 200px; width: 500px}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}
/* The slices in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:89;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(../images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
Reply With Quote
New Member: Posts Will Be Moderated
Posting Permissions