#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    5
    Rep Power
    0

    Divs positioning - beginner


    Hi,
    I have a jquery sliders. The slides pictures are added like this:

    <ul class="slides">
    <li><img alt="BigImage1" src="1.jpg" /></li>
    <li><img alt="BigImage2" src="2.jpg" /></li>
    <li><img alt="BigImage3" src="3.jpg" /></li>
    <li><img alt="BigImage4" src="4.jpg" /></li>
    </ul>

    I want to add a button on the bottom right to every slide. How can i add it? Can i put the img inside a div and then position another div with the button on the top? How can i do that?
    Thanks!
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    709
    Rep Power
    441
    That would be one way to do it.
    Code:
    <li><div><img alt="" src="1.jpg" /><button>My Button</button></div></li>
    ...and so on for each <li>...
    
    CSS:
    .slides div {position: relative}
    .slides button {position: absolute; bottom: 5px; right: 5px}
    That'll give you a button overlapping the picture.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    5
    Rep Power
    0
    Originally Posted by rdoyle720
    That would be one way to do it.
    Code:
    <li><div><img alt="" src="1.jpg" /><button>My Button</button></div></li>
    ...and so on for each <li>...
    
    CSS:
    .slides div {position: relative}
    .slides button {position: absolute; bottom: 5px; right: 5px}
    That'll give you a button overlapping the picture.
    Thank you! Problem solved.

IMN logo majestic logo threadwatch logo seochat tools logo