Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript jquery, css slideshow help

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #26803
    seandey
    Member

    Hi there, i am currently working on a clients website and have come to a hault due to a minor problem.

    Have a look here http://www.seandey.co.uk/clients/planet/two/

    I want the jquery slideshow to be in the center of my slideshow div.

    Here is the css:

    /* slideshow */

    #slidewrap {
    width: 760px;
    position: relative;
    padding: 20px 20px 20px 20px;
    background: url(images/slide_bg.jpg);
    }

    div#slideshow {
    width: 740px; height: 250px; padding: 0px 0 0 0px;
    overflow: scroll; /* Allows the slides to be viewed using scrollbar if Javascript isn’t available */
    position: relative; z-index: 5;
    margin-left: auto ;
    margin-right: auto ;

    }

    I tried to post the html but it never showed up….

    Could someone please help me out?

    Thanks
    Sean

    #76137
    cybershot
    Participant

    It looks like you didn’t put in the styles for the slides div. Do you have firebug for firefox? It is a must have. Add these rules and see if it works

    #slidewrap {
    width: 760px;
    background: url(images/slide_bg.jpg);
    }

    div#slideshow {
    width: 740px; height: 250px; padding: 0px 0 0 0px;
    overflow: scroll; /* Allows the slides to be viewed using scrollbar if Javascript isn’t available */
    z-index: 5;
    }

    #slides {
    height:216px;
    width:740px;
    margin:20px;
    padding:0;
    }

    #76051
    seandey
    Member

    Thanks, that has sorted it but there is still a minor problem with the right side. There is more than needed. It dont line up with the header image as you can see.

    Here have a look: http://www.seandey.co.uk/clients/planet/two/

    And once again here is the css:

    /* slidewrapper */

    #slidewrap {
    width: 700px;
    background: url(images/slide_bg.jpg);
    }

    div#slideshow {
    width: 740px; height: 250px; padding: 0px 0 0 0px;
    overflow: scroll; /* Allows the slides to be viewed using scrollbar if Javascript isn’t available */
    z-index: 5;
    }

    #slides {
    height:216px;
    width:720px;
    padding:0;
    }

    Thanks
    Sean

    #76052
    seandey
    Member

    Updated now, please have another look:

    /* slidewrapper */

    #slidewrap {
    width: 760px;
    background: url(images/slide_bg.jpg);
    }

    div#slideshow {
    width: 740px; height: 250px; padding: 0px 0 0 0px;
    overflow: scroll; /* Allows the slides to be viewed using scrollbar if Javascript isn’t available */
    z-index: 5;
    }

    #slides {
    height:216px;
    width:720px;
    margin:20px
    padding:0;
    }

    http://www.seandey.co.uk/clients/planet/two/

    Thanks

    #76053
    seandey
    Member

    Figured it out, added some padding.

    Thanks for your help.

    Sean

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.