How to Position unordered list

I am creating a sprite navigation for my footer and im struggling to find a way to position the unordered list more in the centre rather than on the left hand side.I'm new to all of this.Thank you for any help. This is my HTML code:


<ul id="footer1">

<li id="Homepage1"><a href="#"><span>Homepage</span></a></li>
<li id="Football2"><a href="#"><span>Football</span></a></li>
<li id="Cricket3"><a href="#"><span>Cricket</span></a></li>
<li id="Tennis4"><a href="#"><span>Tennis</span></a></li>
<li id="Boxing5"><a href="#"><span>Boxing</span></a></li>


This is my CSS code:


#footer1{ margin:0; padding:0; width:900px; height:40px; position:absolute; top:1118px;
background-image: url(footer.gif);}

#footer1 li {margin:0; padding:0; list-style-type:none;
display:inline; height:40px; text-align:center; float:left; line-height:40px;}

#footer1 a { display:inline; height:40px; }
#footer1 a:hover {background-image:url(footer.gif);}

(My unordered list below)

#Homepage1 {width:55px; }
#Homepage1 a:hover {background-position:bottom 0px; }

#Football2 {width:45px; }
#Football2 a:hover {background-position:bottom -100px; }

#Cricket3 {width:37px; }
#Cricket3 a:hover {background-position:bottom -137px; }

#Tennis4 {width:38px; }
#Tennis4 a:hover {background-position:bottom -175px; }

#Boxing5 {width:37px; }
#Boxing5 a:hover {background-position:bottom -212px; }

I am creating a sprite navigation for my footer and im struggling to find a way to position the unordered list more in the centre rather than on the left hand side.I'm new to all of this.Thank you for any help. This is my HTML code:

<ul id="footer1">

<li id="Homepage1"><a href="#"><span>Homepage</span></a></li>
<li id="Football2"><a href="#"><span>Football</span></a></li>
<li id="Cricket3"><a href="#"><span>Cricket</span></a></li>
<li id="Tennis4"><a href="#"><span>Tennis</span></a></li>
<li id="Boxing5"><a href="#"><span>Boxing</span></a></li>

This is my CSS code:

#footer1{ margin:0; padding:0; width:900px; height:40px; position:absolute; top:1118px;
background-image: url(footer.gif);}

#footer1 li {margin:0; padding:0; list-style-type:none;
display:inline; height:40px; text-align:center; float:left; line-height:40px;}

#footer1 a { display:inline; height:40px; }
#footer1 a:hover {background-image:url(footer.gif);}

#Homepage1 {width:55px; }
#Homepage1 a:hover {background-position:bottom 0px; }

#Football2 {width:45px; }
#Football2 a:hover {background-position:bottom -100px; }

#Cricket3 {width:37px; }
#Cricket3 a:hover {background-position:bottom -137px; }

#Tennis4 {width:38px; }
#Tennis4 a:hover {background-position:bottom -175px; }

#Boxing5 {width:37px; }
#Boxing5 a:hover {background-position:bottom -212px; }


can you post a link to a test page? also try to fix markup if is invalid, validate first please, both (x)html and css.
and please use [ code] and [ /code] tags to wrap the code. You can edit your previous post to do this, thank you.

best regards

Hi sir.. Im also a noob about this, but I believe your source code is hard to read.

I can suggest you to go and learn here http://www.w3schools.com

How do i post a test page? Thank You

How do i post a test page? Thank You
you are welcome, :)

not a test page, a link to a test page. Will be great if you have a server somewhere where you can upload the page with what it need to see it.
Most of us, including me, use firebug for debuging, and this way you can get faster a solution to the problem.

best regards