View Full Version : Navigation positioning blues

06-14-2010, 03:44 PM
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 tried separating 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:

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

<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">
<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 id="menuSubTwo" class="menuVert">
<li><a href="mission.html">Mission Statement</a></li>

<ul id="menuSubThree" class="menuVert">
<li><a href="preschool.html">Pre School</a></li>
<li><a href="teen.html">Teen Empowerment</a></li>

<ul id="menuSubFive" class="menuVert">
<li><a href="newsletter.html">Newsletter</a></li>

</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;">
</div><!-- end "clear" DIV-->
</div><!-- end "wrapper" DIV-->
<div id="footer">
</div><!-- end "footer" DIV-->

float: left;

#navigation {
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 {

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

ul.menuHoriz li {
float: left;

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

#navigation li {
display: block;
width: 130px;
height: 25px;
margin: 0 3px 0 0;
padding: 0;
ul#menuSubTwo { left: 133px }
ul#menuSubThree { left: 266px }
ul#menuSubFive { left: 532px }


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.