Div Problem

[BTC]

Hi,

I am having problems with this fiv tag. The 5px padding to the right of the "Contact Us" button seems to be transparent, I want it to have a black background. I've tried <div style="background-color: #000"> in the div tag before the "ul", but it didn't work. This is a jquery javascript.

Here is the image:



Body Coding:

    <div><ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a>
            <ul>
                <li><a href="#">Our Mission</a></li>
                <li><a href="#">History</a></li>
                <li><a href="#">Partners</a></li>
                <li><a href="#">Our Sponsors</a></li>
            </ul>
        </li>
        <li><a href="#" style="cursor:hand">Rules</a></li>
        <li><a href="#" style="cursor:hand">Prizes</a></li>
        <li><a href="#" style="cursor:hand">Shark Info</a>
            <ul>
                <li><a href="#">Shark Identification</a></li>
                <li><a href="#">Tagging</a></li>
                <li><a href="#">Measuring</a></li>
                <li><a href="#">Blacktip Migration</a></li>
            </ul>
        </li>
        <li><a hred="#" style="cursor:pointer">Gallery</a>
            <ul>
                <li><a href="#">Photo Gallery</a>
                    <ul>
                        <li><a href="#">2008</a></li>
                        <li><a href="#">2009</a></li>
                    </ul>
                    </li>
                <li><a href="#">Video Gallery</a>
                    <ul>
                        <li><a href="#">2008</a></li>
                        <li><a href="#">2009</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a hred="#" style="cursor:pointer">Media</a>
            <ul>
                <li><a href="#">News</a></li>
                <li><a href="#">Articles</a></li>
                <li><a href="#">Videos</a></li>
                <li><a href="#">Photos</a></li>
                <li><a href="#">Production</a></li>
            </ul>
        </li>
        <li><a hred="#" style="cursor:pointer">Archives</a>
            <ul>
                <li><a href="#">Past Winners</a></li>
                <li><a href="#">Past Annoucements</a></li>
            </ul>
        </li>
        <li><a href="#">Contact Us</a></li>
    </ul></div>

CSS Coding:

body{
font-size:13px;
font-family:"Times New Roman", Times, serif;
text-align:center;
font-weight:bold;
}

#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em; 
z-index:30;
}

#nav a{
display:block;
padding:0px 5px;
color:#676558;
text-decoration:none;
background-color:#000;
width:73px;
line-height:25px;
font-size:13px;
font-weight:bold;
}

#nav a:hover{
color:#09F;
font-weight:bold;
background-image:url(../graphics/navbar-shark.gif);
background-attachment:scroll;
background-repeat:no-repeat;
background-position:center;
}

#nav li{
float:left;
position:relative;
}

#nav ul {
position:absolute;
display:none;
width:110px;
top:25px;
}

#nav li ul a{
width:110px;
height:auto;
float:left;
text-align:left;
background-color:#252525;
line-height:25px;
z-index:30;
font-weight:normal;
}

#nav ul ul{
top:auto;
}	

#nav li ul ul {
left:110px;
margin:0px 0 0 10px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}

Any help, would be greatly appreciated!

[Stevie D]

Unless I've missed it, you haven't reference the <div> in the CSS at all.

I think what's happening is that, because the entire visible contents of the <div> are floated, the <ul>s and therefore the <div> itself are collapsing to zero-height.

[BTC]

Unless I've missed it, you haven't reference the <div> in the CSS at all.

I think what's happening is that, because the entire visible contents of the <div> are floated, the <ul>s and therefore the <div> itself are collapsing to zero-height.

I am new to this, I haven't mastered CSS yet. How do I reference the <div> in the CSS? I tried placing the id="nav" in the <div> and the entire navigation bar disappeared.

[Stevie D]

I am new to this, I haven't mastered CSS yet. How do I reference the <div> in the CSS? I tried placing the id="nav" in the <div> and the entire navigation bar disappeared.

It needs to be <div id="nav">...</div>, with the same content as you have in the <div>...</div> now.

[BTC]

It needs to be <div id="nav">...</div>, with the same content as you have in the <div>...</div> now.

I tried that and it didn't work. When I take the id="nav" out of the <ul> and place it in the <div>, the navigation bar disappears:



The CSS coding I gave above was for the navigation bar. The "layout" coding and the "navigation bar" coding are in two different stylesheets. Here is the coding for the page layout.

#center {
 	margin-left: auto;
 	margin-right: auto;
 	width: 750px;
 	}
div.body {
	margin:0em;
	padding:0em;
	color:#676556;
	font-family:"Times New Roman", Times, serif;
	font-size:0.8125em;
	text-align:center;
	font-weight:bold;
	vertical-align:text-top;
}
#plain_sand{
  background: transparent url(../graphics/plainwood.gif);
}

#fading_sandtop{
  background: transparent url(../graphics/fadingwood.gif) repeat-x top left;
}
#fading_sandbottom{
  background: transparent url(../graphics/faddingwoodmuskie_bottom.gif) repeat-x bottom left;
  padding-bottom:200px;
}
div.contentbox {
	padding:20px;
	padding-top:30px;
	padding-bottom:30px;
	width:730px;
}
div.information {
	float:left;
	width:548px;
	margin:auto;
	padding:1.5em;
	text-align:left;
	background-color:#FFF;
}
div.sponsors {
	float:right;
	padding-top:0.9375em;
	padding-bottom:0.9375em;
	padding-left:5px;
	padding-right:5px;
	background-color:#E0E0E0;
	width:125px;
	line-height:2em;
}

Do I need to combine the layout CSS with the navigation CSS into one stylesheet?

Thanks for your time! I really appreciate it!