Hey guys,

I'm fairly new to web design--as will rapidly become apparent--and am struggling with getting elements to go where I want them. I want the nav bar to be around 10px below the logo and over the beige box. When I put a negative margin-top nothing happens. Also, if there's anything else egregiously wrong with my code, feel free to give me pointers. Thanks!

Here's the page:

http://www.denverpetsitting.com/cff/index

3 answers

3
points

In my experience, code is more understandable (and more maintainable in the future, as a result) if you can avoid using negative values for margin/padding as much as possible. In this case, I think a better solution (though not specifically the one you were asking for) is to find the cause of that 10px and eliminate it.

In this case, that 10px comes from each link in your list (#nav li a), which have a margin of 10px. You probably want this margin only on the left and right, not the top and bottom. If that's the case, you can change the property to margin: 0 10px;. If you want the 10px on all sides except the top, you could use margin: 0 10px 10px;. For more information on setting margins and the shorthand notation that I used here, see this helpful article on the w3schools website.

Answered over 6 years ago by Michael Martin-Smucker
2
points

If you add either overflow:hidden or float:left to you navigation list (<ul>) the negative margin will work and you can move the navigation up to overlap the preceding element.

Answered over 6 years ago by John Catterfeld
Tony B 86
0
points

you should move your nav into your header div, right now you have a fixed height of 170 pixels on #backbody and nothing on the header which holds your floated h1 logo and should contain your navigation bar. Just cut the #nav list and paste it before the closing of your header tag. Also make it clear:left; so that it sits below that floated h1 within the same container.

Answered over 6 years ago by Tony B