Grow your CSS skills. Land your dream job.

anythingSlider nav not working

  • # May 17, 2010 at 10:01 pm

    Hello.
    Just want to say I love the slider thus far. Great work!
    I’m not sure if I’m missing something here but for some reason the numbered links are not clickable at all. The page I’m working on is located here: http://flywheeldesign.com/swanky/portfolio.php
    As you can see I moved some things around but for the most part everything is the same as the demo. Any help would be appreciated.

    Here’s my CSS:

    Code:
    .anythingSlider { width: 666px; height: 400px; position: relative; margin: 0 auto 150px ; }
    .anythingSlider .wrapper { width: 535px; overflow: hidden; height: 400px; margin: 0 65px; position: absolute; top: 0; left: 0; }

    /* Width below is max for Opera */
    .anythingSlider .wrapper ul { width: 32700px; list-style: none; position: absolute; top: 50px; left: 0; margin: 0; }
    .anythingSlider ul li { float: left; padding: 0; width: 535px; margin: 0; text-align:center;}
    .anythingSlider .arrow { display: block; height: 26px; width: 666px; position: absolute; top: 65px; cursor: pointer; }
    .anythingSlider .forward { margin:200px 0 0 0;float:right; cursor: pointer;}
    .anythingSlider .back { margin:200px 0 0 0;float:left;cursor: pointer;}

    #thumbNav { margin-top: 10px; text-align: center;font-family:Tahoma, Arial, Helvetica, sans-serif; }
    #thumbNav a { color: #867866; font-size: 14px; font-family:Tahoma, Arial, Helvetica, sans-serif; display: inline-block; padding: 5px; margin:0;text-align: center; cursor: pointer;}
    #thumbNav a:hover { color: #F51361; }
    #thumbNav a.cur { color: #F51361; }

    #start-stop { color: white; padding: 2px 5px; width: 40px; text-align: center; position: absolute; right: 45px; top: 323px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px;visibility: hidden; }
    #start-stop.playing { background-color: red; }
    #start-stop:hover { background-image: none; }

    and the script for the portfolio.php page:

    Code:

    Thanks ahead of time!
    Eric

    # May 18, 2010 at 9:31 am

    Change your #thumbNav css to:

    Code:
    #thumbNav {
    font-family:Tahoma,Arial,Helvetica,sans-serif;
    left:100px;
    margin-top:10px;
    position:absolute;
    text-align:center;
    top:0;
    }
    # May 18, 2010 at 9:44 am

    Works like a charm now. Thanks! You have to love those little CSS quirks.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".