navigation bar

[davy_yg]

index.html

<div id="container">
	<div id="header">
	<h1><a href="#">Ock Associates</a></h1>
	<ul id="nav">
   		<li><a href="#">HOME</a></li>
		<li><a href="#">ABOUT</a></li>
		<li><a href="#">PRACTICE AREA</a></li>
		<li><a href="#">NEWS</a></li>
        <li><a href="#">PUBLISHED BOOKS</a></li>
        <li><a href="#">CONTACT US</a></li>
		<li>
    		<div id="search">
    			<img src="images/searchform.png" />
    			<img src="images/searchbutton.png" />
    		</div>
    	</li>
	</ul>

style.css

#header ul#nav {
	float: left; margin: 110px 0 0 24px; background: url ("C:/xampp/htdocs/ocklaw/images/navbar.png") top; padding: 2px 0 2px 0 0; font: 12px "Times New Roman", Times, serif; color: black;
}

I wonder why the navigation bar does not filled the whole line or as long as the real image? It only acted as long as the navigation button instead.

Even after I put ("C:/xampp/htdocs/ocklaw/images/navbar.png") top repeat-x; this code it still only as long as the navigation button. It suppose to be as long as the real image.

[simplypixie]

You need to set the ul to the same width as your image otherwise it will only be as wide as the content it contains.