Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Apr 2011
    Posts
    107
    Thanks
    18
    Thanked 0 Times in 0 Posts

    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:

    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:

    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; }
    Last edited by shakoor6; 04-19-2011 at 02:44 PM.

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by shakoor6 View Post
    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:
    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

  • #3
    Regular Coder
    Join Date
    Jan 2010
    Posts
    136
    Thanks
    52
    Thanked 0 Times in 0 Posts
    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

  • #4
    Regular Coder
    Join Date
    Apr 2011
    Posts
    107
    Thanks
    18
    Thanked 0 Times in 0 Posts
    How do i post a test page? Thank You

  • #5
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by shakoor6 View Post
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •