Treehouse: Grow your CSS skills. Land your dream job.

css position over jquery innerfade?

  • # February 10, 2010 at 2:42 pm

    Okay, this might be more CSS than jquery but this is my question. How would I be able to float the main nav over the innerfade.js plugin? The website features stunning black and white photography and I would like to float the navigation to the right over the rotating images. Is this possible? I’m including an attachment that might help you understand. Thanks.

    *this is a post from the javascript troubleshooting section*

    # February 10, 2010 at 3:12 pm

    well i have done similar thins before so i guess its possible. But without testing your code i cant be sure if i could find a solution. If you could provide a code it would be very helpful

    # February 10, 2010 at 6:38 pm


    okay, here is the website test, i just want to figure out how to add the main nav over the innerfade js plugin. The innerfade images are wrapped in the banner div.

    let me know if you have any suggestions, reference the above image to see what i want to do.

    # February 12, 2010 at 6:10 pm

    Sorry for not posting sooner. Here is what i came up with. First i made an little nav to play with (id=site_nav):

    And gave some basic css rules:

    #site_nav{margin:0; padding:0; position:absolute; z-index:1000; right:0; bottom:70px}

    And added one rule to existing css rule:

    #banner { height: 426.50px; position:relative}

    And amazingly everything worked in my computer

    jquery uses z-index to put one picture above another (or so i think). Your menu just was under everything. Just changed z-index. I reccommend to keep the number of z-index big in case you want to use more pictures. This code shoult work up to 999 pictures :).
    position:relative and position:absolute was just for positioning purpose. And other styling is now yours to make. I hope it was helpful.

    Oh yeah i forgot to mention one thing i found in your css file. You had a comment:
    /* tables still need ‘cellspacing="0"’ in the markup */

    Im not good working with tables but if im right using just padding:0 is the same thing. Its should work as well as cellspacing. But if im not correct then someone esle please correct me.

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

You must be logged in to reply to this topic.