...

View Full Version : Navigation not valid (Div inside LI)



johnnyrules
07-17-2008, 05:42 PM
Hi all - 1st time poster - so go easy. Quite excited about using these forums to pass on what i know and learn more.

I've been out the coding for a few years now, as a print and web designer it can go either way, but im back into it and most likely missing a few tricks.

I work on a Mac, so have to get my clients to paste me screenshots of IE.

The left-hand navigation seems to be misplaced, so my initial reaction is to fly over to W3C Validator and see what comes up.

Unfortunately, nesting DIV inside UL / LI throws up a problem - and also a problem if i change it to SPAN. Although this might improve the visual result, i'd like to find out what im doing wrong - or what can be recommended?

Heres the code:



<!-- LEFT NAV -->
<div id="leftnav">

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products in stock</a></li>

<span id="subnav">
<li><a href="#">Health &amp Safety</a></li>

<span id="subsubnav">
<li><a href="#">Hand Arm Vibration</a></li>
<li><a href="#">Working at Height</a></li>
<li><a href="#">Lighting</a></li>
<li><a href="#">Manual Handling</a></li>
<li><a href="#">Noise</a></li>
<li><a href="#">Dust</a></li>
<li><a href="#">Confined Spaces</a></li>
</span>

<li><a href="#">Lifting</a></li>
<li><a href="#">Power</a></li>

<span id="subsubnav">
<li><a href="#">Pumps</a></li>
<li><a href="#">Generators</a></li>
<li><a href="#">Compressors</a></li>
</span>

<li><a href="#">Dust</a></li>
<li><a href="#">Banners</a></li>
<li><a href="#">Supply Chain</a></li>
<li><a href="#">Space</a></li>
<li><a href="#">Survey</a></li>
<li><a href="#">Group Marketing</a></li>
<li><a href="#">Specialist branches</a></li>
</span>

<li><a href="#">Archive Products<br /> <br /> (stocks not held)</a></li>

</ul>

</div><!-- LEFT NAV END -->



If needed - i can post links and also IE screenshot if that helps.

As you notice - the subnav / subsubnav are simple styles (looks like a drop down) like indent, bg colour etc

I've also noticed people using DL and DD tags - could someone direct me to some resources for this? or maybe a forum post about it?

Thanks in advance for replies!

_Aerospace_Eng_
07-17-2008, 06:04 PM
A span can't be a direct child of a ul element. Try this

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products in stock</a></li>

<li id="subnav">
<ul>
<li><a href="#">Health &amp Safety</a></li>

<li class="subsubnav">
<ul>
<li><a href="#">Hand Arm Vibration</a></li>
<li><a href="#">Working at Height</a></li>
<li><a href="#">Lighting</a></li>
<li><a href="#">Manual Handling</a></li>
<li><a href="#">Noise</a></li>
<li><a href="#">Dust</a></li>
<li><a href="#">Confined Spaces</a></li>

<li><a href="#">Lifting</a></li>
<li><a href="#">Power</a></li>

<li class="subsubnav">
<ul>
<li><a href="#">Pumps</a></li>
<li><a href="#">Generators</a></li>
<li><a href="#">Compressors</a></li>
</ul>
</li>

<li><a href="#">Dust</a></li>
<li><a href="#">Banners</a></li>
<li><a href="#">Supply Chain</a></li>
<li><a href="#">Space</a></li>
<li><a href="#">Survey</a></li>
<li><a href="#">Group Marketing</a></li>
<li><a href="#">Specialist branches</a></li>
</ul>
</li>
<li><a href="#">Archive Products<br /> <br /> (stocks not held)</a></li>

</ul>
You will need adjust the CSS but it should get you in the right direction. You also need to use classes for your subsubnavs since you can only have one ID.

Burr
07-17-2008, 06:10 PM
Maybe try ending the ul before you type span and start it back up afterwards?


</ul>
<span id="foobar">
<ul>


Or just apply your styles to the li's or a's and use classes.


<li class="subnav1">foo</li>
<li class="subnav1">foo</li>
<li class="subnav1">foo</li>

<li class="subnav2">bar</li>
<li class="subnav2">bar</li>
<li class="subnav2">bar</li>


Just a thought. Depends what you are trying to accomplish with the spans/divs as well. Probably a better way of doing this but it should validate at least.

macwiz
07-17-2008, 11:31 PM
Can we take a look at your CSS? I want to see what you have in their.

Thanks.

johnnyrules
07-18-2008, 02:19 PM
Thanks for responses - i'll try out both ideas from Aero and Burr - thanks for that

My css:





#leftnav {
float: left;
background: #fff;
width: 200px;
}


#leftnav a {
text-decoration: none;
font-size: 0.9em;
font-weight: bold;
background: #300e6f;
color: #fff;
margin: 0 0 2px 0;
padding: 10px 0 10px 20px;
text-align: left;
display: block;
}

#leftnav a:hover {
background: #b4b4ee;
color: #300e6f;
}

#leftnav ul {
list-style: none;
background: #fff;
margin: 0;
padding: 0;
}

#leftnav li {
list-style: none;
background: #fff;
margin: 0;
padding: 0;
}


#leftnav #subnav a {
text-decoration: none;
font-size: 0.9em;
font-weight: bold;
background: #edd9db;
color: #300e6f;
margin: 0 0 2px 0;
padding: 5px 0 5px 30px;
text-align: left;
display: block;
border-right: #fff solid 5px;
border-left: #fff solid 5px;
}


#leftnav #subnav a:hover {
background: #300e6f;
color: #fff;
}



#leftnav #subsubnav a {
text-decoration: none;
font-size: 0.9em;
font-weight: bold;
background: #fff;
color: #300e6f;
margin: 0 0 2px 0;
padding: 5px 0 5px 30px;
text-align: left;
display: block;
}


#leftnav #subsubnav a:hover {
background: #fff;
color: #000;
}

johnnyrules
07-18-2008, 02:45 PM
Best i post a link too

http://www.johnnyrules.com/speedy



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum