# [SOLVED] Help on Nivo Slider on my site!



## konradgoat (Aug 29, 2009)

I am having problems setting up a nivo slider on my site. It basically messes up the structure and it doesn't work correctly. I have all the files there.

Here is the HTML Code on my website:


```
<!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>Welcome to Milton Keynes Railway Centre</title>
<link href="_css/main.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="Nivo Demo/nivo-slider.css" type="text/css" media="screen" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id = "header"> <a href="index.html"><img src="_images/Final-Logo1.jpg" alt="Welcome to Milton Keynes Railway Centre" name="logo" width="196" height="186" /></a><img src="_images/banner-head.jpg" width="744" height="186" alt="Welcome to Milton Keynes Railway Centre" />
<ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a href="#">Home</a></li>
  
  <li><a href="#">About Us</a></li>
  <li><a class="MenuBarItemSubmenu" href="#">Our Trains</a>
    <ul>
      <li><a href="Steam Trains.html">Steam Trains</a></li>
      <li><a href="#">Diesel Trains</a></li>
      <li><a href="#">Electric Trains</a></li>
      <li><a href="#">Train Simulator</a></li>
      </ul>
    </li>
  <li><a href="#">VIP Experience</a></li>
  <li><a href="#">Exhibitions</a></li>
  <li><a href="#">Visitor Information</a></li>
  <li><a href="Contact Us.html">Contact Us</a></li>
</ul>
</div>
</div>
</div>

<div class="slider-wrapper theme-default">
        <div id="slider" class="nivoSlider"> <a href="http://www.facebook.com/umer.khalidrashid"><img src="_images/train.jpg" alt="" /></a>
            <a href="http://www.google.co.uk/search?sourceid=chrome&ie=UTF-8&q=it's+cool+right%3F"><img src="_images/train1.jpg" alt=""/></a>
</div>

<div id = "page">
<h2>This website is current under construction. Please check by later</h2>
</div>



<footer><span class="footer">
© MKRC, Milton Keynes Railway Centre 2012 -
<a href="tc.html"> Terms & Conditions</a> -
<a href="Contact Us.html"> Contact us</a> -
<a href="#"> Newsletter</a> - <a href="#"> Blog</a>
</span></footer><strong></strong>



<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>

<script type="text/javascript" src="Nivo Demo/demo/scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Nivo Demo/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
	$(window).load(function() {
		$('#slider').nivoSlider({
			directionNav:false,
		});
	});
</script>
</body>
</html>
```
Here are some pictures:


----------



## Sorop3 (Jul 6, 2010)

*Re: Help on Nivo Slider on my site!*

Have you adjusted the CSS for the slider, if not then you need to. Also post the CSS here


----------



## Laxer (Dec 28, 2010)

*Re: Help on Nivo Slider on my site!*

Can you attach the JS and CSS files?

<link href="*_css/main.css*" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="*Nivo Demo/nivo-slider.css*" type="text/css" media="screen" />
<script src="*SpryAssets/SpryMenuBar.js*" type="text/javascript"></script>
<link href="*SpryAssets/SpryMenuBarHorizontal.css*" rel="stylesheet" type="text/css" />

Alternatively you could zip all the files together and attach them to your next post.


----------



## konradgoat (Aug 29, 2009)

*Re: Help on Nivo Slider on my site!*



Laxer said:


> Can you attach the JS and CSS files?
> 
> <link href="*_css/main.css*" rel="stylesheet" type="text/css" />
> <link rel="stylesheet" href="*Nivo Demo/nivo-slider.css*" type="text/css" media="screen" />
> ...


It has now been uploaded. I personally want it in the <div id = "page"> rather than before it but it seemed to hugely mess up.


----------



## Sorop3 (Jul 6, 2010)

*Re: Help on Nivo Slider on my site!*

It would have been better if you had attached all files including images because it looks like your nivo slider has not been set a height. I assume the images are of 700 x 300 as the default images of nivo slider.

Try setting a height for the nivo slider div and also set a height for the menu bar in CSS.

I managed to get this.









But as you can without all of your website's content it looks different.

Hopefully Laxer has a better solution.


----------



## konradgoat (Aug 29, 2009)

*Re: Help on Nivo Slider on my site!*

Here are the images on my website


----------



## konradgoat (Aug 29, 2009)

