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

    **EDIT**

    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.

    http://www.patrickeustis.com/test/

    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:

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

    And added one rule to existing css rule:

    Code:
    #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.

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