harizontal navigation

[davy_yg]

Hi I would like to create a horizontal navigation.

header.php

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

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

style.css

#header #nav {
	float: left; margin: 0 0 0 24px; background: url(images/navbar.png) repeat-x; padding: 2px 0 0 0; width: 100%;
	z-index: 1;
	}

#header ul#nav li {
	float: left; padding: 5px; margin: 0 15px 0 15px; color: #000000; 
	}
			
#header ul#nav li:first-child {
	margin: 0;
	}

#header ul#nav li a {
	display: block; font: 12px Arial, Serif; color: black;
	text-decoration: none;
	}

#header ul#nav li a:hover {
	color: grey;
	}

This turns to vertical navigation instead after I delete the ul and li. How to keep it horizontal navigation without the li and ul ?

How to modify the css ?

Thanks.

[hericles]

You will want to use display: inline-block for the list items of the ul. This will make them line horizontally rather than the default vertical.

[davy_yg]

Well, my point I do not want to ul /li since it will create a bullet before navigation. How to create horizontal navigation without ul/ li ?

[teedoff]

You can style a list to remove the bullets or even use your own bullets!

You NEED to learn some of this stuff instead of relying on others to be at your becon call for trivial basic question. I'm sorry if I sound harsh but really, learning on your own is the ONLY way TO learn and its not that hard.

Start here.

[sheilaaellis44]

I'm in the middle of making a Horizontal Navigation Bar. I have got all my links in etc but I need to make it Horizontal dose anyone know how I can do that.

Thanks,

[teedoff]

I'm in the middle of making a Horizontal Navigation Bar. I have got all my links in etc but I need to make it Horizontal dose anyone know how I can do that.

Thanks,

You should start your own thread when you have a question.

But to answer you, you apply a float and width on the <li> tag in your css.