Jump to content
  • Advertisement
Sign in to follow this  
capone888

[web] Centering question in Cascading Style Sheets

This topic is 2784 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hey all,

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.

Share this post


Link to post
Share on other sites
Advertisement
There are several ways you can do this. However, for the code you have in place, i'd suggest trying:

#navigation
{
float: left;
width: 800px;
background:#333;
text-align: center;
}

Share this post


Link to post
Share on other sites
Easy fix. Or should be. Add "float: left;" to your CSS. And include "text-align: center;".


#navigation li
{
float: left;
text-align: center;
}

Share this post


Link to post
Share on other sites
Isn't another way if the OP changed his original CSS so that margin-left and margin-right of #navigation are set to "auto", since #navigation's width is set?

Share this post


Link to post
Share on other sites
I was going to suggest that but it would depend on what else is going there. My way makes it so his list items just go side by side and won't change anything else.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!