Thread: Slideshow width

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

    Join Date
    Sep 2012
    Posts
    26
    Rep Power
    0

    Slideshow width


    I am having trouble with the images not extending enough at larger screen widths in my fluid layout, as evidenced in the slideshow to right at this site:

    debbierking.com/hobbitnews

    I have tried using 100% for the width but that doesn't seem to work. Is the only solution to make the images bigger? I already have made them fairly large for hi-res devices. Here's the relevant code for the sidebar and the slideshow for devices 600px and larger.

    /*--------SIDEBAR------------*/

    aside .sidebar {
    clear: both;
    background-color: #efd9bb;
    background-color: rgba(217, 193, 159, .25);
    border: 1px solid #dac6ab;
    margin: 0 0 25px 0;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    }

    /*--------SLIDESHOW---------*/

    #ads { display: block; }

    #slideshow {
    display: block;
    position:relative;
    height: 200px;
    padding-bottom: 10px;
    }

    #slideshow a {
    border: none;
    position:absolute;
    left:0;
    top:0;
    z-index:8;
    }

    #slideshow img {
    height: 200px;
    width: 100%;
    }

    #slideshow a.active {
    z-index:10;
    }

    #slideshow a.last-active {
    z-index:9;
    }
  2. #2
  3. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    This may sound weird, but your image is not big enough.
    The container <aside> has a calculated width of 33% on my screen 373px.

    The problem is that your image is inside of an anchor <a> element with a position absolute. Which is taken out of the normal flow, and doesn't really bother your 33% width declaration. Instead it takes the normal width of the child element which is the image. (the image listens to the first parent with a position other than static, in this case the anchor. In a way they are pointing to eachother "what shall we do"

    So what can you do after all these words
    You should give the Anchor that is displayed a temporary position of relative. #slideshow a.active
    (edit: You do that so it stays in the normal flow, and takes up the width of 33%)

    Just for fun if you change your stylesheet and assign relative to all the anchors <a> you will see that the child (image) will take up the width correctly.

    Hope this helps,

    Ciao!


    edit: P.s. due to the fact that you have some javascript fadin going on You can do the following in your stylesheet instead:
    add
    Code:
    #slideshow{ width:100%}
    #slideshow a{width:100%;}
    Last edited by aeternus; September 24th, 2012 at 09:29 AM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Location
    London
    Posts
    21
    Rep Power
    0
    Yeah i had the same for me, agreed! Try it out buddy
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    26
    Rep Power
    0
    Thanks! I tried both of these and the solution you mentioned in your P.S. worked Thank you for your great explanation of the problem too!
  8. #5
  9. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    Originally Posted by DesignLady94
    Thanks! I tried both of these and the solution you mentioned in your P.S. worked Thank you for your great explanation of the problem too!
    No problem, I rather give a fishingpole than a fish (and thats not because fish are smelly and slippery creatures )

IMN logo majestic logo threadwatch logo seochat tools logo