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.