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.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Navigation not valid (Div inside LI)

    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!

  • #2
    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
    A span can't be a direct child of a ul element. Try this
    Code:
    <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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Dec 2006
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Maybe try ending the ul before you type span and start it back up afterwards?
    Code:
    </ul>
    <span id="foobar">
    <ul>
    Or just apply your styles to the li's or a's and use classes.
    Code:
    <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.

  • #4
    Regular Coder
    Join Date
    Jul 2008
    Posts
    195
    Thanks
    3
    Thanked 11 Times in 11 Posts
    Can we take a look at your CSS? I want to see what you have in their.

    Thanks.

  • #5
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for responses - i'll try out both ideas from Aero and Burr - thanks for that

    My css:

    Code:
    
    #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;
    	}

  • #6
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Best i post a link too

    http://www.johnnyrules.com/speedy


  •  

    Posting Permissions

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