Wordpress /CSS/Html Help

[EvanLugh]

Hi. I'm having a bit of trouble with the navigation on Wordpress. I'd like it to be set horizontally instead of vertically.
You can see it here:

I've changed the text-wrap, positions, alignment.. everything. It's in a list (albeit was horizontally before I edited it.) The code is as follows.

HTML:

<div id="navbar">
	<ul>
			<li><?php wp_list_pages('title_li=&depth=1'); ?></li>
	</ul>
</div>

And the CSS

#navbar ul {
list-style-type: none;
margin-left: -30px;
margin-bottom: 0px;
margin-right: 0px;
margin-top: -8px;
text-decoration: none;
padding: 0px;
}

#navbar ul li a {
border-spacing: 3px 3px;
margin-left: 730px;
margin-bottom: 0px;
margin-right: 50px;
margin-top: 80px;
font-family: Arial, Verdana, Sans-Serif;
font-size: 20px;
text-decoration: none;
display: inline;

}

Many thanks for your help.

Ps - I know everything is further down - it's the menu's margins.

 

[angelwatt]

Looks like you have all the links in a single li tag. Each item should be in its own li.

 

[EvanLugh]

Thanks for the reply, angelwatt. I've already attempted several different links and li tags but the same happens. What's being shown in the example is being brought together by Wordpress.

 

[angelwatt]

Depending on the outputted HTML from that PHP you'll want to add the following,

#navbar ul li {
 display: inline;
}

Can you supply the actual HTML that gets outputted?

 

[EvanLugh]

Index Source
http://pastebin.com/d53d50a42

header.php source
http://pastebin.com/d1ad8336d

 

[angelwatt]

Index Source
http://pastebin.com/d53d50a42

header.php source
http://pastebin.com/d1ad8336d

In the PHP get ride of the li tags around the PHP that puts in the links, as they each already have li tags around them. You're currently outputting HTML that has an li in side an li without a ul or ol, which is incorrect HTML. So remove the li tags in the PHP then use that snippet of CSS I posted. That should make it inline.

 

[EvanLugh]

Removed the li tags and added the CSS - same outcome.

 

[angelwatt]

Removed the li tags and added the CSS - same outcome.

That's odd. Is it possible there's some other CSS that's overriding what you're doing?

 

[EvanLugh]

Nope, there's no internal sheet and there's only style.css..

 

[angelwatt]

It might have something to do with the margin-left: 730px. Also, border-spacing only applies to table elements.

 

[xper]

Sometimes the ul li a wants to have a float: left; to get it inline, test it.
change margin to margin: 80px 50px 0px 730px; so save some code instead of margin-left, margin-top and so on