SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Location
    Belgium
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Validation problem Div inside ul

    I've got a problem, I'm creating some kind of menu with ul and li but if they click on a link, the menu should go open so more links come out but i'm trying this with <div> inside a <ul> but then I get a validation error, is there something that I can change the code and get the same result?
    HTML Code:
    <ul>
                    	<li>Knight Online(USA)</li>
                        <div>
                        	<ul>
                            	<li>News</li>
                                <li>Guides</li>
                                <li>Heavenfire Download</li>
                                <li>Heavenfire Purchase</li>
                            </ul>
                        </div>
                        <li>Hero Online(USA)</li>
                        <div>
                        	<ul>
                            	<li>News</li>
                                <li>Guides</li>
                                <li>Heavenfire Download</li>
                                <li>Heavenfire Purchase</li>
                            </ul>
                        </div>
                    </ul>

  2. #2
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,692
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Why would you put a DIV inside a UL? Nested menus/lists should be done like this:

    Code html4strict:
    <ul id="navigation">
      <li>Knight Online (USA)
        <ul>
          <li>News</li>
          <li>Guides</li>
          <li>Heavenfire Download</li>
          <li>Heavenfire Purchase</li>
        </ul>
      <li>Hero Online (USA)
        <ul>
          <li>News</li>
          <li>Guides</li>
          <li>Heavenfire Download</li>
          <li>Heavenfire Purchase</li>
        </ul>
      </li>
    </ul>

    You can then use CSS to style the menu as you want, e.g.
    Code css:
    #navigation li ul {
      display: none;
    }
     
    #navigation li:hover ul {
      display: block;
    }
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Location
    Belgium
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah stupid me
    thanks I'll try that.

  4. #4
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only legal child of UL is LI. LI can have block elements such as DIV as a chile, but UL cannot.
    Ed Seedhouse

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Location
    Belgium
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the problem is I have list-style in my li and the other don't have to and I was hoping I didn't have to make a class for that

    but if that's the only solution I'll have to do that

  6. #6
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,692
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    If you are thinking about the nested ULs and LIs, you can specify the level of embedding in the stylesheet, e.g.
    Code css:
    ul {
      list-style-type: none;
    }
     
    ul li ul {
      list-style-type: disc;
    }
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  7. #7
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use divs or spans inside lists when we do fancy dropdown menus, using background gradients, rounded corners and dropshadows that all need to grow if the list grows. And even under xhtml-strict these validate. the trick is to have the div inside the <li> which is hovered. w3c validates this just fine.

    e.g.
    <li class="hasDropdown" id="mainNav_broadband"><a href="#" class="parent">Broadband Communications</a> <span class="dropdown-top"></span>
    <div class="dropdown-wrapper">
    <ul>
    <li class="first hasDropdown secondary"><a href="#" class="secondaryParent">Broadband Comm 1</a>
    <div class="dropdown-wrapper">
    <ul>
    <li><a href="#">Broadband Comm 1</a></li>
    <li><a href="#">Broadband Comm 2</a></li>
    <li><a href="#">Broadband Comm 3</a></li>
    <li><a href="#">Broadband Comm 4</a></li>
    </ul><!-- /second level dropdown-->

    </div><!-- /dropdownwrapper-->
    </li>
    <li><a href="#">Broadband Comm 2</a></li>
    <li><a href="#">Broadband Comm 3</a></li>
    <li><a href="#">Broadband Comm 4</a></li>
    </ul>
    </div><!-- /.dropdown-wrapper -->
    </li>

    Anne Stahl
    UI developer for Level Studios

  8. #8
    SitePoint Addict
    Join Date
    Feb 2007
    Posts
    270
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The original issue was that you can't have a div as child of ul, which is right, but you can have div as child of li, so you *can* do as Annestahl suggested.

    Also, in the earlier example code given, you should close the li that contains the nested ul after you close the ul.

    One thing also that almost every CMS ignores is that you cannot have an empty ul. Every ul is required to have at least one li.


Bookmarks

Posting Permissions

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