Member Avatar for 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.

  • 2 Contributors
  • 1 Reply
  • 129 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by simplypixie
Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.