*Re: Help on Nivo Slider on my site!*



Sorop3 said:


> It would have been better if you had attached all files including images because it looks like your nivo slider has not been set a height. I assume the images are of 700 x 300 as the default images of nivo slider.
> 
> Try setting a height for the nivo slider div and also set a height for the menu bar in CSS.
> 
> ...


How did you get rid of the dots on the bottom, so it's just like a banner


----------



## Sorop3 (Jul 6, 2010)

*Re: Help on Nivo Slider on my site!*

Is your html or css different from the html you have posted here. Because if you look at your screenshot, the menu bar has different formatting, colour and font.. And in my screenshot its different..


----------



## Sorop3 (Jul 6, 2010)

*Re: Help on Nivo Slider on my site!*



konradgoat said:


> How did you get rid of the dots on the bottom, so it's just like a banner


sorry, what dots?

The only changes I did were added height for the menu bar and the slider.


----------



## konradgoat (Aug 29, 2009)

That should be the.. Oh there is an CSS document for the navigation bar. I'll provide it tomorrow morning


----------



## konradgoat (Aug 29, 2009)

*Re: Help on Nivo Slider on my site!*

Here are the navigation things


----------



## Laxer (Dec 28, 2010)

*Re: Help on Nivo Slider on my site!*

Sorry I have been out...

Looking at this shortly. :grin:


----------



## Laxer (Dec 28, 2010)

*Re: Help on Nivo Slider on my site!*

Don't know what you want done with this...

This should get it similar to your picture...

Open main.css, delete everything and copy paste this in:


