How Do i Center my Navigation?

i would like to know how i Center my Navigation css buttons to the center of my webpage.

Bedfordshire anime

The css for it is

#navigation { background-color:#9933CC;}
			  
#navigation ul { padding:0px; margin: 0px; height: 41px;}

#navigation ul li { list-style:none; float: left; margin:0 auto;}

#navigation ul li a { height: 33px; width: 100px;
                           display:block;
			   background-image:url(button.jpg);
	                   background-repeat:no-repeat;
	 		          color: #000000;
			          text-decoration:none;
			          line-height: 34px;
			          font-weight: bold;
		                  font-size:14px;
		                  text-shadow:0px 0px 6px #FFFFFF;
				  margin-top: 1px;
				  margin-top: 1px;
				  margin-left: 1px;
                                  border:solid #000000;}
					  
#navigation ul li a:Hover { background-image:url(button-roll-over.jpg); background-repeat:no-repeat;}

Code (markup):

 

Is this what you are looking for? Yeah.. Done buddy..

Check it and Make yourself Right that it is the thing you need or not.

http://i45.tinypic.com/2gxoivb.png

 

Yer thats right. Thank you. Would part of the code do i need to change..

 

I'm not sure why I'm bothering to answer this, since the same basic solution I gave you for centering your gallery (which you ignored for a broken method) will work for the navigation. Make the list items {display: inline-block;}, and set the ul to {text-align: center;}.

gary

 

Thank you for your help

 

hello, I couldn't get that to work. i still didn't centre.

 

You will have to edit not the CSS but the html of it all...Simple to do:

<!-- Navigation is place where your links go -->
<div id="navigation" align="center">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="http://bedfordshire-anime.lefora.com/">Forum</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="links.html">Links</a></li>
</ul>

</div>

<!-- Summary is the left-hand side column -->

Where you see the red is what you need to be adding to center it.

 

Absolutely not! That is invalid. Lipgut, please don't suggest using invalid markup.

gary

 

But you didn't do as I asked. Here is your css, as it is right now.

animestyle2.css

#navigation ul {
height:39px;
margin:0 auto;
padding:0;
}
 
#navigation ul li {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0 auto;
}

Code (markup):

Edit those lines as below:

#navigation ul {
height:39px;
margin:0;
list-style: none;
padding:0;
text-align: center;   /*this is actually not needed as is inherited from #container, but doesn't hurt*/
}
 
#navigation ul li {
display: inline-block;
}

Code (markup):

gary

 

0-o, wtf are you talking about. Its not invalid, run it threw a HTML validater, it will come up nothing wrong with it. Your way is much more correct yes, but for a site along these lines, strings like this are much more than acceptable.

 

It will check valid only if your DTD is transitional, which tells the validator to allow anything that ever was valid. The current recommendations, html 4.01 and xhtml 1.0 have both deprecated the attribute, and it is no longer a part of the specification.

Using the align attribute in a strict document, and there's no sane reason to create a page otherwise, yields the following error when added to an otherwise valid document:

 Error: there is no attribute "ALIGN"

Code (markup):

gary

>>>Want Free Pre-made Logo's?? No joke! Click here!<<<
My Graphics Blog, Please Check It Out, For All My Personal Graphics, Tutorials and resources!

 

Didn't work anyways

 

Thanks alot i finally got it now!! thanks for your help =D

 

Hey Gary, I have a small problem, it works fine on both chrome and firefox, but IE its centering and going down in a line. if you have a look.
http://bedfordshire-anime.webs.com/index.html

 

As I mentioned in the other thread, IE6&7 will be broken because of buggy support for inline-block. We'll fix that now. Directly below this,

#navigation ul li {
display: inline-block;
}

Code (markup):

add these bits:

* html #navigation ul li {   /*fix for IE6*/
  display: inline;
  }

*+html #navigation ul li {   /*fix for IE7*/
  display: inline;
  }

Code (markup):

You'll use the same fixes for your gallery.

cheers,

gary

 

Thankyou, its werid, cause i'm on IE8 at the min, and its showing going down in the middle, though when i'm on my laptop on IE 8 is completely fine. Thats Really Werid. there both IE 8

 

Are you sure? IE8 has proper support for inline-block.

edit: Is one of the IE8s in screwed-up mode? What do they call that? Compatibility mode? If so, switch back to standards mode. Compat mode is for viewing pages written by people who didn't know, or still don't know, how to write a proper valid page.

cheers,

gary

 

only IE6 lacks support of inline-block

 

Wrong. IE7 also uses it only to set hasLayout. The element then renders as its default, inline for %inline elements, and block for %block elements. Both IE6 and IE7 must be told to render a native block element as inline, and they use different filters, thus the two hacks.

cheers,

gary

gary

 

Yep, At work i use IE 8 and at home i got IE 8. and at Work, its not working.