Search code examples
htmlxhtmlnestedhtml-listsxhtml-1.0-strict

Nested Incrementing Lists XHTML + Slidy

I am new to XHTML and I could use a little bit of help. I am using a tool called 'Slidy' to help me put together a slideshow on the net, I would like to make an incremented list so that when you advance the slideshow (click or press the right arrow) the next item appears. This should be the case whether the next item is a new item in the outer list or the first item in the nested list. Currently when I view this in a browser I need to advance the slide an extra time to get to the nested list.

Here is what I have:


< ?xml version="1.0" encoding="utf-8"? >
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" > 
< head > 
  < title >Generic Title< /title > 
  < meta name="copyright" 
   content="Copyright © 2010 Jordan" / > 
  < link rel="stylesheet" type="text/css" media="screen, projection, print" 
   href="./w3c-blue2.css" / > 
  < script src="./slidy.js" 
   charset="utf-8" type="text/javascript" >< /script > 
< /head >



< div class="slide" >
    < h1 >Header Text< /h1 >
    < p >The generic preamble to the list:< /p >
    < ol class="incremental", type="1" >
       < li >To do generic things vaguely with some programming language< /li >
       < li >To utilize 'Slidy' as a tool for presentation of progress by:< /li >
            < ol class="incremental", type="a" >
                < li >Learning This< /li >
                < li >Learning That< /li >
                < li >Implementing the knowledge into a 'Slidy' slideshow< /li >
            < /ol >
    < /ol >
< /div >

While were at it, could someone tell me how to get XHTML tags into the text fields of S.O. without adding those extra spaces.

Solution

  • The issue is that the nested list is not considered a list item of the outer list, so to you need to move the tags around so that the </li> after the : is after the entire nested list. like so:

    < div class="slide" >
    < h1 >Header Text< /h1 >
    < p >The generic preamble to the list:< /p >
    < ol class="incremental", type="1" >
       < li >To do generic things vaguely with some programming language< /li >
       < li >To utilize 'Slidy' as a tool for presentation of progress by:< !--move this -->
            < ol class="incremental", type="a" >
                < li >Learning This< /li >
                < li >Learning That< /li >
                < li >Implementing the knowledge into a 'Slidy' slideshow< /li >
            < /ol >
       < /li >< !-- over here-->
    < /ol >
< /div >

    Alternatively you could make the first item in the nested list class="non-incremental". That would be more like a workaround its probably better style to do the aforementioned solution