Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2013
    Posts
    22
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Need help positioning next and prev buttons

    Hello,I need help positioning to images.
    I got a responsive slideshow and I want to place the Next button in the right of the slideshow overlaying it and the Prev button in the left of the slideshow overlaying it.
    I need those buttons to be responsive too so when i resize the viewport the will still be in the left,right of the slideshow.
    On the x axis on is in the left and the other is in the right,but on the y axis both must be in the middle of the slideshow.
    And the whole slideshow is in a div with the calss "sshow" including the buttons
    This is the html:
    Code:
    <div class="sshow">
    <img class="slideb1" src="http://imageshack.com/a/img853/2941/h250.png" onmouseup="Next('ss',1);" alt="Image could not load." /> <!-- previous -->
        <img class="slideb2" src="http://imageshack.com/a/img855/1557/p1bj.png" onmouseup="Next('ss',-1);" alt="Image could not load." /> <!-- next -->
        <div id="ss" style="position:relative;" onmouseover="Pause('ss');" onmouseout="Auto('ss');" >
            <img class="dyncontent" src="http://imageshack.com/a/img35/1662/dfm8.png" alt="Image could not load." > <!-- Slideshow image1 -->
            <img class="dyncontent" src="http://imageshack.com/a/img690/3348/oz5i.png" alt="Image could not load." > <!-- Slideshow image2 -->
            <img class="dyncontent" src="http://imageshack.com/a/img837/5570/y660.png" alt="Image could not load." > <!-- Slideshow image3 -->
        </div>
    </div>
    And this is the CSS:
    Code:
    .sshow{
    	margin:0px auto;
    	width: 100%;
    	height: 100%;
    	margin-top:70px;
    	}
    	#ss{
        position:absolute;
        left:0px;
        top:0px;
        width: 100%; 
        border: 0px; 
        margin: 0px auto;
    }
    .dyncontent{
        position:absolute;
        left:0px;
        top:0px; 
        width: 100%; 
        border: 0px; 
        margin: 0px auto;
    }
    	.slideb1{
        position:absolute;
        left:5px;
    	top:400px;
        border: 0px; 
    	margin: 0px auto;
    	z-index:2;
    }
        .slideb2{
        position:absolute;
        left:1240px;
        top: 400px;
        border: 0px; 
    	margin: 0px auto;
        z-index:2;
    }

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Position .sshow relative and the next/prev elements absolute left and right, respectively. Absolute position always refers to the edges of the closest parent with relative, absolute, or fixed position, and if none, to the viewport.

  • Users who have thanked VIPStephan for this post:

    Bitzu (02-10-2014)

  • #3
    New Coder
    Join Date
    Dec 2013
    Posts
    22
    Thanks
    22
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Position .sshow relative and the next/prev elements absolute left and right, respectively. Absolute position always refers to the edges of the closest parent with relative, absolute, or fixed position, and if none, to the viewport.

    This is the html now (nothing chnaged):
    Code:
    <div class="sshow">
    <img class="slideb1" src="http://imageshack.com/a/img853/2941/h250.png" onmouseup="Next('ss',1);" alt="Image could not load." /> <!-- previous -->
        <img class="slideb2" src="http://imageshack.com/a/img855/1557/p1bj.png" onmouseup="Next('ss',-1);" alt="Image could not load." /> <!-- next -->
        <div id="ss" style="position:relative;" onmouseover="Pause('ss');" onmouseout="Auto('ss');" >
            <img class="dyncontent" src="http://imageshack.com/a/img35/1662/dfm8.png" alt="Image could not load." > <!-- Slideshow image1 -->
            <img class="dyncontent" src="http://imageshack.com/a/img690/3348/oz5i.png" alt="Image could not load." > <!-- Slideshow image2 -->
            <img class="dyncontent" src="http://imageshack.com/a/img837/5570/y660.png" alt="Image could not load." > <!-- Slideshow image3 -->
        </div>
    </div>

    This is the CSS(I changed it liek you said)
    Code:
    	.sshow{
    	margin:0px auto;
    	width: 100%;
    	height: 100%;
    	margin-top:70px;
    	}
    	#ss{
        position:relative;left:0px;top:0px; width: 100%; border: 0px; margin: 0px auto;
    }
    
    .dyncontent{
        position:absolute;left:0px;top:0px; width: 100%; border: 0px; margin: 0px auto;
    }
    	.slideb1{
        position:absolute;
        left:5px;
    	top:50%;
        border: 0px; 
    	margin: 0px auto;
    	z-index:2;
    }
        .slideb2{
        position:absolute;
        right:5px;
    	top:50%;
        border: 0px; 
    	margin: 0px auto;
        z-index:2;
    }
    The problem is that the next/prev buttons don't stay centered on the slideshow,the good part is that there is no more side scrollbar anymore(thank you for that),but the bad part is that the next/prev buttons doesn't stay on the slideshow image and they dont resizez with the slideshow at the same time.
    Please help me again.


  •  

    Tags for this Thread

    Posting Permissions

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