I am trying to learn html / css so I can make some GUI screens for a text based rpg I am creating. I am fairly new to web development and I have a problem I am sure there is an easy fix to that I am overlooking. Could one of you please suggest a solution because it is driving me nuts.
Basically, I just want to have some buttons lined up horizontally along the top of a single column, fixed-width page (which is all centered). I got them to display, but they are left-aligned. I can also change them to right aligned. But what I want them to do is to line up centered horizontally. If I use the center tag it is centering them, but they are centered vertically.
Maybe I am not explaining it too well. Take a look at this screenshot to see what it looks like left-alighned, right-aligned, centered, and how I want it to actually look.
http://img263.imageshack.us/img263/7601/sshots.jpg
Here is my relevant code:
HTML code:
<div id="container"> <div id="header"> <h1> Site name </h1> </div> <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact us</a></li> </ul> </div>CSS code:
body { text-align: center; }#container{ margin: 0 auto; width: 800px; background:#fff;}#header{ background:#ccc; padding: 20px;}#header h1 { margin: 0; }#navigation{ float: left; width: 800px; background:#333;}#navigation ul{ margin: 0; padding: 0;}#navigation ul li{ list-style-type: none; display: inline;}#navigation li a{ display: block; float: left; //This is the value I was playing around with. padding: 5px 10px; color:#fff; text-decoration: none; border-right: 1px solid#fff;}#navigation li a:hover { background:#383; }Thanks for any advice.
[Edited by - capone888 on December 3, 2010 6:59:28 PM]
