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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Location
    London, ON
    Posts
    112
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Exclamation Problems with vailding page

    The site: http://bit.ly/dnzFFe (Just used bit.ly its safe)

    I learned how to vaild pages. But this isn't making any sense to me.

    Something like this SHOULD work:

    Code:
    	<div id="navbar">
        	<ul>
    			<li id="activenav"><a href="#">Home</a></li>
                <li id="aboutnav"><a href="#">About</a></li>
                	<ul>
                    	<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>
                    
                <li id="classnav"><a href="">Class Info</a></li>
                	<ul>
                        <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 and Fees</a></li>
                	</ul>
                    
                <li id="agegrpnav"><a href="#">A Typical Lesson</a></li>
                	<ul>
                            	<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 id="medianav"><a href="#">Media</a></li>
                	<ul>
                    	<li class="medianavitem"><a href="/pictures.html">Pictures</a></li>
                        <li class="medianavitem"><a href="/music-downloads.html">Music Downloads</a></li>
                    </ul>	
                    
               	<li class="mainnav"><a href="/studio-location.html">Studio Location</a></li>
                <li class="mainnav"><a href="/contact.php">Contact</a></li>
             </ul>
    	</div><!-- end navbar-->
    It just doesn't make sense to me. I learned how to do this in school, now it's saying I'm doing it wrong.

    Please help.

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    That's because you are.
    The only child a ul element can have is a li. You have a ul as a direct descendant of a ul, which doesn't work. You must either enclose it in a separate li or do something like this:
    Code:
    <ul id="navigation">
      <li id="about">
        <a href="/about">About</a>
        <ul>
          <li>
            <a href="/about/teacher">The Teacher</li>
          </li>
          <li>
            <a href="/about/goal">The Goal</li>
          </li>
        </ul>
      </li>
    </ul>

  • #3
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    My guess is that you want the inner ul to be associated with the li that precede them. If that is so then you need to place the inner ul inside of the preceding li as in:

    Code:
    <div id="navbar">
      <ul>
        <li id="activenav"><a href="#">Home</a></li>
        <li id="aboutnav"><a href="#">About</a>
          <ul>
            <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>
        </li>
        
        <li id="classnav"><a href="">Class Info</a>
          <ul>
            <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 and Fees</a></li>
          </ul>
        </li>
    
        <li id="agegrpnav"><a href="#">A Typical Lesson</a>
          <ul>
            <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>
    
        <li id="medianav"><a href="#">Media</a>
          <ul>
            <li class="medianavitem"><a href="/pictures.html">Pictures</a></li>
            <li class="medianavitem"><a href="/music-downloads.html">Music Downloads</a></li>
          </ul>	
        </li>
    
        <li class="mainnav"><a href="/studio-location.html">Studio Location</a></li>
        <li class="mainnav"><a href="/contact.php">Contact</a></li>
      </ul>
    </div><!-- end navbar-->
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • #4
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    262
    Thanks
    3
    Thanked 12 Times in 12 Posts
    there are missing closing tags on your list

    Code:
    <ul>
    	    <li id="activenav"><a href="#">Home</a></li>
                <li id="aboutnav"><a href="#">About</a></li>
                	<ul>
                    	<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>
                 </li><!--missing-->
                    
                <li id="classnav"><a href="">Class Info</a></li>
                	<ul>
                        <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 and Fees</a></li>
                	</ul>
    </li><!--missing-->
    
    </ul>

  • #5
    Regular Coder
    Join Date
    Oct 2009
    Location
    London, ON
    Posts
    112
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jhaycutexp View Post
    there are missing closing tags on your list

    Code:
    <ul>
    	    <li id="activenav"><a href="#">Home</a></li>
                <li id="aboutnav"><a href="#">About</a></li>
                	<ul>
                    	<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>
                 </li><!--missing-->
                    
                <li id="classnav"><a href="">Class Info</a></li>
                	<ul>
                        <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 and Fees</a></li>
                	</ul>
    </li><!--missing-->
    
    </ul>
    How are thoughs missing tags?

  • #6
    Regular Coder
    Join Date
    Oct 2009
    Location
    London, ON
    Posts
    112
    Thanks
    4
    Thanked 0 Times in 0 Posts
    This seems to make it more valid.

    Code:
    	<div id="navbar">
        	            <ul>
    			<li id="activenav"><a href="#">Home</a></li>
                            <li 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</a></li>
                    
                            <li 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 and Fees</a></li>
       
                            <li 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>
                           
                            <li id="medianav"><a href="#">Media</a></li>
                    		<li class="medianavitem"><a href="/pictures.html">Pictures</a></li>
                        	        <li class="medianavitem"><a href="/music-downloads.html">Music Downloads</a></li>   	
                    
               	        <li class="mainnav"><a href="/studio-location.html">Studio Location</a></li>
                            <li class="mainnav"><a href="/contact.php">Contact</a></li>
                       </ul>
    	       </div><!-- end navbar-->
    It still has some validation issues though.

  • #7
    Regular Coder
    Join Date
    Oct 2009
    Location
    London, ON
    Posts
    112
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Apostropartheid View Post
    That's because you are.
    The only child a ul element can have is a li. You have a ul as a direct descendant of a ul, which doesn't work. You must either enclose it in a separate li or do something like this:
    Code:
    <ul id="navigation">
      <li id="about">
        <a href="/about">About</a>
        <ul>
          <li>
            <a href="/about/teacher">The Teacher</li>
          </li>
          <li>
            <a href="/about/goal">The Goal</li>
          </li>
        </ul>
      </li>
    </ul>
    That didn't work.

  • #8
    Regular Coder
    Join Date
    Oct 2009
    Location
    London, ON
    Posts
    112
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mbaker View Post
    My guess is that you want the inner ul to be associated with the li that precede them. If that is so then you need to place the inner ul inside of the preceding li as in:

    Code:
    <div id="navbar">
      <ul>
        <li id="activenav"><a href="#">Home</a></li>
        <li id="aboutnav"><a href="#">About</a>
          <ul>
            <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>
        </li>
        
        <li id="classnav"><a href="">Class Info</a>
          <ul>
            <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 and Fees</a></li>
          </ul>
        </li>
    
        <li id="agegrpnav"><a href="#">A Typical Lesson</a>
          <ul>
            <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>
    
        <li id="medianav"><a href="#">Media</a>
          <ul>
            <li class="medianavitem"><a href="/pictures.html">Pictures</a></li>
            <li class="medianavitem"><a href="/music-downloads.html">Music Downloads</a></li>
          </ul>	
        </li>
    
        <li class="mainnav"><a href="/studio-location.html">Studio Location</a></li>
        <li class="mainnav"><a href="/contact.php">Contact</a></li>
      </ul>
    </div><!-- end navbar-->
    I've tried that before but, it didn't work.

  • #9
    Regular Coder
    Join Date
    Oct 2009
    Location
    London, ON
    Posts
    112
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Got it valid.

  • #10
    Regular Coder Donkey's Avatar
    Join Date
    Sep 2003
    Location
    Blackfield UK
    Posts
    311
    Thanks
    1
    Thanked 35 Times in 35 Posts
    The CSS has several errors.

    Have you looked at it in Firefox? The Navigation which I assume you intend to be horizontal in the top bar is all over the left hand column.
    " 90% of everything is crud" - Theodore Sturgeon
    Filthy Beast - a 60's Rock Band

  • #11
    Regular Coder
    Join Date
    Oct 2009
    Location
    London, ON
    Posts
    112
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Donkey View Post
    The CSS has several errors.

    Have you looked at it in Firefox? The Navigation which I assume you intend to be horizontal in the top bar is all over the left hand column.
    What did you look under? The site is going to be validated under CSS3. Not CSS 2.1 (the default)

  • #12
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I think he is referring to the display of the navigation. Right now it is on top of the sidebar but I don't think you've styled it yet. The only errors found in the CSS are the border stuff to make the round corners and shadows.
    Last edited by _Aerospace_Eng_; 07-04-2010 at 07:16 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #13
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    262
    Thanks
    3
    Thanked 12 Times in 12 Posts
    Quote Originally Posted by nickHiebert View Post
    How are thoughs missing tags?
    cause ul and li... always.. comes in pair... the format goes like this..

    Code:
    <ul>
        <li>Menu Item1</li>
        <li>Menu Item2</li>
        <li>Menu Item3</li>
        <li>Menu Item4</li>
        <li>Menu Item5
            <ul>
                 <li>Menu Sub Item</li>
                 <li>Menu Sub Item</li>
                 <li>Menu Sub Item</li>
                 <li>Menu Sub Item</li>
            </ul>
         </li>
    </ul>
    a list within a list.. unlike the code you posted, it was not following the format.. sorry I inspected it again.. it seems that it was not missing.. but it was on the wrong place.. here's the new code

    Code:
    <ul>
    	    <li id="activenav"><a href="#">Home</a></li>
                <li id="aboutnav"><a href="#">About</a>
                	<ul>
                    	<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>
                 </li>
                    
                <li id="classnav"><a href="">Class Info</a>
                	<ul>
                        <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 and Fees</a></li>
                	</ul>
                  </li>
    
    </ul>

  • #14
    Regular Coder
    Join Date
    Oct 2009
    Location
    London, ON
    Posts
    112
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jhaycutexp View Post
    cause ul and li... always.. comes in pair... the format goes like this..

    Code:
    <ul>
        <li>Menu Item1</li>
        <li>Menu Item2</li>
        <li>Menu Item3</li>
        <li>Menu Item4</li>
        <li>Menu Item5
            <ul>
                 <li>Menu Sub Item</li>
                 <li>Menu Sub Item</li>
                 <li>Menu Sub Item</li>
                 <li>Menu Sub Item</li>
            </ul>
         </li>
    </ul>
    a list within a list.. unlike the code you posted, it was not following the format.. sorry I inspected it again.. it seems that it was not missing.. but it was on the wrong place.. here's the new code

    Code:
    <ul>
    	    <li id="activenav"><a href="#">Home</a></li>
                <li id="aboutnav"><a href="#">About</a>
                	<ul>
                    	<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>
                 </li>
                    
                <li id="classnav"><a href="">Class Info</a>
                	<ul>
                        <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 and Fees</a></li>
                	</ul>
                  </li>
    
    </ul>
    Here is what I have now.

    Code:
    <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/Updates</a>
                	<div id="medianav" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> 
                     <a href="/pictures.html">Pictures</a>
                     <a href="/music-downloads.html">Music Downloads</a>
                     <a href="/rss">RSS</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-->
    Also with:
    Code:
    <script type="text/javascript">
    
    var timeout	= 500;
    var closetimer	= 0;
    var ddmenuitem	= 0;
    
    // open hidden layer
    function mopen(id)
    {	
    	// cancel close timer
    	mcancelclosetime();
    
    	// close old layer
    	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    
    	// get new layer and show it
    	ddmenuitem = document.getElementById(id);
    	ddmenuitem.style.visibility = 'visible';
    
    }
    // close showed layer
    function mclose()
    {
    	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    }
    
    // go close timer
    function mclosetime()
    {
    	closetimer = window.setTimeout(mclose, timeout);
    }
    
    // cancel close timer
    function mcancelclosetime()
    {
    	if(closetimer)
    	{
    		window.clearTimeout(closetimer);
    		closetimer = null;
    	}
    }
    
    // close layer when click-out
    document.onclick = mclose; 
    </script>
    That is the current margin for aboutnav - div#aboutnav { margin: 0 10px 0 10px; }

    It should be positioning different if you ask me.

  • #15
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    How were you wanting it to show up? You need to float your li elements if you want them to be side by side. This tutorial might help you. Its for a horizontal drop down menu.

    http://www.htmldog.com/articles/suckerfish/dropdowns/
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

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