Grow your CSS skills. Land your dream job.

Need help creating a space between header and menu….

  • # January 29, 2013 at 10:55 pm

    I’d like to create a small gap in between the black header background and the menu area on [this site](I’d like to create a small gap in between the black header background and the menu area on this site. Any thoughts on how to do this?

    http://noahsdad.com/test “test”). Any thoughts on how to do this?

    Thanks!

    # January 29, 2013 at 11:05 pm

    Just give the navigation div a top margin

    margin:10px 0 0 0;

    or

    margin-top:10px;

    the div here is #nav

    # January 29, 2013 at 11:06 pm

    Thanks so much.

    2 follow up questions. How can I get a little bit more black box so it gives the logo a little room…as well as fix the search box to not get cut off?

    Thanks!

    # January 29, 2013 at 11:10 pm

    Also what about giving the header a bottom margin? Does that basically do the same thing?

    # January 29, 2013 at 11:10 pm

    > How can I get a little bit more black box so it gives the logo a little room.as well as fix the search box to not get cut off?

    give it some padding. Think about it this way, if there are two houses, margin is the distance between the two, whereas padding is the thickness of their walls.

    The padding is added to the width so make sure you adjust other values accordingly. For instance, if there’s a div of with 100px and a padding of 10px; the total width it occupies = 100 + 10 + 10 = 110px

    # January 29, 2013 at 11:11 pm

    > Also what about giving the header a bottom margin? Does that basically do the same thing?

    Yes

    # January 29, 2013 at 11:11 pm

    Thanks so much! That’s a GREAT explanation. Thanks for taking the time to teach me…I’m learning. :)

    # January 29, 2013 at 11:13 pm

    > That’s a GREAT explanation. Thanks for taking the time to teach me…I’m learning. :)

    I’m a learner too :-) (I have more questions than answers). And this site is great for getting quick responses.

    # January 29, 2013 at 11:16 pm

    Thanks. I got the space between the two ‘houses’…now I’m just trying to make things look right….. :)

    # January 29, 2013 at 11:30 pm

    If you run into complications, let me know. There are several ways to do this. For instance, you could simply give the search box container a right margin(its distance from the wall of its container), instead of giving the main container some padding.

    # January 29, 2013 at 11:33 pm

    Thanks!:)

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

You must be logged in to reply to this topic.

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