🔒 Locked

[web] CSS problem

Started by glyvin Mar 10, 2008 at 4:31 PM 0 replies 700+ views

Original Post

Mar 10, 2008 at 4:31 PM

Hey I have a Problem with my Horizontal Nav in CSS Here is the CSS code [code block] body { background-color: #999999; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif; } #wrapper { width: 900px; margin-top:0; margin-bottom: 50px; margin-left: auto; margin-right: auto; } #header { height:220px; background-image:url('banner.gif'); background-repeat: no-repeat; } #nav{ background-color:#CCFF00; } #nav ul { background-color:#FFF68F; text-align: center; margin-left: 0; padding-left: 0; padding-top: 10px; padding-bottom:10px; border-bottom: 1px solid gray; height:40px; } #nav li { padding: .25em .25em; border-left: 1px solid black; display: inline } #nav a:hover { color: #fff; background-color: #369; text-decoration: none; } #main { background-color:#FFFFFF; width:890px; padding: 10px; border : 1px solid black; } #footer { width:885px; background-color:#DEDEDE; padding: 15px; margin: 0px; border-top: thin solid #000000; } [/code block] Here is a view of the page http://www.digital-arcanist.com/~will/tutorial/test.html I can't get the Nav bar to have no space between the header and the main content. Thoughts? THanks, Will

Maxamor

Mar 11, 2008 at 1:10 AM

There are a few things going on here.

1) I recommend reading a little bit more about how the box model works (especially the difference between inline and block-level elements).

2) The unordered list with your nav elements has browser-default margins on the top and bottom (probably padding in IE). You'll want to remove this, or use something like undohtml.css to reset all of that stuff for you. This way, you have a clean slate with which to add your margins/paddings to.

3) Since the nav items are inline, you'll want to make their "line-height" CSS property's value the same height as your navigation box. That way they'll vertically align, too. If that's what you want.

EDIT: The firebug plug-in for FireFox is great at finding these kinds of issues and quickly finding fixes for them. There's a Web Developer plug-in for IE as well, but it's lacking compared to firebug.

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.