4 Replies Latest reply: Apr 11, 2011 1:00 AM by Andy Bay

Good way to give navbar top margin?

Andy Bay Apr 10, 2011 3:28 PM

Hi!

I'm struggling with a simple issue:

I have a navigation bar inside my wrapper div. I would like to give the navigation bar some top margin to push it down say 10 px from the top of the wrapper div. But the top margin is not working like I would expect.

Here is my code:

<body>
<div id="wrapper">
    <div id="navbar">
    <a href="index.htm">Home</a>
    <a href="products.htm">Products</a>
    <a href="terms.htm">Terms</a>
    <a href="shipping.htm">Shipping</a>
    <a href="about.htm">About us</a>
    <a href="contact.htm">Contact</a>
    </div>
</div>

</body>

#wrapper {
    background-color: #000066;
    min-height:600px;
}
body {
    margin: 0px;
    padding: 0px;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
}
#navbar {
    background-color: #035665;
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}
a:link {
    color: #FFFFFF;
    }
a:visited {
    color: #CCCCCC;
    }
#navbar a {
    margin-right: 8px;
    margin-left: 8px;
}

What is a good way to push my navigation bar down from the top of the wrapper div?

1. Re: Good way to give navbar top margin?

John Waller Apr 10, 2011 3:33 PM (in response to Andy Bay)

I have a navigation bar inside my wrapper div. I would like to give the navigation bar some top margin to push it down say 10 px from the top of the wrapper div.

Use margin-top.

I don't see it anywhere in what you've posted.

But the top margin is not working like I would expect.

Can you upload a problem page and post a link so we can see it in our browsers?
Like Show 0 Likes (0)

Actions
2. Re: Good way to give navbar top margin?

Andy Bay Apr 11, 2011 12:29 AM (in response to John Waller)

Hi!

When I try to use top margin, it also pushes the wrapper down from the top of the browser. But I need to move only the navbar down. Here is an uploaded example of the problem:

http://geminoidi.com/margin_test.html

Such a simple thing, but I can't seem to get it right. :S
Like Show 0 Likes (0)

Actions
3. Re: Good way to give navbar top margin?

osgood_ Apr 11, 2011 12:48 AM (in response to Andy Bay)

Add padding top 1px to your wrapper css selector (as shown below)

#wrapper {
background-color: #000066;
min-height: 600px;
padding-top: 1px;
}

Then make the top margin on your 'navbar' 19px if you want it to be 20px in total from the top of the browser window.

What is happening is the margin is collapsing and the wrapper is inheriting the style so you need to create a barrier between the two, the 1px padding does this.

Css works in mysterious and not always seemingly logical way.
Like Show 0 Likes (0)

Actions
4. Re: Good way to give navbar top margin?

Andy Bay Apr 11, 2011 1:00 AM (in response to osgood_)

Cool -that did the trick! Thank you!
Like Show 0 Likes (0)

Actions

Go to original post

Good way to give navbar top margin?

1. Re: Good way to give navbar top margin?

2. Re: Good way to give navbar top margin?

3. Re: Good way to give navbar top margin?

4. Re: Good way to give navbar top margin?

Actions

More Like This

Legend