Problem with alignment on #navbar

[nickHiebert]

The site: http://bit.ly/dnzFFe (Just used bit.ly so Google doesn't pick up the name) (Firefox Only)

If you look at the navigation across the top it's not aligned properly.

I want to center them so they align properly.

Home - #navbar ul li#activenav

About - ul#aboutnav

Class Info - ul#classnav

A Typical Lesson - ul#agegrpnav

Studio Location, Music Downloads and Contact - #navbar li.mainnav

I'm not worrying about the drop down menus quite yet. Once there aligned probably I'll deal with them.

Help will be appreciated

[skywalker2208]

You need to put the list tags around your sub unordered list tags. Plus you are missing the starting list tags for your sub unordered list tags. I marked the closing tags in red.

<div id="navbar">
    	<ul>
			<li id="activenav"><a href="#">Home</a></li>

            <ul id="aboutnav"><a href="#">About</a></li>
                	<li class="aboutnavitem"><a href="/the-teacher.html">The Teacher</a></li>
                    <li class="aboutnavitem"><a href="/goal-of-early-childhood-music.html">Goal of Early Childhood Music</a></li>
            </ul>
                
            <ul id="classnav"><a href="#">Class Info</a></li>
                    <li class="classnavitem"><a href="/take-home-materials.html">Take Home Materials</a></li>

                    <li class="classnavitem"><a href="/class-times-and-fees.html">Class Times & Fees</a></li>
            </ul>
                
            <ul id="agegrpnav"><a href="#">A Typical Lesson</a></li>
                        	<li class="agegrpitem"><a href="/a-typical-lesson-birth-to-age-4.html">Birth to Age 4</a></li>
                            <li class="agegrpitem"><a href="/a-typical-lesson-jk-sk-grade-1.html">JK/SK/Grade 1</a></li>
            </ul>

            
            <li class="mainnav"><a href="/studio-location.html">Studio Location</a></li>
            <li class="mainnav"><a href="/music-downloads.html">Music Downloads</a></li>
            <li class="mainnav"><a href="/contact.php">Contact</a></li>
         </ul>
	</div><!-- end navbar-->

[SB65]

Are you trying to centre the links on your top nav? If so you need to apply text-align:center to #navbar ul. It loks wrong at the moment because of the second level menu under Home.

[Rowsdower!]

The general "rule of thumb" for CSS debugging is to make sure your HTML is fully validated first. If your HTML is invalid there can be any number of unexpected results for the CSS.

Check out the W3.org validator.

You currently have 19 errors and 1 warning.

Enabling the "verbose output" option gives you a few hints at how to fix the errors and warnings you see.

Once that is sorted out the CSS debugging can resume.

[nickHiebert]

It's now Valid. Now I have no idea how to make it display across the navbar. I know if you do height: 20px; and line-height: 20px and the navbar is 20px in height it should automatically center and put all the items there.

Please Help.

<div id="navbar">
    	<ul>
		        <li id="homenav"><a href="#">Home</a></li>
                        <li><a href="#" onmouseover="mopen('aboutnav')" onmouseout="mclosetime()">About</a>
            	           <div id="aboutnav" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
                		<a href="/the-teacher.html">The Teacher</a>
                                <a href="/goal-of-early-childhood-music.html">Goal</a>
                            </div>
                        </li>   
            <li><a href="#" onmouseover="mopen('classnav')" onmouseout="mclosetime()">Class Info</a>
            	<div id="classnav" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> 
						<a href="/take-home-materials.html">Take Home Materials</a>
                    	<a href="/class-times-and-fees.html">Class Times and Fees</a>
                </div>
   			</li>
            <li><a href="#" onmouseover="mopen('agegrpnav')" onmouseout="mclosetime()">A Typical Lesson</a>
            	<div id="agegrpnav" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
                        <a href="/a-typical-lesson-birth-to-age-4.html">Birth to Age 4</a>
                        <a href="/a-typical-lesson-jk-sk-grade-1.html">JK/SK/Grade 1</a>
                </div>
            </li>          
            <li><a href="#" onmouseover="mopen('medianav')" onmouseout="mclosetime()">Media</a>
            	<div id="medianav" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> 
                		<a href="/pictures.html">Pictures</a>
                    	<a href="/music-downloads.html">Music Downloads</a>
                </div>   	
             </li>   
           	<li class="locationnav"><a href="/studio-location.html">Studio Location</a></li>
            <li class="contactnav"><a href="/contact.php">Contact</a></li>
         </ul>
</div><!-- end navbar-->