Hi,
You seem to have copied the demo pages css rather than just the css for the easy slider:)
You should also float those elements rather than use relative positioning because relative doesn’t move anthing ans shouldn’t be used for pushing things around the page because it leaves gaps everywhere. relative position only moves things visually but they actually always take up their original space in the flow. they just appear to be somewhere else but all elements on the page don;t think the element has moved.
Use floats and not absolute positioning so that the flow of the page is maintained.
Here is a quick re-jig that shows the numbers now displaying correctly.
<!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>Cuso Design</title>
<link href="cusostyles.css" rel="stylesheet" type="text/css" />
<link href="slider.css" rel="stylesheet" type="text/css" />
<style>
@charset "UTF-8";
body {
margin:0;
padding:0;
}
#Master {
width: 990px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
left: 0px;
top: 0px;
}
#Main1 {
position: relative;
min-height: 820px;
width: 990px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
overflow: hidden;
}
#Header1 {
position:relative;
left:0px;
top:0px;
width:990px;
height:90px;
z-index:100;
overflow: hidden;
background-image: url(http://www.cusodesign.com/Images/cuso-header.gif);
}
#navbar {
position: absolute;
height: 25px;
width: 455px;
left: 489px;
top: 59px;
}
#Footer1 {
position:absolute;
left:0px;
top:590px;
width:990px;
height:227px;
z-index:2;
background-image: url(http://www.cusodesign.com/Images/Cuso-footer.jpg);
}
#Master #navbar a {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
color: #000;
text-decoration: none;
font-weight: normal;
display: block;
height: 25px;
width: 90px;
float: left;
line-height: 32px;
text-align: center;
}
#Master #navbar a:hover {
text-decoration: none;
background-image: url(http://www.cusodesign.com/Images/navbutton.png);
}
#main1bg {
float:left;
height: 265px;
width: 397px;
margin:20px 0 0 4px;
background-image: url(http://www.cusodesign.com/Images/quote-box.gif);
display:inline;
}
#Hometext {
position: absolute;
height: 147px;
width: 990px;
left: 0px;
top: 408px;
}
#contacttext {
position: absolute;
height: 147px;
width: 428px;
left: 0px;
top: 408px;
}
#Main1 h1 {
font-family: "Times New Roman", Times, serif;
font-size: 19px;
font-style: normal;
font-weight: 100;
margin-top: 90px;
margin-left: 60px;
}
#flash {
position: absolute;
height: 284px;
width: 500px;
left: 469px;
top: 127px;
overflow: visible;
background-color: #999999;
}
#contactform {
position: absolute;
height: 375px;
width: 427px;
left: 502px;
top: 213px;
overflow: visible;
}
#thankyoutext {
position: absolute;
height: 375px;
width: 427px;
left: 497px;
top: 199px;
overflow: visible;
}
#slidewrap {
width: 500px;
float:left;
margin:25px 0 0 25px;
}
#slider {
position: relative;
height: 200px;
width: 500px;
overflow: hidden;
}
p {
margin-top: -10px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
h2 {
font-size: 15px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #333;
margin: 10px;
padding: 5px;
font-weight: normal;
}
h3 {
margin-left: 10px;
margin-top: 15px;
font-size: 14px;
}
#footertext {
position: absolute;
height: 224px;
width: 500px;
left: 10px;
top: 2px;
}
#footercontact {
position: absolute;
height: 219px;
width: 274px;
left: 224px;
top: 1px;
}
a:link {
text-decoration: none;
color: #333;
}
a:visited {
text-decoration: none;
color: #333;
}
a:hover {
text-decoration: none;
color: #F93;
}
a:active {
text-decoration: none;
}
.orangeglow {
background-image: url(http://www.cusodesign.com/Images/navbutton.png);
}
/*........................................................*/
#slider img {
border:none;
}
/* image replacement */
.graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next {
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
/* // image replacement */
/* Easy Slider */
#slider ul, #slider li, #slider2 ul, #slider2 li {
margin:0;
padding:0;
list-style:none;
}
#slider2 {
margin-top:1em;
}
#slider li, #slider2 li {
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:500px;
height:200px;
overflow:hidden;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next {
left:520px;
}
#prevBtn a, #nextBtn a, #slider1next a, #slider1prev a {
display:block;
position:relative;
width:30px;
height:77px;
background:url(file:///Macintosh%20HD/Users/robertaris/Downloads/easyslider1.7/images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #slider1next a {
background:url(file:///Macintosh%20HD/Users/robertaris/Downloads/easyslider1.7/images/btn_next.gif) no-repeat 0 0;
}
/* numeric controls */
ol#controls {
margin:1em 0;
padding:0;
height:28px;
clear:both;
}
ol#controls li {
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a {
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a {
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
outline:none;
}
#slider ul, #slider li {
margin:0;
padding:0;
list-style:none;
}
#slider, #slider li {
width:500px;
height:200px;
overflow:hidden;
}
span#prevBtn {
}
span#nextBtn {
}
/* // Easy Slider */
</style>
<script type="text/javascript" src="http://www.cusodesign.com/jquery.js"></script>
<script type="text/javascript" src="http://www.cusodesign.com/easySlider1.7.js"></script>
<script type="text/javascript">$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true
});
});
</script>
</head>
<body>
<div id="Master">
<div id="Main1">
<div id="Header1">
<div id="navbar"><a href="index.html">Home</a> <a href="work.html" class="orangeglow">Work</a> <a href="blog.html">Blog</a> <a href="about.html">About</a> <a href="contact.html">Contact</a></div>
</div>
<div id="main1bg">
<h1>A selection of our most recent work..." </h1>
</div>
<div id="slidewrap">
<div id="slider">
<ul>
<li><img src="http://www.cusodesign.com/Images/slide1.jpg" width="500" height="200" alt="slide1" /></li>
<li><img src="http://www.cusodesign.com/Images/slide2.jpg" width="500" height="200" alt="slide2" /></li>
<li><img src="http://www.cusodesign.com/Images/slide3.jpg" width="500" height="200" alt="slide3" /></li>
</ul>
</div>
</div>
<div id="Hometext">
<h2></h2>
</div>
<div id="Footer1">
<div id="footertext">
<h3>Connect</h3>
<p><a href="mailto:robert@cusodesign.com" target="_blank">E-Mail</a><br />
<a href="http://twitter.com/CUSODESIGN" target="_blank">Twitter</a><br />
<a href="http://www.facebook.com/pages/manage/#!/pages/Cuso-Design/101341879904661" target="_blank">Facebook</a></p>
<h3>Navigation</h3>
<p><a href="index.html">Home</a><br />
<a href="work.html">Work</a><br />
<a href="blog.html">Blog</a><br />
<a href="about.html">About</a><br />
<a href="contact.html">Contact</a></p>
<div id="footercontact">
<h3>Services</h3>
<p><a href="webdesign.html">Web Design</a><br />
<a href="print.html">Print</a><br />
<a href="photography.html">Photography</a><br />
</p>
<h3>Additional Info</h3>
<p><a href="faq.html">Frequently Asked Questions</a><br />
<a href="termsofservice.html">Terms of Service</a><br />
<a href="privacystatement.html">Privacy Statement </a></p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You still have the wrong paths to the previous and next buttons.
background:url(file:///Macintosh%20HD/Users/robertaris/Downloads/easyslider1.7/images/btn_prev.gif) no-repeat 0 0;
Although you aren’t using them anyway but the code should be fixed or removed.
