...

View Full Version : How to Position unordered list



shakoor6
04-19-2011, 02:07 PM
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; }

oesxyl
04-19-2011, 02:17 PM
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

finoy_ako
04-19-2011, 02:31 PM
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

shakoor6
04-19-2011, 02:45 PM
How do i post a test page? Thank You

oesxyl
04-19-2011, 02:52 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum