Grow your CSS skills. Land your dream job.

how to make my header/ navigation follow my slider.

  • # November 16, 2012 at 12:26 pm

    seems to be fixed, but when I look it says relative…

    http://www.detailmonopoly.com

    # November 16, 2012 at 12:32 pm

    I don’t understand what are you expecting it to do and when?

    # November 16, 2012 at 12:36 pm

    my header seems to be fixed (position) I want it to be relative to the slider images. So the header isn’t in a weird spot.

    # November 16, 2012 at 1:53 pm

    Slight misunderstanding of what display: relative, means me thinks take a look at a css reference about the display property things should become a little clearer

    # November 16, 2012 at 1:55 pm

    I still don’t get it…it looks fine.

    Your logo / tabs are stopping it from moving left if that’s the issue.

    # November 16, 2012 at 2:05 pm

    If I re-size the window the header doesn’t move with the slider.

    # November 16, 2012 at 2:59 pm

    He wants the logo to stay in the same position in relation to the image carosel, when the window gets narrower, however looking at the DOM simplest way I can think of is to wrap another div around the header and the slider and center that using the margin: 0 auto;

    That or drop the logo’s div into the slider’s div and use absolute to position it as it would be normally.

    Eitherway feels like its a bit hacked. And the second won’t work cus I just noticed the overflow hidden

    # November 16, 2012 at 3:18 pm

    yes! thats what I was trying to say haha!

    # November 16, 2012 at 3:59 pm

    try adding or changes these pieces of css

    #header.gallery {
    width: 1020px; /* Same width as the slider has */
    }

    #header-logo {
    width: auto;
    margin-left: 130px;
    }

    #tabs {
    right: 0;
    margin-left: auto;
    }

    # November 16, 2012 at 4:11 pm

    ahhh thanks so much!

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

You must be logged in to reply to this topic.

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