Back To Website Design Forum

List within a list?

  • STJ
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Mar 03, 2008
  • Posts: 11
  • Status: Offline

Post March 28th, 2008, 11:22 am

I thought I knew how to do this, and it seemed to be ok when viewing my coding. However,when validating it I got errors because of this use. Doesn´t XHTML 1.0 Strict allow this type of listings?

I did like this:

Code: [ Select ]
<ul>
               <li><a href="#vitamin_b1">Vitamin B<span id="sub1">1</span></a></li>
               <li><a href="#vitamin_b2">Vitamin B<span id="sub2">2</span></a></li>
               <li><a href="#vitamin_b3">Vitamin B<span id="sub3">3</span></a></li>
               <li><a href="#vitamin_b5">Vitamin B<span id="sub4">5</span></a></li>
               <li><a href="#vitamin_b6">Vitamin B<span id="sub5">6</span></a></li>
               <li><a href="#vitamin_b12">Vitamin B<span id="sub6">12</span></a></li>
        </ul>
                    <li><a href="#vitamin_c">Vitamin C</a></li>
                    <li><a href="#vitamin_d">Vitamin D</a></li>
            <li><a href="#vitamin_e">Vitamin E</a></li>
            <li><a href="#vitamin_k">Vitamin K</a></li>
                    </ul>
  1. <ul>
  2.                <li><a href="#vitamin_b1">Vitamin B<span id="sub1">1</span></a></li>
  3.                <li><a href="#vitamin_b2">Vitamin B<span id="sub2">2</span></a></li>
  4.                <li><a href="#vitamin_b3">Vitamin B<span id="sub3">3</span></a></li>
  5.                <li><a href="#vitamin_b5">Vitamin B<span id="sub4">5</span></a></li>
  6.                <li><a href="#vitamin_b6">Vitamin B<span id="sub5">6</span></a></li>
  7.                <li><a href="#vitamin_b12">Vitamin B<span id="sub6">12</span></a></li>
  8.         </ul>
  9.                     <li><a href="#vitamin_c">Vitamin C</a></li>
  10.                     <li><a href="#vitamin_d">Vitamin D</a></li>
  11.             <li><a href="#vitamin_e">Vitamin E</a></li>
  12.             <li><a href="#vitamin_k">Vitamin K</a></li>
  13.                     </ul>


If it´s possible to use this way of creating such a list, what am I doing wrong?

Thanks in advance!

/STJ
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post March 28th, 2008, 11:22 am

  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Joined: Sep 22, 2003
  • Posts: 6130
  • Loc: Seattle, WA
  • Status: Offline

Post March 28th, 2008, 11:40 am

HTML Code: [ Select ]
<ul>
          <li><a href="#vitamin_b1">Vitamin B<span id="sub1">1</span></a></li>
          <li><a href="#vitamin_b2">Vitamin B<span id="sub2">2</span></a></li>
          <li><a href="#vitamin_b3">Vitamin B<span id="sub3">3</span></a></li>
          <li><a href="#vitamin_b5">Vitamin B<span id="sub4">5</span></a></li>
          <li><a href="#vitamin_b6">Vitamin B<span id="sub5">6</span></a></li>
          <li><a href="#vitamin_b12">Vitamin B<span id="sub6">12</span></a></li>
      </ul>
               <li><a href="#vitamin_c">Vitamin C</a></li>
               <li><a href="#vitamin_d">Vitamin D</a></li>
         <li><a href="#vitamin_e">Vitamin E</a></li>
         <li><a href="#vitamin_k">Vitamin K</a></li>
               </ul>
  1. <ul>
  2.           <li><a href="#vitamin_b1">Vitamin B<span id="sub1">1</span></a></li>
  3.           <li><a href="#vitamin_b2">Vitamin B<span id="sub2">2</span></a></li>
  4.           <li><a href="#vitamin_b3">Vitamin B<span id="sub3">3</span></a></li>
  5.           <li><a href="#vitamin_b5">Vitamin B<span id="sub4">5</span></a></li>
  6.           <li><a href="#vitamin_b6">Vitamin B<span id="sub5">6</span></a></li>
  7.           <li><a href="#vitamin_b12">Vitamin B<span id="sub6">12</span></a></li>
  8.       </ul>
  9.                <li><a href="#vitamin_c">Vitamin C</a></li>
  10.                <li><a href="#vitamin_d">Vitamin D</a></li>
  11.          <li><a href="#vitamin_e">Vitamin E</a></li>
  12.          <li><a href="#vitamin_k">Vitamin K</a></li>
  13.                </ul>


