Grow your CSS skills. Land your dream job.

Slight snag

  • # August 16, 2010 at 11:27 am

    On my web site, I have a few photographs and instead of using a pre-built gallery I decided to do one on my own.

    So I have 20 photographs laid out as thumbnails and each one links to a hidden <div> This works excellently but for one snag that I can’t for the life of me figure out.

    When the hidden div shows with larger image I have a short description which is all fine and dandy as it fits neatly and pushes the navigation down as expected. But, if I have a longer description the hidden div does not push the footer of the page down instead overflows above it. Here is CSS for it:

    #photography1 {
    margin: 17px;
    width: 680px;
    position: absolute;
    top: 113px;
    z-index: 1;
    visibility: hidden;
    }

    Using a show/hide generated javascript by Dreamweaver, it works fine.

    view site at http://www.magiccamera.com/hiddenproblem.html I’ve stripped out most of the other elements just to demonstrate more clearly my issue.

    Thanks and appreciate any feed back on this.

    # August 16, 2010 at 11:44 am

    I think your problem is the "position: absolute;" if you remove that you should see a difference.

    # August 16, 2010 at 11:58 am

    Ummm looks like I finally figured it out, has a lot to do with position whether it be relative or absolute and how the initial container with the thumbnails is coded too.

    Doh!

    But do look at the issue anyway, maybe what I have done is just a fix or might not work properly with IE.

    # August 16, 2010 at 12:03 pm

    Yeah Jamy_za it has very much to do with the positioning attribute. Thanks for your input.

    # August 16, 2010 at 12:15 pm

    However one problem solved in this case begats another one, one that I think I can control. Again thanks for the input, it has put me on the correct path of best practices.

    # August 16, 2010 at 1:35 pm

    No problem.
    Feel free to update your ‘hiddenproblem.html’ page – and let us know – if you have any other problems.

    # August 16, 2010 at 3:40 pm

    Cheers mate.

    Right now I am going to leave everything for now and just not write too long a description. However, I do intend to pull it all apart and put it back together piece by piece and possibly try a different method.

    But the position attribute is certainly the culprit.

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

You must be logged in to reply to this topic.

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