Hi,
You added slides_two and three but you didn’t change the css to accommodate them. Change id=container to a class if you want to re-use it and then target the prev and next via that class.
e.g.
/*#slides .next,#slides .prev,*/
.container .next, .container .prev {
position:absolute;
top:107px;
left:-39px;
width:24px;
height:43px;
display:block;
z-index:101;
}
/*#slides .next */
.container .next { left:585px; }
/*
You could combine the js into one routine like this:
<script type="text#javascript">
$(function(){
[B]$('#slides,#slides_two,#slides_three').slides({[/B]
preload: true,
preloadImage: 'img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});
</script>
You can’t wrap p tags around divs so remove them. The empty headerspacer div is also a waste of space. Just add margins to exisiting elements to move them down.
Here’s a full working example with the code in the head although I haven’t addressed all the errors.
<!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>pirr creatives</title>
<link href="css/pirr_creatives_style.css" rel="stylesheet" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/global3.css" />
<style type="text/css">
body {
background:#fff;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
font-style:normal;
font-weight:normal;
width:600%;
}
img.pirrlogo {
float:left;
margin:45px 25px 0px 65px;
}
.section {
margin:0px;
bottom:0px;
width:16%;
float:left;
}
.content {
clear:both;
float:none;
margin:0px 0px 0px 270px;
width:600px;
}
.section ul {
float:left;
list-style:none;
margin:90px 0 0;
font-family:Verdana, Geneva, sans-serif;
font-size:13px;
font-style:normal;
font-weight:normal;
color: #504143;
}
.section p {
clear:both;
margin:0px 0px 0px 0px;
width:670px;
}
.navi ul li {
float:left;
padding:5px 9px 0px 0px;
margin:5px 9px 0px 0px;
color:#504143;
}
.navi ul li a {
display:block;
color:#CCC;
}
.navi ul li a:hover {
text-decoration:none;
color:#504143;
}
/*
Resets defualt browser settings
reset.css
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin:0;
padding:0;
border:0;
outline:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}
:focus { outline:0; }
a:active { outline:none; }
body {
line-height:1;
color:black;
background:white;
}
ol, ul { list-style:none; }
table {
border-collapse:separate;
border-spacing:0;
}
caption, th, td {
text-align:left;
font-weight:normal;
}
blockquote:before, blockquote:after, q:before, q:after { content:""; }
blockquote, q { quotes:"" ""; }
/*
Page style
*/
body {
font:normal 62.5%/1.5 Helvetica, Arial, sans-serif;
letter-spacing:0;
color:#434343;
background:#efefef url(http://pirrcreatives.com/img/background.png) repeat top center;
padding:20px 0;
position:relative;
text-shadow:0 1px 0 rgba(255,255,255,.8);
-webkit-font-smoothing: subpixel-antialiased;
}
.container {
width:580px;
padding:10px;
position:relative;
margin:140px 0 0 280px;
z-index:0;
}
#example {
width:600px;
height:350px;
position:relative;
}
.frame {
position:absolute;
z-index:0;
width:739px;
height:341px;
top:-3px;
left:-80px;
}
/*
Slideshow
*/
#slides, #slides_two, #slides_three {
position:absolute;
top:15px;
left:4px;
z-index:100;
}
/*
Slides container
Important:
Set the width of your slides container
Set to display none, prevents content flash
*/
.slides_container {
width:570px;
overflow:hidden;
position:relative;
display:none;
}
/*
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 div.slide {
width:570px;
height:270px;
display:block;
}
/*
Next/prev buttons
*/
/*#slides .next,#slides .prev,*/
.container .next, .container .prev {
position:absolute;
top:107px;
left:-39px;
width:24px;
height:43px;
display:block;
z-index:101;
}
/*#slides .next */
.container .next { left:585px; }
/*
Pagination
*/
.pagination {
margin:0px auto 0;
width:570px;
}
.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(http://pirrcreatives.com/img/pagination.png);
background-position:0 0;
float:left;
overflow:hidden;
}
.pagination li.current a { background-position:0 -12px; }
/*
Caption
*/
.caption {
z-index:500;
position:absolute;
bottom:-35px;
left:0;
height:30px;
padding:5px 20px 0 20px;
background:#000;
background:rgba(0,0,0,.5);
width:540px;
font-size:1.3em;
line-height:1.33;
color:#fff;
border-top:1px solid #000;
text-shadow:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://pirrcreatives.com/js/slides.min.jquery.js"></script>
<script>
$(function(){
$('#slides,#slides_two,#slides_three').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});
</script>
</head>
<style>
a {
color:#CCC;
text-decoration:none;
}
a:hover { text-decoration:underline; }
span.footer {
position:fixed;
left:270px;
bottom:20px;
font-size:10px;
color: #CCC;
line-height: 15px;
}
span.footer a { padding-right:20px; }
span.footer a:hover {
color:#504143;
text-decoration:none;
}
</style>
<body>
<div> <span class="footer"> pirr creatives. Copyright © 2012-2012 pirr creatives. All Rights Reserved. </span> </div>
<!-- Home page starts here -->
<div class="section navi" id="homepage"> <img src="http://pirrcreatives.com/images/pirr_creatives_logo.png" width="180" height="90" class="pirrlogo"/>
<ul class="nav">
<li>•</li>
<li><a href="#logo">logo design</a></li>
<li><a href="#multimedia">multimedia design</a></li>
<li><a href="#print">print design</a></li>
<li><a href="#contact">contact us</a></li>
<li><a href="#blog">blog</a></li>
</ul>
<div class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In volutpat feugiat justo vel rhoncus. Vestibulum lacus neque, viverra placerat sagittis placerat, mollis vel nibh. Vivamus euismod sollicitudin nunc, sit amet pretium est pharetra vel. Morbi ultricies facilisis congue. Etiam tempor libero laoreet dui placerat sagittis ac vitae erat. Fusce tempus mattis malesuada. Sed metus augue, varius vel molestie sed, blandit eget lacus.
Phasellus ac nunc augue, sit amet fermentum neque. Proin tempor arcu in lectus adipiscing luctus eget vitae sem. Fusce nec urna adipiscing massa commodo accumsan et sit amet diam. Etiam faucibus lacus eu sem iaculis nec viverra felis semper. Nulla facilisi. Etiam et odio eu lectus sagittis ullamcorper. Pellentesque dapibus pellentesque convallis. Vivamus libero nunc, tincidunt ut aliquet at, ultrices sit amet ante.
Morbi eros mi, vehicula id tempor a, egestas vitae justo. Vivamus rhoncus aliquet ultricies. Ut libero quam, iaculis quis convallis eu, condimentum eu ligula. In hac habitasse platea dictumst. Etiam est lorem, malesuada nec interdum id, condimentum eu enim. Nullam eget sem elit, vitae dignissim ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris ut tristique libero. Etiam vitae odio sem.
Aliquam erat volutpat. Nulla in diam sed arcu venenatis vulputate. Nam tincidunt mattis interdum. Donec libero nibh, bibendum sit amet tempus id, eleifend ut orci. Etiam at lacus in libero molestie tempor. Nulla bibendum luctus tortor nec volutpat. Aenean feugiat porta nulla, nec tristique massa sollicitudin nec. Nulla euismod odio id orci commodo posuere. Morbi tristique enim sed urna dignissim at vehicula ante cursus. Curabitur libero lacus, sodales et accumsan non, suscipit feugiat lacus. Pellentesque id tortor nulla.
Cras quis ante tristique sapien imperdiet pulvinar eget sit amet magna. Nullam commodo semper nunc, in sagittis turpis rutrum vel. Mauris venenatis rutrum gravida. Mauris viverra congue lorem a semper. Integer porta orci et arcu egestas fringilla. Suspendisse venenatis erat eget nibh luctus quis pulvinar dolor bibendum. Aliquam in dolor vel ligula mollis convallis ac vel tortor. Duis ut leo hendrerit dolor molestie imperdiet. Quisque sapien purus, fringilla iaculis scelerisque eget, feugiat vitae augue. Integer porta libero in neque dictum ornare. Suspendisse a eros libero. Mauris leo neque, accumsan in congue eu, consectetur eu neque. </div>
</div>
<!-- Logo Design page starts here -->
<div class="section navi" id="logo"> <img src="http://pirrcreatives.com/images/pirr_creatives_logo.png" width="180" height="90" class="pirrlogo"/>
<ul class="nav">
<li><a href="#homepage">•</a></li>
<li>logo design</li>
<li><a href="#multimedia">multimedia design</a></li>
<li><a href="#print">print design</a></li>
<li><a href="#contact">contact us</a></li>
<li><a href="#blog">blog</a></li>
</ul>
<div class="container">
<div id="logo_slides">
<div id="slides">
<div class="slides_container">
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-01.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>Double happiness. Spot the names of the wedded couple!</p>
</div>
</div>
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-02.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>Extreme skateboarding, boar style.</p>
</div>
</div>
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-03.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>Chinese Seal</p>
</div>
</div>
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-04.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>Exposure</p>
</div>
</div>
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-05.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>A wise man or a fool?</p>
</div>
</div>
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-06.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>Greenosaur = G + Dinosaur</p>
</div>
</div>
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-07.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>Irongate</p>
</div>
</div>
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-08.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>Johnson Horn</p>
</div>
</div>
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-09.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>King's Landscapers</p>
</div>
</div>
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-10.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>Kolibrie, humming bird in dutch. Logo for internal improvement project, focused to increase profitability and margin.</p>
</div>
</div>
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-11.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>The run-away shoe-skin!</p>
</div>
</div>
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-12.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>Northwest Intervention Services</p>
</div>
</div>
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-13.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>One church. One day.</p>
</div>
</div>
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-14.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>We write, and provide public relations services to the real estate industry</p>
</div>
</div>
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-15.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>Rabbit Snowboard</p>
</div>
</div>
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-16.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>Snack Box</p>
</div>
</div>
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-17.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>TennisPAL</p>
</div>
</div>
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-18.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>Vertykl</p>
</div>
</div>
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-19.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>I am a bicycle mechanic.</p>
</div>
</div>
</div>
<a href="#" class="prev"><img src="http://pirrcreatives.com/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a> <a href="#" class="next"><img src="http://pirrcreatives.com/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a> </div>
<img src="http://pirrcreatives.com/img/example-frame.png" width="739" height="341" alt="Example Frame" class="frame"> </div>
</div>
</div>
<!-- Multimedia Design page starts here -->
<div class="section navi" id="multimedia"> <img src="http://pirrcreatives.com/images/pirr_creatives_logo.png" width="180" height="90" class="pirrlogo"/>
<ul class="nav">
<li><a href="#homepage">•</a></li>
<li><a href="#logo">logo design</a></li>
<li>multimedia design</li>
<li><a href="#print">print design</a></li>
<li><a href="#contact">contact us</a></li>
<li><a href="#blog">blog</a></li>
</ul>
<div class="container">
<div id="multimedia_slides">
<div id="slides_two">
<div class="slides_container">
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-01.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>Double happiness. Spot the names of the wedded couple!</p>
</div>
</div>
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-02.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>Extreme skateboarding, boar style.</p>
</div>
</div>
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-03.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>Chinese Seal</p>
</div>
</div>
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-04.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>Exposure</p>
</div>
</div>
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-05.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>A wise man or a fool?</p>
</div>
</div>
</div>
<a href="#" class="prev"><img src="http://pirrcreatives.com/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a> <a href="#" class="next"><img src="http://pirrcreatives.com/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a> </div>
<img src="http://pirrcreatives.com/img/example-frame.png" width="739" height="341" alt="Example Frame" class="frame"> </div>
</div>
</div>
<!-- Print Design page starts here -->
<div class="section navi" id="print"> <img src="http://pirrcreatives.com/images/pirr_creatives_logo.png" width="180" height="90" class="pirrlogo"/>
<ul class="nav">
<li><a href="#homepage">•</a></li>
<li><a href="#logo">logo design</a></li>
<li><a href="#multimedia">multimedia design</a></li>
<li>print design</li>
<li><a href="#contact">contact us</a></li>
<li><a href="#blog">blog</a></li>
</ul>
<div class="container">
<div id="multimedia_slides2">
<div id="slides_three">
<div class="slides_container">
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-01.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>Double happiness. Spot the names of the wedded couple!</p>
</div>
</div>
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-02.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>Extreme skateboarding, boar style.</p>
</div>
</div>
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-03.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>Chinese Seal</p>
</div>
</div>
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-04.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>Exposure</p>
</div>
</div>
<div class="slide"> <img src="http://pirrcreatives.com/images/logo/logo_design-05.jpg" width="570" height="270" alt="Slide 1" />
<div class="caption" style="bottom:0">
<p>A wise man or a fool?</p>
</div>
</div>
</div>
<a href="#" class="prev"><img src="http://pirrcreatives.com/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a> <a href="#" class="next"><img src="http://pirrcreatives.com/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a> </div>
<img src="http://pirrcreatives.com/img/example-frame.png" width="739" height="341" alt="Example Frame" class="frame"> </div>
</div>
</div>
<!-- Contact Us page starts here -->
<div class="section navi" id="contact"> <img src="http://pirrcreatives.com/images/pirr_creatives_logo.png" width="180" height="90" class="pirrlogo"/>
<ul class="nav">
<li><a href="#homepage">•</a></li>
<li><a href="#logo">logo design</a></li>
<li><a href="#multimedia">multimedia design</a></li>
<li><a href="#print">print design</a></li>
<li>contact us</li>
<li><a href="#blog">blog</a></li>
</ul>
<div class="content"> Under construction </div>
</div>
<!-- Blog page starts here -->
<div class="section navi" id="blog"> <img src="http://pirrcreatives.com/images/pirr_creatives_logo.png" width="180" height="90" class="pirrlogo"/>
<ul class="nav">
<li><a href="#homepage">•</a></li>
<li><a href="#logo">logo design</a></li>
<li><a href="#multimedia">multimedia design</a></li>
<li><a href="#print">print design</a></li>
<li><a href="#contact">contact us</a></li>
<li>blog</li>
</ul>
<div class="content"> Under construction </div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://pirrcreatives.com/js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
/*
if you want to use one of the easing effects:
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1500,'easeInOutExpo');
*/
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
});
</script>
</body>
</html>