```
@charset "utf-8";
/* CSS Document */
body {
	background-color: FFF;
	width: 940px;
	margin: 0 auto;
	font-family:"Century Gothic", Arial, sans-serif;
	color: #000;
	height: 250px;
}

#header {
	height: 120px;
	width: 940px;
	background-color: #D1FFCC;
	margin:0px 0px 5px 0px
	text-align: center;
}

#MenuBar1  {
	background-color#F00;
	font-family: "Century Gothic", Arial, sans-serif; 
	font-weight: bold;
	font-size: 15px;
	font-style: normal;
	padding:1;
	border-color: #ffffff #ffffff #ffffff #ffffff;
	border-width:0px;
	border-style: none none none none;
	width: 940px;
}

article,aside,details,figcaption,figure,header,hgroup,menu,nav,section {
	display:block;
	background-color: #D1FFCC;
	position: static;
}

nav #menu {
	position: static;
}

.nivoSlider {
	height:250px;
	clear:both;
	margin:10px auto 10px auto;
}

.nivoSlider img {
	position:inherit;
	top:0;
	left:0;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:6;
	display:none;
}

/* The slices and boxes in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
	top:0;
	left:0;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
}
/* Caption styles */
.nivo-caption {
	position:absolute;
	left:0;
	bottom:0;
	background:#000;
	color:#fff;
	opacity:0.8; /* Overridden by captionOpacity setting */
	width:100%;
	z-index:8;
}
.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 {
	position:absolute;
	top:45%;
	z-index:9;
	cursor:pointer;
}
.nivo-prevNav {
	left:0px;
}
.nivo-nextNav {
	right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
	position:relative;
	z-index:9;
	cursor:pointer;
}
.nivo-controlNav a.active {
	font-weight:bold;
}

#page {
	width: 940px;
	height: 680px;
	margin:10px 0px 0px 0px;
	background-color: #090;
	border: solid 2px 2px 2px 		        2px #000;
	height: 250px;
	height: 600px;
	height: 500px;
	left: 50px;
	padding: 2px;
}

#contactpage {
	width: 860px;
	height: 680px;
	margin-left: 40px;
	margin-top: 50px;
	background-color: #090;
	border: solid 2px 2px 2px 		        2px #000;
	height: 250px;
	height: 600px;
	height: 1140px;
	left: 50px;
	padding: 2px;
}

#sideNav {
	font-family: "Century Gothic", Arial, sans-serif;
	background-color: #fff6d4;
	width: 12em;
	font-size: 14px;
	/* [disabled]font-weight: bold; */
		text-align: left;
	padding-left: 4px;
	padding-right: 7px;
}

footer {
	width: 860px;
	height: 20px;
	background-color: #D1FFCC;
	margin-left: 40px;
	padding-top: 10px;
	text-align: center;
	left: auto;
}

.footer a:link {
 color: #060;
 text-decoration:none;
}

.footer a:visited {
 color:#060;
 text-decoration:none;
}
.footer a:hover {
 color: #06F;
 text-decoration:none;
}
#sidebar {
	font-family: "Century Gothic", Arial, sans-serif;
	font-size: 14px;
	background-color: #0CF;
	text-align: left;
	width: 223px;
	height: 498px;
	margin: 2px;
	position: relative;
	top: 0px;
	padding: 2px;
	border: 1.6px solid #000;
	float: left;
}
#page #maincontent {
	width: 615px;
	height: 505px;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	display: inherit;
	position: relative;
	visibility: 0;
	right: 220px;
	left: 238px;
	top: 0px;
	padding: 0px;
	margin-right: -15px;
}
#maincontent {
	background-color: #00C;
	width: 628px;
	text-align: left;
	font-family: "Century Gothic", Arial, sans-serif;
	margin: 0px;
	height: 500px;
	float: none;
	padding: 2px;
	position: relative;
	left: 228px;
	top: -5px;
	border: 1.6px solid #000;
}
#maincontent h1 {
	color: #FFF;
}
#page h1 {
	color: #FFF;
	text-align:	center;
	
}
#page h2 {
	color: #FFF;
	text-align: center;
}
#page p {
	text-align: center;
	color: #FFF;
	font-size: 14px;
}

#terms {
	width: 860px;
	height: 680px;
	margin-left: 40px;
	margin-top: 50px;
	background-color: #090;
	height: 250px;
	height: 600px;
	height: 1060px;
	left: 50px;
	padding: 2px;
	text-align: center;
	border-top-width: medium;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-top-style: double;
	border-right-style: double;
	border-bottom-style: double;
	border-left-style: double;
}
#terms h4 {
	font-style: italic;
	color: #FFF;
}
#terms h3 {
	color: #FFF;
}
#terms h1 {
	color: #FFF;
	text-decoration: underline;
}
#terms p {
	color: #FFF;
}
#terms h5 {
	color: #FFF;
	text-decoration: underline;
}

#terms h5 a:link{
	color: #FFF;
	text-decoration: underline;
}

#terms h5 a:visited{
	color: #FFF;
	text-decoration: underline;
}

#terms h5 a:hover{
	color: #F60;
	text-decoration: underline;
}

#steam p {
	color: #FFF;
	font-size: 14px;
}

#steam h4 {
	color: #FFF;
	font-size: 14px;
}

#steam h2 {
	color: #FFF;
}

#steam h5 {
	color: #FFF;
}

#steam h5 a:link{
	color: #FFF;
}

#steam h5 a:visited{
	color: #FFF;
}

#steam h5 a:hover{
	color: #F60
}

#steam {
	width: 860px;
	height: 680px;
	margin-left: 40px;
	margin-top: 50px;
	background-color: #090;
	height: 250px;
	height: 600px;
	height: 2000px;
	left: 50px;
	padding: 2px;
	text-align: center;
	border-top-width: medium;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-top-style: double;
	border-right-style: double;
	border-bottom-style: double;
	border-left-style: double;
	color: #000;
}
#steam h4 a:link{
	color: #FFF;
}

#steam h4 a:visited{
	color: #FFF;
}
	
#steam h4 a:hover{
	color: #F60;
}
	
#thanks {
	width: 860px;
	height: 680px;
	margin-left: 40px;
	margin-top: 50px;
	background-color: #090;
	height: 200px;
	left: 50px;
	padding: 2px;
	text-align: center;
	border-top-width: medium;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-top-style: double;
	border-right-style: double;
	border-bottom-style: double;
	border-left-style: double;
	color: #FFF;
}
```
I have attached my test folder if you just want to copy the file over...

(all files are in it and in the correct directory of others want to play with the code)


----------



## konradgoat (Aug 29, 2009)

*Re: Help on Nivo Slider on my site!*



Laxer said:


> Don't know what you want done with this...
> 
> This should get it similar to your picture...
> 
> ...


On the picture below, how do I get rid of the numbers on the top left of the slider (123). I also really just want it to fade/slide and not to have a mixture of effects and a want a longer delay. It's getting better though, just need help in the last few stages.


----------



## Sorop3 (Jul 6, 2010)