I only see one opening <ul> tag in there, so you've got a mismatch somewhere.
The Beer Monocle. Classy.
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Joined: Feb 11, 2004
  • Posts: 6741
  • Loc: Martinsburg, WV
  • Status: Offline

Post March 28th, 2008, 12:32 pm

Your code should look something like this
Code: [ Select ]
<ul>
    <li><a href="#">Something</a></li>
    <li><a href="#">Something else</a>
    <ul>
         <li><a href="#">Subset of Something else</a></li>
         <li><a href="#">Another Subset of Something else</a></li>
    </ul></li>
    <li><a href="#">Something else again</a></li>
</ul>
  1. <ul>
  2.     <li><a href="#">Something</a></li>
  3.     <li><a href="#">Something else</a>
  4.     <ul>
  5.          <li><a href="#">Subset of Something else</a></li>
  6.          <li><a href="#">Another Subset of Something else</a></li>
  7.     </ul></li>
  8.     <li><a href="#">Something else again</a></li>
  9. </ul>

What you will get is something that looks like this:
Code: [ Select ]
* Something
* Something else
    * Subset of Something else
    * Another Subset of Something else
* Something else again
  1. * Something
  2. * Something else
  3.     * Subset of Something else
  4.     * Another Subset of Something else
  5. * Something else again
‎"Be polite, be professional, but have a plan to kill everybody you meet." Maj. Gen. James Mattis
  • STJ
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Mar 03, 2008
  • Posts: 11
  • Status: Offline

Post March 28th, 2008, 1:00 pm

Ok, I see I left out the beginning of the beginning of the list... :?

Here´s my code again, in full this time...sorry for not noticing it directly. You see, I have some problems with my perception.

Code: [ Select ]
<ul>
                    <li><a href="#vitamin_use">Vitamins and their use</a></li>
                    <li><a href="#vitamin_a">Vitamin A</a></li>
                    <li><a href="#vitamin_b">Vitamin B</a></li>
        <ul>
               <li><a href="#vitamin_b1">Vitamin B<span id="sub1">1</span></a></li>
               <li><a href="#vitamin_b2">Vitamin B<span id="sub2">2</span></a></li>
               <li><a href="#vitamin_b3">Vitamin B<span id="sub3">3</span></a></li>
               <li><a href="#vitamin_b5">Vitamin B<span id="sub4">5</span></a></li>
               <li><a href="#vitamin_b6">Vitamin B<span id="sub5">6</span></a></li>
               <li><a href="#vitamin_b12">Vitamin B<span id="sub6">12</span></a></li>
        </ul>
                    <li><a href="#vitamin_c">Vitamin C</a></li>
                    <li><a href="#vitamin_d">Vitamin D</a></li>
            <li><a href="#vitamin_e">Vitamin E</a></li>
            <li><a href="#vitamin_k">Vitamin K</a></li>
                    </ul>
  1. <ul>
  2.                     <li><a href="#vitamin_use">Vitamins and their use</a></li>
  3.                     <li><a href="#vitamin_a">Vitamin A</a></li>
  4.                     <li><a href="#vitamin_b">Vitamin B</a></li>
  5.         <ul>
  6.                <li><a href="#vitamin_b1">Vitamin B<span id="sub1">1</span></a></li>
  7.                <li><a href="#vitamin_b2">Vitamin B<span id="sub2">2</span></a></li>
  8.                <li><a href="#vitamin_b3">Vitamin B<span id="sub3">3</span></a></li>
  9.                <li><a href="#vitamin_b5">Vitamin B<span id="sub4">5</span></a></li>
  10.                <li><a href="#vitamin_b6">Vitamin B<span id="sub5">6</span></a></li>
  11.                <li><a href="#vitamin_b12">Vitamin B<span id="sub6">12</span></a></li>
  12.         </ul>
  13.                     <li><a href="#vitamin_c">Vitamin C</a></li>
  14.                     <li><a href="#vitamin_d">Vitamin D</a></li>
  15.             <li><a href="#vitamin_e">Vitamin E</a></li>
  16.             <li><a href="#vitamin_k">Vitamin K</a></li>
  17.                     </ul>


