...

View Full Version : Problems with vailding page



nickHiebert
07-02-2010, 06:20 PM
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:


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

Apostropartheid
07-02-2010, 06:26 PM
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:


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

mbaker
07-02-2010, 07:39 PM
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:


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

jhaycutexp
07-02-2010, 07:58 PM
there are missing closing tags on your list



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

nickHiebert
07-03-2010, 08:10 PM
there are missing closing tags on your list



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

nickHiebert
07-03-2010, 08:21 PM
This seems to make it more valid.


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

nickHiebert
07-03-2010, 08:23 PM
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:


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

nickHiebert
07-03-2010, 08:24 PM
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:


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

nickHiebert
07-03-2010, 08:27 PM
Got it valid.

Donkey
07-04-2010, 02:16 AM
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.

nickHiebert
07-04-2010, 06:55 PM
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)

_Aerospace_Eng_
07-04-2010, 07:06 PM
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.

jhaycutexp
07-04-2010, 11:31 PM
How are thoughs missing tags?

cause ul and li... always.. comes in pair... the format goes like this..



<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



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

nickHiebert
07-05-2010, 02:36 AM
cause ul and li... always.. comes in pair... the format goes like this..



<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



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


<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:
<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.

_Aerospace_Eng_
07-05-2010, 02:59 AM
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/

jhaycutexp
07-05-2010, 09:15 PM
yeah how would you like it to look like??

like a drop down menu? seeing your site.. it's most likely to be the vertical type of menu.. and when you hover on the menu links, a pop up menu on the right side should be coming out is that it?

if thats the case, youre gonna use the position relative style in that kind of menus..

nickHiebert
07-07-2010, 05:44 PM
yeah how would you like it to look like??

like a drop down menu? seeing your site.. it's most likely to be the vertical type of menu.. and when you hover on the menu links, a pop up menu on the right side should be coming out is that it?

if thats the case, youre gonna use the position relative style in that kind of menus..

Well I want the nav links to go across the top. Then when you hover over About, Class Info, A Typical Lesson, Media. The other links appear. But when I added them. Everything moved down.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum