Css navbar problem!!! Help!!!

[smenglish]

Hi, I have created a css navbar with a sprite image, and i'm trying to center it by putting it in a div, inside its parent div, but the navbar sits under the div and wont go inside of the div. Please help me fix this problem, im fairly new to html and css.

**** HTML ****

<div id="nav">
<div id="navbar">
<ul class="cssmenu">
        <li class="home"><a href="#" class="selected" title="Home"><span class="displace">Home</span></a></li>
        <li class="news"><a href="#" title="News"><span class="displace">News</span></a></li>
        <li class="forum"><a href="#" title="Forum"><span class="displace">Forum</span></a></li>
        <li class="video"><a href="#" title="Video"><span class="displace">Video</span></a></li>
        <li class="support"><a href="#" title="Support"><span class="displace">Support</span></a></li>
        <li class="chat"><a href="#" title="Chat"><span class="displace">Chat</span></a></li>
        <li class="contact"><a href="#" title="Contact"><span class="displace">Contact</span></a></li>
</ul>
</div>
</div>
 

**** CSS ****

#banner {
    background-color: #777;
    padding: 5px;
    height: 104px;
    width: 905px;
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
    border: 2px solid #000;
}
#nav {
    background-color: #777;
    padding: 5px;
    height: 54px;
    width: 905px;
    margin-right: auto;
    margin-left: auto;
    border: 2px solid #000;
    margin-top: 10px;
}
.displace {
    position: absolute;
    left: -5000px;
}
 
/*
*    Setup
*/
ul.cssmenu {
    list-style: none;
    padding: 0px;
    }
 
ul.cssmenu li {
    float: left;
    }
 
ul.cssmenu li a {
    display: block;
    width: 90px;
    height: 54px;
    background: url("images/nav.png");
    }
 
    /*
*    Normal Links
*/
ul.cssmenu li.home a {
    background-position: 0 0;
    }
 
ul.cssmenu li.news a {
    background-position: -90px 0;
    }
 
ul.cssmenu li.forum a {
    background-position: -180px 0;
    }
ul.cssmenu li.video a {
    background-position: -270px 0;
    }
ul.cssmenu li.support a {
    background-position: -360px 0;
    }
ul.cssmenu li.chat a {
    background-position: -450px 0;
    }
ul.cssmenu li.contact a {
    background-position: -540px 0;
    }
/*
*    Hover Links
*/
ul.cssmenu li.home a:hover {
    background-position: 0 -54px;
    }
 
ul.cssmenu li.news a:hover {
    background-position: -90px -54px;
    }
 
ul.cssmenu li.forum a:hover {
    background-position: -180px -54px;
    }
ul.cssmenu li.video a:hover {
    background-position: -270px -54px;
    }
ul.cssmenu li.support a:hover {
    background-position: -360px -54px;
    }
ul.cssmenu li.chat a:hover {
    background-position: -450px -54px;
    }
ul.cssmenu li.contact a:hover {
    background-position: -540px -54px;
    }
 
 
/*
*    Clicked Links
*/
ul.cssmenu li.home a:active {
    background-position: 0 -108px;
    }
 
ul.cssmenu li.news a:active {
    background-position: -90px -108px;
    }
 
ul.cssmenu li.forum a:active {
    background-position: -180px -108px;
    }
ul.cssmenu li.video a:active {
    background-position: -270px -108px;
    }
ul.cssmenu li.support a:active {
    background-position: -360px -108px;
    }
ul.cssmenu li.chat a:active {
    background-position: -450px -108px;
    }
ul.cssmenu li.contact a:active {
    background-position: -540px -108px;
    }
 
/*
*    Selected/Active Links
*/
ul.cssmenu li.home a.selected {
    background-position: 0 -162px;
    }
 
ul.cssmenu li.news a.selected {
    background-position: -90px -162px;
    }
 
ul.cssmenu li.forum a.selected {
    background-position: -180px -162px;
    }
 
ul.cssmenu li.video a.selected {
    background-position: -270px -162px;
    }
ul.cssmenu li.support a.selected {
    background-position: -360px -162px;
    }
ul.cssmenu li.chat a.selected {
    background-position: -450px -162px;
    }
ul.cssmenu li.contact a.selected {
    background-position: -540px -162px;
    }
 
#navbar {
    width: 630px;
    height: 54px;
    margin-right: auto;
    margin-left: auto;
    }
 

[TheServant]

Welcome to Bytes.
I recommend you getting Mozilla Firefox if you don't have it already and getting the addon "Firebug" which lets you analyse a page to see where containers are, their height, width etc.

Your problem is probably that the <ul> has no height and the <li>'s are being pushed under it, which happens to be out of the <div>. You can fix this in numerous ways, but try and give your <ul> a height and use the css attribute:

overflow: hidden;

The other way is to float your <ul> which means it will include the floated <li>'s inside. If you do this, you will need to make the granparent div width 100%, and then give the parent div:

margin: 0 auto;

which will center it.

See how you go with all that ;)