How do I float arrows and bullet points inline for JQUERY content slider with CSS?
===

Need help aligning some elements in css. Currently have a small content slider that will display simple lists, like news posts etc. Everything runs fine, I just need help aligning the arrows and pagination points. I'd like the bullet points in the middle of each arrow.

This is what it currently looks like -> http://www.garyrevell.co.uk/screenshot_01.jpg

---------------------

This is my HTML + CSS 

     <!--START DEALS-->
    
     <div class="box-deals">
     
     <h1> Latest Deals </h1>
    <hr>
		
        <article>
		
		<div id="slider1">
												<div class="viewport">
							<ul class="overview">
							
								<li>
                                
                                <div class="dealimg"><img src="images/blank-logo.jpg" width="70" height="70" alt="feature-img"></div>
                                
                                <div class="dealtitle">Deal Title Here</div>
                                
                                <div class="deal-des">Mon - Thur, Sat only specific text here</div>
                                
                                <p> <a href="#">Login</a> or <a href="#">signup</a> to get this deal </p>
                                
                              
	</li>
    
    <li>
                                
                                <div class="dealimg"><img src="images/blank-logo.jpg" width="70" height="70" alt="feature-img"></div>
                                
                                <div class="dealtitle">Deal Title Here</div>
                                
                                <div class="deal-des">Mon - Thur, Sat only specific text here</div>
                                
                                <p> <a href="#">Login</a> or <a href="#">signup</a> to get this deal </p>
                                
                              
	</li>
								
								
								
															
							</ul>
						</div>
                        
                        <a class="buttons prev" href="#">left</a>

						<a class="buttons next" href="#">right</a>
                        
                        <ul class="pager">
							<li><a rel="0" href="#" class="pagenum active">1</a></li>
							<li><a rel="1" href="#" class="pagenum">2</a></li>
							
						</ul>
                        
                       

						
						
					</div>	
					
						
		</article>
       
        
       
		
	</div><!--END DEALS-->

This is my CSS

    /* Slider-Bullets*/

    #slider1 .pager { overflow:hidden; list-style: none; clear: both; margin: 0 0 0 45px; }
    
    /*Normal Style*/
    
    #slider1 .pager li { float: left;  display: block; 
    
    }
    
    #slider1 .pager a { width: 15px;
    height: 15px;
    background:url(../images/bullet-norm.png); background-position: left top; background-repeat:no-repeat;
    float: left;
    text-indent: -4000px;
    position: relative;
    margin-left: 3px;
    color: transparent;
    display:inline;
    clear: left;
    
    
    
    
    }
    
    #slider1 .pager a:hover{
    	background-position: 0 50%;
    	width:15px;
    	height:15px;
    	float: left; 
    	text-indent: -4000px; 
    	position:relative;
    	margin-left:3px;
    	
    	color:transparent;
    }
    
    /*Active Style*/
    
    #slider1 .pager .active { color: #fff; background-image:url(../images/bullet-selected.png); } /*CURRENT IMAGE HERE*/
    #slider1 .overview { list-style: none; position: absolute; width: 240px; left: 0 top: 0; }
    #slider1 .overview li{ float: left; margin: 0 20px 0 0;  width: 236px;
    
    
    }
    
    /* Tiny Carousel */
    #slider1 { height: 1%; overflow:hidden; padding: 0 0 10px;   }
    
    #slider1 .viewport { float: left; width: 240px; min-height: 190px; overflow: hidden; position: relative; }
    
    #slider1 .buttons { background:url("../images/buttons.png") no-repeat scroll 0 0 transparent; display: block; margin: 30px 10px 0 0; background-position: 0 -38px; text-indent: -999em; float: left; width: 39px; height: 37px; overflow: hidden; position: relative; }
    
    #slider1 .previous { background-position: 0 0; margin-left:5px;  }
    #slider1 .next { background-position: 0 0; left: 130px }
    #slider1 .disable { visibility: hidden; }
    
    #slider1 .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0 top: 0; }
    #slider1 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px;  width: 230px;}

Thankyou in advance.

Gary



    



 

