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.

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.