Navigation positioning blues

programming web dev
1

[COLOR=#000000][FONT=Times New Roman][LEFT][FONT=verdana]Hey room. Got a quick issue that I would like to have it solved soon. I created a navigation using ul, li tags and css. I created the navigation background using photoshop using | for each tab ig. Home, About us etc. I would like for each block on the horizontal line to fit on each of the “|” of the img. I want it smack in the middle including the text. Here is the code:

[/FONT][/LEFT][/FONT][/COLOR]



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Precious Jewels Learning Incorporated - Home</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="wrapper">
 		<div id="header">
			<div id="followus">
				<a class="facebook"><img src="images/header/Precious-Jewels-Learning-Incorporated - facebook.jpg" alt="Facebook Page" /></a>
				<a class="twitter"><img src="images/header/Precious-Jewels-Learning-Incorporated - twitter.jpg"  alt="Twitter Page" /></a>
				<a class="home"><img src="images/header/Precious-Jewels-Learning-Incorporated - home.jpg" alt="Home" /></a>
				<a class="contact"><img src="images/header/Precious-Jewels-Learning-Incorporated - email.jpg" alt="email" /></a>
			</div><!-- end "followus" DIV-->
		</div><!-- end "header" DIV-->

		<div id="navigation">
        <p id="menuHome">
        </p>
        <ul id="menuOne" class="menuHoriz">
        	<li><a href="index.html">Home</a></li>
        	<li><a href="about.html">About Us</a></li>
            <li><a href="services.html">Our Services</a></li>
            <li><a href="contributions.html">Contributions</a></li>
            <li><a href="contact.html">Contact Us</a></li>
        </ul>
        
        <ul id="menuSubTwo" class="menuVert">
        	<li><a href="mission.html">Mission Statement</a></li>       	
     </ul>
        
        <ul id="menuSubThree" class="menuVert">
        	<li><a href="preschool.html">Pre School</a></li>
        	<li><a href="teen.html">Teen Empowerment</a></li>
        </ul>
        
         <ul id="menuSubFive" class="menuVert">
        	<li><a href="newsletter.html">Newsletter</a></li>
        </ul>
        
        
        </div><!-- end "navigation" DIV-->

	  <div id="main">
			<div id="left"><img src="images/body/Precious-Jewels-Learning-Incorporated---ezekial.jpg" alt="ezekial" /></div>
			<div id="right"><img src="images/body/Precious-Jewels-Learning-Incorporated---picture-gallery.jpg" alt="pic gallery" />
		</div><!-- end "main" DIV-->
		<div style="clear: both;">
			&nbsp;
		</div><!-- end "clear" DIV-->
	</div><!-- end "wrapper" DIV-->
		<div id="footer">
		</div><!-- end "footer" DIV-->
</div>
</body>
</html>






[COLOR=#000000][FONT=Times New Roman][LEFT][FONT=verdana]p#menuHome{
	float: left;
}

#navigation {
	position:relative;
	background-color: #333;
	background-image: url(../images/navigation/Precious-Jewels-Learning-Incorporated_03.jpg);
	background-repeat: no-repeat;
	width: 820px;
	height: 47px;
	font-size: 14pt;
}

#navigation a:link, #navigation a:visited {
	font-family: Arial, Helvetica, sans-serif;
	color: white;
	text-decoration: none;
}

#navigation a:hover {
	color: #03C;
}

#navigation ul, #navigation li {
	margin:0;
	padding:0;
}

#navigation ul {
	list-style-type: none;
}


ul.menuHoriz li {
	float: left;
}

ul.menuVert {
	position: absolute;
	top: 24px;
}


#navigation li {
	display: block;
	background-color:#FF0;
	width: 130px;
	height: 25px;
	margin: 0 3px 0 0;
	padding: 0;
}
ul#menuSubTwo { left: 133px }
ul#menuSubThree { left: 266px }
ul#menuSubFive { left: 532px }[/FONT][/LEFT][/FONT][/COLOR]

[COLOR=#000000][FONT=Times New Roman][LEFT][FONT=verdana]http://www.preciousjewelslearning.org

Just letting everyone know that the submenu’s are not yet working but I would like to solve this issue first before I proceed to the next step. Thanks in advance.[/FONT][/LEFT][/FONT][/COLOR]