0

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.

2
Contributors
1
Reply
2
Views
5 Years
Discussion Span
Last Post by simplypixie
0

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.