...

View Full Version : Positioning unordered list



shakoor6
04-20-2011, 06:01 PM
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


<!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


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; }

teedoff
04-20-2011, 06:35 PM
ummm where do you want to position it? You need to be more specific and seeing ALL your code would help.

shakoor6
04-22-2011, 11:43 AM
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

effpeetee
04-22-2011, 12:05 PM
Trying to be helpful, I have assembled it here. (http://www.exitfegs.co.uk/DocumentA.html)

Frank

shakoor6
04-22-2011, 01:55 PM
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

teedoff
04-22-2011, 03:13 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum