Question

Been trying to get the Jquery plugin Easy Slider 1.7 working. been messing about with it and got the content area the way i want it but the buttons for next/prev are floating at top of page.

Heres the code: HTML Slider

<div id="slider_container">
                <div  id="slider">
                    <ul>                
                        <li>
                            <h4>Google Adwords</h4>
                            <p>Lorem ipsum dolar sit ami....</p>
                        </li>
                        <li>
                            <h4>Domain Name</h4>
                            <p>Lorem ipsum dolar sit ami....</p>
                        </li>
                    </ul>
                </div>
            </div>

Jquery:

<script type="text/javascript">
$(document).ready(function(){   
    $("#slider").easySlider({
        auto: true,
        continuous: true,
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',  
        nextText: 'Next' 
    });
});
</script>

CSS:

 #slider_container{
        width: 450px;
        height: 210px;
        margin: 10px auto;
        background: url(../img/sliderweb_bg.png) no-repeat;
    }

        #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:524px;
            height:200px;
            overflow:hidden; 

            }   
        #prevBtn, #nextBtn,
        #slider1next, #slider1prev{ 
            display:block;
            width:77px;
            height:69px;
            position:absolute;
            left:-30px;
            top:71px;
            z-index:1000;
            }   
        #nextBtn, #slider1next{ 
            left:696px;
            }                                                       
        #prevBtn a, #nextBtn a,
        #slider1next a, #slider1prev a{  
            display:block;
            position:relative;
            width:77px;
            height:69px;
            background:url(../img/sliderweb_left.png) no-repeat 0 0;    
            }   
        #nextBtn a, #slider1next a{ 
            background:url(../img/sliderweb_right.png) no-repeat 0 0;   
            }   

        /* numeric controls */  

        ol#controls{
            margin:1em 0;
            padding:0;
            height:28px;    
            }
        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;}

Hope I can get this sorted want this to work 🙂

Speak soon and thanks in advance 🙂
Joe
/* // Easy Slider */

Answer 1

update this

#slider_container{
        position:relative;
        width: 450px;
        height: 210px;
        margin: 10px auto;
        background: url(../img/sliderweb_bg.png) no-repeat;
}