Grow your CSS skills. Land your dream job.

Problem with Image/Content Slider

  • # October 13, 2009 at 7:16 pm

    Hey all,
    I know that this half has to do with javascript, but I am not sure what is causing my problem. The css or script.
    I am trying to use a pretty standard, easy jquery content/image slider into my site.
    In my css, I have an image specified as being the slider background and two arrow images for the left and right controls. The problem is that those are not showing up, but the content images do slide in when you blindly search and find the areas that should be the left and right arrows. In other words, you do not see the arrows, but you can find where they should be because the mouse arrow turns into the pointed "link" finger icon when you hover over the area. I hope I explained this good enough. Here is my html:

    Code:

    Here is my CSS:

    Code:
    #main {
    position:relative;
    background: url(“portfoliomainoutline.png”);
    height:600px;
    width:960px;
    overflow:hidden;
    }

    #content{
    position:relative;
    background: url(“portfoliomainbg.jpg”) repeat-x;
    height:580px;
    width:884px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    top:10px;
    overflow:hidden;
    }

    #slideshow {
    margin:0 auto;
    width:560px;
    height:400px;
    background:url:(“sliderbg.jpg”)no-repeat 0 0 ;
    position:relative;
    top:180px;

    }

    #slideshow #slidesContainer {
    margin:0 auto;
    width:560px;
    height:400px;
    overflow:auto; /* allow scrollbar */
    position:relative;
    }

    #slideshow #slidesContainer .slide {
    margin:0 auto;
    width:540px; /* reduce by 20 pixels to avoid horizontal scroll */
    height:400px;
    }

    .control {
    display:block;
    width:16px;
    height:16px;
    text-indent:-10000px;
    position:absolute;
    cursor: pointer;
    }
    #leftControl {
    top:0;
    left:0;
    background:transparent url:(“arrow_left.png”) no-repeat 0 0;
    }
    #rightControl {
    top:0;
    right:0;
    background:transparent url:(“arrow_right.png”) no-repeat 0 0;
    }

    And here is my script:

    Code:

    Can anyone see what might be causing this?

    # October 14, 2009 at 2:49 am

    As always, without a live link to work with there’s a certain amount of guesswork involved.

    Try giving #leftControl and #rightControl a height and width in pixels.

    # October 14, 2009 at 8:25 pm

    Hmmm, well I tried giving the actual left and right controls width and height and it did not help. When I type in the URLs of the images directly, they do come up. Here is the link to the demo slider that I am trying to use. In his code,there isn’t a specified height or width to his arrows. He specifies it under (.control) like I did at first. http://sixrevisions.com/demo/slideshow/final.html

    And here is the live link that I am trying this in: http://www.preeminentproductions.com/portfolio.php
    Thanks!

    # October 15, 2009 at 4:17 am

    Took a little while to track it down when what I should have done was go straight to the validator http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.preeminentproductions.com%2Fportfolio.php

    Code:
    background:transparent url:(“arrow_right.png”) no-repeat 0 0;

    should be:

    Code:
    background:transparent url(“arrow_right.png”) no-repeat 0 0;

    etc.

    # October 15, 2009 at 8:07 pm

    Hmm, well I have been doing the url that way since day one. I have noticed that some do not do it that way and was wondering what the deal is. Unfortunately my work desktop computer just crashed and I have no way to try this just yet. I will post a reply once I am back up and running. Thanks so much for taking the time to look at this for me!

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

You must be logged in to reply to this topic.

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