954,604 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

harizontal navigation

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.

davy_yg
Posting Whiz
377 posts since May 2011
Reputation Points: 10
Solved Threads: 0
 

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.

hericles
Practically a Posting Shark
823 posts since Nov 2007
Reputation Points: 136
Solved Threads: 169
 

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 ?

davy_yg
Posting Whiz
377 posts since May 2011
Reputation Points: 10
Solved Threads: 0
 

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 .

teedoff
Posting Pro
599 posts since Jul 2010
Reputation Points: 21
Solved Threads: 60
 

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,

sheilaaellis44
Newbie Poster
7 posts since Feb 2012
Reputation Points: 10
Solved Threads: 0
 

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 tag in your css.

teedoff
Posting Pro
599 posts since Jul 2010
Reputation Points: 21
Solved Threads: 60
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You