Coinslida jQuery - CSS問題

我正在使用jQuerys Coinslida庫。Coinslida jQuery - CSS問題

加載時沒有問題。但是我把它定位在正確的位置有點麻煩。

我的HTML/CSS列在下面。

<!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>The Picturebook Studio Ltd.</title> 
<!--[if IE]> 
<style type="text/css" media="screen"> 
body {behavior: url(includes/csshover.htc);} 

</style> 
<![endif]--> 
<link href="css/styles.css" rel="stylesheet" type="text/css" /> 

<link rel="stylesheet" href="css/coin-slider-styles.css" type="text/css" /> 

<script src="js/cufon-yui.js" type="text/javascript"></script> 
<script src="js/Kozuka_Gothic_Pro_OpenType_400-Kozuka_Gothic_Pro_OpenType_700.font.js" type="text/javascript"></script> 

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script src="js/coin-slider.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    Cufon.replace('li'); 
    Cufon.replace('h1'); 
    Cufon.replace('p'); 
    Cufon.replace('ol li'); 
</script> 
</head> 

<body> 
<?php include('includes/header.php'); ?> 
<div id="logo"> 
    <img src="images/logo.png" alt="The Picturebook Studio Ltd" /> 
</div> 

<div id="content"> 
    <h1>Welcome to the picturebook studio limited</h1> 
    <h1>We are an innovative company based in Northern England</h1> 

    <p class="whiteParagraph"><b>We employ a team of in house professionals which include:</b></p> 
     <ol> 
      <li>photographers</li> 
      <li>videographers</li> 
      <li>sound engineers</li> 
      <li>graphic designers</li> 
      <li>web designers</li> 
     </ol> 

    <p class="whiteParagraph">We provide the following 'unique' services :</p> 

    <ol> 
     <li class="gold">photography 
      <ul class="white"> 
       <li>working exclusively with models, actors &amp; presenters</li> 
      </ul> 
     </li> 
     <li class="gold">coffee table books 
      <ul class="white"> 
       <li>graphistudio wedding albums &amp; story books</li> 
      </ul> 
     </li> 
     <li class="gold">video/film production 
      <ul class="white"> 
       <li>weddings, pr, corporate, commercial &amp; training</li> 
      </ul>  
     </li> 
     <li class="gold">audio production 
      <ul class="white"> 
       <li>music &amp; voice over</li> 
      </ul> 
     </li> 
     <li class="gold">graphic design 
      <ul class="white"> 
       <li>pr posters &amp; business stationery</li> 
      </ul> 
     </li> 
     <li class="gold">web design</li> 
     </ol>    
</div> 

<div id="gallery"> 
    <div id='coin-slider'> 
    <a href="img01_url" target="_blank"> 
     <img src='images/easy.jpg' > 
     <span>Description for img01</span> </a> 
    <a href="imgN_url"> 
     <img src='images/hassleho.jpg' > 
     <span>Description for imgN</span></a> 
    </div> 
</div> 

<script> 
    $(document).ready(function() { 
     $('#coin-slider').coinslider(); 
    }); 
</script> 

</body> 
</html>

CSS ....

/* Gallery */ 
#gallery { 
    background: transparent; 
    position: relative; 
    top: 265px; 
    left: 88px; 
    /*width: 555px;*/ 
    /*height: 550px; */ 
} 

/* 
    Coin Slider jQuery plugin CSS styles 
    http://workshop.rs/projects/coin-slider 
*/ 


.coin-slider { overflow: hidden; zoom: 1; } 
.coin-slider a{ text-decoration: none; outline: none; border: none; } 

.cs-buttons { font-size: 0px; padding: 10px; float: left; } 
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; } 
.cs-active { background-color: #B8C4CF; color: #FFFFFF; } 

.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; } 

.cs-prev, 
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

當我加載頁面時，coinslida庫被加載在頁面最右側的..如果需要的話。任何人都可以指出我正確的方向來解決這個問題嗎？

一個完整的工作示例是：http://www.stuartblackett.com/picturebook

感謝

來源

2011-02-28 StuBlackett