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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Apr 2011
    Posts
    107
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Positioning unordered list

    I want to be able to position the unordered list. I'v tried EVERYTHING i can think off. This is really mind boggling. Any help will be appreciative!


    This is my HTML code
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    	<head>
    		<title>Sport News</title>
    		<link rel="stylesheet" href="global.css" type="text/css" /> 
    	</head>
    	<body> 
    		<div id="wrapper">
    			<div id="header">
    		</div>
    			<div id="f">
    			<div id="logo">
    			<img src="images/Logo.png" width="273" height="66" alt="Logo"/>
    				
    			</div>
    				</div>
    	<ul id="navigation">
    	
    		<li id="Homepage"><a href="#"><span>Homepage</span></a></li>
    		<li id="Football"><a href="#"><span>Football</span></a></li>	
    		<li id="Cricket"><a href="#"><span>Cricket</span></a></li>
    		<li id="Tennis"><a href="#"><span>Tennis</span></a></li>
    		<li id="Boxing"><a href="#"><span>Boxing</span></a></li>
    	</ul>
    	
    	<div id ="footer1">
    		<ul
    		<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>
    		</ul>
    	</div>
    				
    			<div id="main">
    			
    			</div>
    		</div>
    	</body>
    </html>
    This is my CSS code
    Code:
    body{
    	background-colour:#ccc;
    	font-family: Arial, Verdana, sans-serif; 
    	color: white; 
    }
    
    #wrapper{
    	margin:0 auto;
    	width:900px; 
    	background-color: black;
    }
    
    #header{
    	width:900px;
    }
    
    #navigation{ margin:0; padding:0; width:900px; height:55px; position:absolute; top:87px;
    	background-image: url(Nav-Bars2.gif);}
    
    #navigation li {margin:0; padding:0; list-style-type:none; 
    display:inline; height:55px; text-align:center; float:left; line-height:55px;}
    
    #navigation a { display:block; height:54px; }
    #navigation a:hover {background-image:url(Nav-Bars2.gif);}
    
    #Homepage {width:185px; }
    #Homepage a:hover {background-position:bottom 0; }
    
    #Football {width:185px; }
    #Football a:hover {background-position:bottom -185px; }
    
    #Cricket {width:185px; }
    #Cricket a:hover {background-position:bottom -370px; }
    
    #Tennis {width:150px; }
    #Tennis a:hover {background-position:bottom -555px; }
    
    #Boxing {width:150px; }
    #Boxing a:hover {background-position:bottom -705px; }
    
    #navigation span { display:none; }
    
    #logo{
    	position:absolute;
    	top:-1105px;
    	width:273px;
    	height:66px;
    }
    
    #main{
    	width:900px;
    	height:1150px;
    }
    
    #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:05px;}
    
    #footer1 a { display:inline; height:40px; }
    #footer1 a:hover {background-image:url(footer.gif);}
    
    #Homepage1 ul li {width:55px; } 
    #Homepage1 a:hover {background-position:bottom -275px; }
    
    #Football2 {width:75px; }
    #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-22-2011 at 11:44 AM.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    ummm where do you want to position it? You need to be more specific and seeing ALL your code would help.
    Teed

  • #3
    Regular Coder
    Join Date
    Apr 2011
    Posts
    107
    Thanks
    18
    Thanked 0 Times in 0 Posts
    I want to position it in the middle..its sprite navigation that i am doing. Iv editing my coding to show all of it.[Footer1 is what im trying to position. the folowing text such as Homepage1,Football1 etc are my buttons to mouse over. Thank You
    Last edited by shakoor6; 04-22-2011 at 11:46 AM.

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Trying to be helpful, I have assembled it here.

    Frank
    Last edited by effpeetee; 04-22-2011 at 12:33 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Regular Coder
    Join Date
    Apr 2011
    Posts
    107
    Thanks
    18
    Thanked 0 Times in 0 Posts
    alryt m8...thx 4 ur message...im new to all this...I want the unordered list more centered. or have some control on how to position each icon. Thank you

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Well then you should just give the ul a width smaller than the containing element(footer perhaps), then set margin: 0 auto;

    That will center it.
    Teed


  •  

    Posting Permissions

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