Problems centering the Navbar buttons???

[Doctor Swole]

Well basically I want to move the buttons more to the center of the navbar and spread out evenly throughout the navbar, when I mean center I mean more in the middle of the navbar, I dont want them laying on the navbar bottom border. How would I do that. Appreciate any help thanks...

Dont worry about the images...

Here's the HTML

<div id="navbar">
<ul>
<li><a href="#">Home</a></li><li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Contact Me</a></li>
</div>
<div id="left_column">
<h3>Left Column</h3>
</div>
<div id="center_column">
<h3>Center Column</h3>
<div id="right_box">
<h4>Right Box</h4>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>Footer</p>
</div>
</div>
</div>
<br>
</body>
</html>

heres the CSS

body {

font-family: Arial, Helvetica, sans-serif;

background: #3366FF;

}

#header {

width: 773.7px;

height: 125px;

background-image: url(sample.gif);

margin-left: 100px;

margin-top: 15px;

border-top: 3px #F600FF solid;

border-left: 3px #F600FF solid;

border-right: 3px #F600FF solid;

}

#container {

width: 779px;

}

#left_column {

width: 140px;

height: 600px;

float: left;

margin-left: 100px;

border-left: 3px #F600FF solid;

border-right: 3px #F600FF solid;

border-bottom: 3px #F600FF solid;

}

#center_column {

width: 633.7px;

height: 600px;

margin-left: 243px;

border-bottom: 3px #F600FF solid;

border-right: 3px #F600FF solid;

padding-top: .1px;

}

#navbar {

width: 773.7px;

height: 35px;

margin-left: 100px;

padding-top: 1px;

background-repeat: no-repeat;

border: 3px #F600FF solid;

}

#navbar ul {

list-style: none;

padding-bottom: 10px;

}

#navbar ul li{

display: inline;

}

[goldingh99]

try including this in your script

<div id="navbar" valign="middle">

hopefully this will work
the valign attribute cannot be controlled by the css stylesheet

for more information on valign look on www.w3schools.com

hope this helps

[mark87]

valign is deprecated and should not be used...

Add text-align: center; to #navbar.

To spread them out a bit more add margin: 0 20px; to the li's (or whatever margin you want).

Also, you can't have decimal places in pixels!

[Doctor Swole]

valign is deprecated and should not be used...

Add text-align: center; to #navbar.

To spread them out a bit more add margin: 0 20px; to the li's (or whatever margin you want).

Also, you can't have decimal places in pixels!

hmm, well it did center them, sort of? They are more to the right??? Also I want to move the buttons a little more up, I dont want them sitting on the bottom border of my navbar, how would I do that? I cant use decimals in pixels, what happens if I do?? Appreciate, thanks.

[blain]

take them out and find out :thumbsup:

[VIPStephan]

Have you ever seen a half pixel???? One pixel can only be one pixel and not 1.5, understand? I guess nothing will happen if you use decimals but I've never tried it.

You can use margin-bottom: ??px; if you want it to be more off the bottom.

[Doctor Swole]

Have you ever seen a half pixel???? One pixel can only be one pixel and not 1.5, understand? I guess nothing will happen if you use decimals but I've never tried it.

You can use margin-bottom: ??px; if you want it to be more off the bottom.

I added margin-bottom and it didnt do anything, my buttons just stood there???

[Doctor Swole]

hmm, this is very strange and frustrating... I opened my site up on internet explorer and it shows my buttons in line with the navbar but it has the center column below the left column and the left column is out of place. Mean while if I open it up in Mozilla firefox, it is all aligned perfectly except for the navbar buttons??? So confused... Would really appreciate any help, thanks.

[Doctor Swole]

bump, help appreciated..