Coinslida jQuery - CSS Issue_问答_开发者_运维开发者技术经验分享

I'm using jQuerys Coinslida Library.

Got it to load without issue. But I'm having a little trouble positioning it in the right place.

My HTML / CSS are listed below.

    <!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; }

When I load the page, the coinslida gallery is loaded on the far right of the page.. if needs be. Can anyone point me in the right direction to fix this?

A full working example is at : http://www.stuartblackett.com/picturebook

Thanks

Yes, a complete working example would help.

edit
Are you sure you want not position:absolute? Then it fits your frame.
If you use relative position, you have to consider where element appears in normal flow (without positioning). And in this case it appears on far right.