SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict mari's Avatar
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question previous and next button positioning

    Hi guys,

    i have a jquery caousel on my webpage, it works fine but im confused on how to get the previous and next buttons to display either side of the carousel

    this is what it currently looks like

    http://oi53.tinypic.com/vmt5ic.jpg

    i want the buttons to display where the red dots are, they are currently displayed beneath the caousel

    here is my css

    Code:
    #wrapper {
    	margin: 0 auto;
    	width: 980px;
    }
    
    .image_carousel {
    	padding: 16px 0 10px 40px;
    }
    
    .image_carousel img {
    	border: 1px solid #fff;
    	margin: 7px;
    	float: left;
    }
    
    .image_carousel a {
    	margin: 0;
    	border: 0;
    	padding: 0;
    	float: left;
    }
    
    a.prev, a.next {
    	width: 23px;
    	height: 23px;
    	top: 50px;
    }
    
    a.prev {
    	background: url(images/left.jpg) no-repeat transparent;
    	float: left;
    }
    
    a.next {
    	background: url(images/right.jpg) no-repeat transparent;
    	float: right;
    }
    
    
    a.prev span, a.next span {
    	display: none;
    }
    
    .clearfix {
    	float: none;
    	clear: both;
    }
    
    #carousel-wrapper {
    	width: 980px;
    	margin: 0 auto;
    }
    html

    HTML Code:
    <div id="wrapper">
    	 	
        	
    <div class="image_carousel">
    	    <div id="foo2">
    	        <a href="#"><img src="images/sponsors/blank.jpg" width="134" height="125" /></a>
    	        <a href="#"><img src="images/sponsors/blank.jpg" width="134" height="125" /></a>
    	        <a href="#"><img src="images/sponsors/blank.jpg" width="134" height="125" /></a>
    	        <a href="#"><img src="images/sponsors/blank.jpg" width="134" height="125" /></a>
    	        <a href="#"><img src="images/sponsors/blank.jpg" width="134" height="125" /></a>
    	        <a href="#"><img src="images/sponsors/blank.jpg" width="134" height="125" /></a>
                    <a href="#"><img src="images/sponsors/blank.jpg" width="134" height="125" /></a>
                    <a href="#"><img src="images/sponsors/blank.jpg" width="134" height="125" /></a>
    	    </div>
    	    <div class="clearfix"></div>
    </div>
            <div id="carousel-wrapper">
    	 	<a class="prev" id="foo2_prev" href="#"><span>prev</span></a>
    		<a class="next" id="foo2_next" href="#"><span>next</span></a>
        	</div>
          
    
    
      
    </div><!--closes wrapper-->
    any ideas? help is appreciated

  2. #2
    SitePoint Enthusiast Adam Chrapkowski's Avatar
    Join Date
    Sep 2011
    Location
    Poland
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    a.prev { float: left; }
    This rule aligns the previous button to left.

    Code:
    a.next { float: right; }
    This rule aligns the next button to right.


    Code:
    a.prev, a.next { top: 50px; }
    This rule sets the vertical alignment.

  3. #3
    SitePoint Addict mari's Avatar
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Adam Chrapkowski View Post
    Code:
    a.prev { float: left; }
    This rule aligns the previous button to left.

    Code:
    a.next { float: right; }
    This rule aligns the next button to right.


    Code:
    a.prev, a.next { top: 50px; }
    This rule sets the vertical alignment.
    thanks for the tip, top:50px wasnt working before, i applied a position:relative to the class and it works now

    thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •