style.css

#header ul#nav {
    float: left; margin: 0 0 0 24px; background: url(images/navbar.png) top; padding: 2px 0 2px 0 0; width: 1000px;
}

header.php

<div id="container">
<div id="header">

<ul id="topcorner">
<li><a href="#">Career</a> | <a href="#">Mail</a></li>
</ul>
<div id="search"><?php include('search.php'); ?></div>
<ul id="nav">
<li><?php wp_list_pages('sort_column=menu_order&title_li='); ?></li>
	
</ul>
</div>
</div>

how to create a full length width navigation bar ?

I have already tried

background: url(images/navbar.png) top repeat-x;

but it still does not work. It still follow the width size. I would like a navigation bar that full length adjusting to the screen size.

Recommended Answers

All 2 Replies

set the image background on the div containing the menu, then the image will create a bar the width of that div. Putting it as background to the <ul> means it stops where the <ul> stops.

Well, if I define the width then it will grow as long as the width size. My point is - is it possible to create nav bar as long as the harizontal screen size no what the size is. Therefore, I probably don't need to define the width size. How ?

If I erase the ul and li I wonder why the navigation turn to vertical instead of harizontal? and also the navigation turn as long as the menu not the harizontal screen size.

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.