Forums

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

Home Forums CSS Center Align Thumbnails is Slider

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #38490
    telkins
    Participant

    Hello!

    I’m trying to center align the thumbnails below my slider…www.dev.entheos.bladv.com

    I’ve tried everything I know but I can’t seem to make it work.

    Anyone have an idea? I would really appreciate the help!

    /*


    THUMBNAIL SLIDER


    */

    #slider-img-wrapper {
    overflow: hidden;
    position: relative;
    width: 980px;
    height: 370px;
    }

    #slider img {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 3;
    width: 980px;
    height: 370px;
    display:none;
    }

    #slider img.first {
    display: block;
    }

    #slider img.current {
    z-index: 10;
    }

    #slider-navigation-container {
    width: 875px;;
    height: 60px;
    border-bottom: 1px solid #e6e6e6;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 83px;
    padding-right:22px;
    }

    #slider-navigation {
    position: relative;
    overflow: hidden;
    width: 800px;
    height: 60px;
    left: 10px;
    top: 0px;

    }

    .slider_nav_tumb {
    width: 90px;
    height: 70px;
    display: block;
    background-image: url(images/slider_nav_bg.png);
    background-repeat: no-repeat;
    padding: 7px;
    padding-top: 8px;
    }

    #slider-navigation .items {
    width: 20000em;
    position: absolute;
    left: 0px;
    }

    #slider-navigation .items div {
    float: left;
    }

    #slider-navigation .items img {
    width: 70px;
    height: 50px;
    background-color: #FFF;
    border: 1px solid #d9d9d9;
    background-repeat: no-repeat;
    padding: 3px;
    margin-right: 24px;
    }

    #slider-navigation .items img.active {
    background-color: #efefec;
    border: 1px solid #d9d9d9;
    position: relative;
    }

    .browse {
    width: 41px;
    height: 41px;
    display: block;
    position: absolute;
    }

    #left-arrow {
    left: -48px;
    top: 10px;
    float: left;
    width: 38px;
    height: 38px;
    display: block;
    background-image: url(images/slider_arrow_l.png);
    background-repeat: no-repeat;
    }

    #right-arrow {
    right: 14px;
    top: 10px;
    width: 38px;
    height: 38px;
    display: block;
    background-image: url(images/slider_arrow_r.png);
    background-repeat: no-repeat;
    }

    /*


    END THUMBNAIL SLIDER


    */

    #104330
    Paulie_D
    Member

    I suspect that this might be an issue :

    #slider-navigation .items {
    width: 20000em;
    position: absolute;
    left: 0px;
    }

    However, the div within slider-navigation (you know the one that actually holds the imagess) has not been centred in any way.

    #104331
    telkins
    Participant

    Tried editing CSS to

    #slider-navigation .items {
    width: 980px;
    position: absolute;
    }

    #slider-navigation .items div {
    float: none;
    margin:auto;
    }

    but its still not working….any ideas?
    I asked the theme’s author for advice but he didn’t want to help me.

    #104332
    Paulie_D
    Member

    Why are you positioning absolutely?

    However, set the text-align to center

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