*Re: Help on Nivo Slider on my site!*

You can remove the numbers by disabling the ControlNav option in the slider's script, set the effects you want and also adjust the pauseTime as you wish.


```
<script type="text/javascript">
	$(window).load(function() {
		$('#slider').nivoSlider({
			directionNav:false,
			[B]controlNav: false, // 1,2,3... navigation
			effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
			pauseTime: 3000, // How long each slide will show[/B]
		});
	});
</script>
```
Visit the jQuery Plugin Usage and scroll down to the bottom. There are plenty of options you can adjust/change.

Here is a tutorial video split in two parts that you should follow to set up the Nivo Slider.

Setting up the Nivo Slider - Part 1 - Setup
Setting up the Nivo Slider - Part 2 - Styling

*For Nivo Slider options such as disabling the ControlNav or changing the effects go to 07:40*

Hopefully this helps. :smile:


----------



## konradgoat (Aug 29, 2009)

*Re: Help on Nivo Slider on my site!*

Ok. I just moved stuff around, I cant seem to put a margin on top so there is a space between the navigation bar and the actual image.

I need the actual nivo slider to be positioned the same width as the green div below it, with a small gap (around 5px).

The lengh of the slider should be: 860px
The height of the nivo slider should be, a banner size.

Here attached is examples of images (They are smaller but you get the idea)

Suggest a size or help me out with the layout


----------



## Laxer (Dec 28, 2010)

*Re: Help on Nivo Slider on my site!*

The css is a little odd with the site so it doesn't respond quite like it should.

To add some spacing to the slider change the height of the header...

I found that 135px works well :grin:


----------



## konradgoat (Aug 29, 2009)

*Re: Help on Nivo Slider on my site!*

See Image:

I get this when I preview my website.., I used the code that you gave me above in a zipped file. 'The little green thing at the top'

Also, I believe my website doesn't look so good on a IE version


----------



## Sorop3 (Jul 6, 2010)

*Re: Help on Nivo Slider on my site!*



konradgoat said:


> See Image:
> 
> I get this when I preview my website.., I used the code that you gave me above in a zipped file. 'The little green thing at the top'
> 
> Also, I believe my website doesn't look so good on a IE version


You can remove the image link border by setting the border to none in CSS.


```
a img {
	text-decoration: none;
	border: 0 none;
}
```


----------



## konradgoat (Aug 29, 2009)

*Re: Help on Nivo Slider on my site!*



Sorop3 said:


> You can remove the image link border by setting the border to none in CSS.
> 
> 
> ```
> ...


Ok Thanks, but, view my test site on a test domain. just the homepage as I haven't linked up any other pages.

Welcome to Milton Keynes Railway Centre

Watch as you load the page the pictures are in one located and then 'fly' to the banner place.


----------



## Laxer (Dec 28, 2010)

*Re: Help on Nivo Slider on my site!*

I will double check and see if I can get the issue resolved when I get home tonight.


----------



## konradgoat (Aug 29, 2009)

*Re: Help on Nivo Slider on my site!*

My website looks crap on internet explorer 8. Please can you help me. It's fine on chrome and it's fine on firefox but IE is rubbish. Help me out here lol.

Use the following link and you can download my files. Ive uploaded them in a ZIP folder on my website.

Index of /webhelp


----------



## konradgoat (Aug 29, 2009)

*Re: Help on Nivo Slider on my site!*



konradgoat said:


> My website looks crap on internet explorer 8. Please can you help me. It's fine on chrome and it's fine on firefox but IE is rubbish. Help me out here lol.
> 
> Use the following link and you can download my files. Ive uploaded them in a ZIP folder on my website.
> 
> Index of /webhelp


See navigation images. It works at home.


----------



## Laxer (Dec 28, 2010)

*Re: Help on Nivo Slider on my site!*

I don't have IE8 on my local machine so I will have to download it.

I will check with my team to see if any of them want to tackle the task before I find an older version of IE


----------



## konradgoat (Aug 29, 2009)

*Re: Help on Nivo Slider on my site!*



Laxer said:


> I don't have IE8 on my local machine so I will have to download it.
> 
> I will check with my team to see if any of them want to tackle the task before I find an older version of IE


Yeh my SPry Navigation bar keeps messing up. It's getting a bit irratating


----------



## konradgoat (Aug 29, 2009)

Solved


----------