Can´t see anything wrong with this coding, when comparing it to yours. Yet the validator shows errors in this one.

Line 41, Column 5: document type does not allow element "ul" here; assuming missing "li" start-tag.
<ul>
Line 49, Column 23: document type does not allow element "li" here; missing one of "ul", "ol" start-tag.
<li><a href="#vitamin_c">Vitamin C</a></li>
Line 50, Column 23: document type does not allow element "li" here; missing one of "ul", "ol" start-tag.
<li><a href="#vitamin_d">Vitamin D</a></li>
Line 51, Column 9: document type does not allow element "li" here; missing one of "ul", "ol" start-tag.
<li><a href="#vitamin_e">Vitamin E</a></li>
Line 52, Column 9: document type does not allow element "li" here; missing one of "ul", "ol" start-tag.
<li><a href="#vitamin_k">Vitamin K</a></li>
Line 53, Column 12: end tag for "li" omitted, but OMITTAG NO was specified.
</ul>
Line 41, Column 2: start tag was here.
<ul>

As you can see, I have marked what is said to be wrong. I think these errors are very strange, since it seems to be the right way to code it. Totally confused in this matter.

Oh, and I really appreciate your help. Really great of you to help me. :)
Hope you´re able to see what´s wrong here.

Thanks in advance!

/Tobias
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Joined: Oct 02, 2007
  • Posts: 575
  • Loc: Phoenix, AZ
  • Status: Offline

Post March 28th, 2008, 3:40 pm

Take another look at Grinch's code:
Code: [ Select ]
# <ul>
#     <li><a href="#">Something</a></li>
#     <li><a href="#">Something else</a>
#     <ul>
#          <li><a href="#">Subset of Something else</a></li>
#          <li><a href="#">Another Subset of Something else</a></li>
#     </ul></li>
#     <li><a href="#">Something else again</a></li>
# </ul>
  1. # <ul>
  2. #     <li><a href="#">Something</a></li>
  3. #     <li><a href="#">Something else</a>
  4. #     <ul>
  5. #          <li><a href="#">Subset of Something else</a></li>
  6. #          <li><a href="#">Another Subset of Something else</a></li>
  7. #     </ul></li>
  8. #     <li><a href="#">Something else again</a></li>
  9. # </ul>

This is an easy thing to miss, and I had the same problem not too long ago. Notice how he didn't close the <li> tag before he started the nested <ul>?
phoenix web design
  • STJ
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Mar 03, 2008
  • Posts: 11
  • Status: Offline

Post March 29th, 2008, 1:25 am

Thanks a lot, Jameson! Yes, now I got everything right. You were right, I didn´t notice that I was to leave it open and close it at another place instead.

Thank you very much, spork and Grinch! :D

Couldn´t have manageed this without the help of you all. Everything validates correctly now. :mrgreen: :D :lol:

/Tobias
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23404
  • Loc: Woodbridge VA
  • Status: Offline

Post March 29th, 2008, 6:36 am

For future viewers/reference, here's a good place to test your code

http://www.w3schools.com/html/tryit.asp ... tml_lists4

Remove everything in the left and paste this code to see what nested lists should look like:

Code: [ Select ]
<html>
<body>

<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
    <ul>
     <li>Coffee</li>
     <li>Tea</li>
     <li>Milk</li>
         <ul>
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
             <ul>
                <li>Coffee</li>
                <li>Tea</li>
                <li>Milk</li>
             </ul>
         </ul>
    </ul>
</ul>

</body>
</html>
  1. <html>
  2. <body>
  4. <h4>An Unordered List:</h4>
  5. <ul>
  6. <li>Coffee</li>
  7. <li>Tea</li>
  8. <li>Milk</li>
  9.     <ul>
  10.      <li>Coffee</li>
  11.      <li>Tea</li>
  12.      <li>Milk</li>
  13.          <ul>
  14.             <li>Coffee</li>
  15.             <li>Tea</li>
  16.             <li>Milk</li>
  17.              <ul>
  18.                 <li>Coffee</li>
  19.                 <li>Tea</li>
  20.                 <li>Milk</li>
  21.              </ul>
  22.          </ul>
  23.     </ul>
  24. </ul>
  26. </body>
  27. </html>
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.

Page 1 of 1

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 124 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.