treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Simple html question

  • So I am making this ENORMOUS mega-menu and Im obviously doing something wrong as I get 87 errors when I test the fragment on w3c (xhtml strict).

    Here is a piece of the code. problem area described below.

    <ul class=\"mainmenu\">
    <li class=\"level-one products\"><a href=\"/products\" title=\"Products\" class=\"top-level\">Products</a>
    <ul class=\"subnav\">
    <div class=\"column\">
    <li class=\"level-two title\">About Our Products</li>
    <li class=\"level-two\"><a href=\"/products/about\" title=\"About Our Products\">About Our Products</a></li>
    <li class=\"level-two\"><a href=\"/products/environmental-footprint\" title=\"Environmental Footprint\">Environmental Footprint</a></li>
    <li class=\"level-two\"><a href=\"/products/advantage\" title=\"Catalyst Advantage\">Catalyst Advantage</a></li>
    <li class=\"level-two\"><a href=\"/products/showcase\" title=\"Product Showcase\">Product Showcase</a></li>
    <li class=\"level-two\"><a href=\"/products/how\" title=\"How We Make Our Products\">How We Make Our Products</a></li>
    <li class=\"level-two\"><a href=\"/products/paper-matters\" title=\"Paper Matters\">Paper Matters</a></li>
    <li class=\"level-two\"><a href=\"/products/glossary\" title=\"Glossary\">Glossary</a></li>
    </div>
    <div class=\"column\">
    <li class=\"level-two title\">Environmental Footprint</li>
    <li class=\"level-two\"><a href=\"/products/recycled\" title=\"Recycled\">Recycled</a></li>
    <li class=\"level-two\"><a href=\"/products/carbon-neutral\" title=\"Carbon Neutral\">Carbon Neutral</a></li>
    <li class=\"level-two\"><a href=\"/products/certified-fibre\" title=\"Certified Fibre\">Certified Fibre</a></li>
    </div>
    <div class=\"column\">
    <li class=\"level-two title\">Find a Product</li>
    <li class=\"level-two\"><label>Choose a Category</label>
    <select>
    <option value=\"newsprint\">Newsprint</option>
    <option value=\"directory\">Directory</option>
    <option value=\"coated\">Coated</option>
    <option value=\"uncoated\">Uncoated</option>
    <option value=\"pulp\">Pulp</option>
    </select>
    </li>
    <li class=\"level-two\"><label>Choose an End Use</label>
    <select>
    <option value=\"annual-reports\">Annual Reports</option>
    <option value=\"calendars\">Calendars</option>
    <option value=\"catalogues\">Catalogues</option>
    <option value=\"direct-mail\">Direct Mail</option>
    <option value=\"inserts\">Inserts</option>
    <option value=\"magazines\">Magazines</option>
    <option value=\"posters\">Posters</option>
    <option value=\"digital-printing\">Digital Printing</option>
    <option value=\"greeting-cards\">Greeting Cards</option>
    <option value=\"leaflets\">Leaflets</option>
    <option value=\"reports\">Reports</option>
    </select>
    </li>
    </div>

    <div class=\"column\">
    <li class=\"level-two title\">Contact</li>
    <li class=\"level-two\"><a href=\"/contact/sales\" title=\"Contact Sales Team\">Contact Sales Team</a></li>
    <li class=\"level-two\"><a href=\"/contact/technical-team\" title=\"Contact Technical Team\">Contact Technical Team</a></li>
    </div>
    </ul>
    </li>
    </ul>


    On the 2nd line, you see how I have a link (within the li)? For some reason it does not like that at all. That is the main navigation and the list beneath is the dropdown. Am I putting something in the wrong order? I don't get it lol.

    FYI:
    I have tried taking the column divs out (does not fix the problem).
  • Well I just saved your code inside a
    <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"
    \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
    page and ran it through the validator at http://validator.w3.org/#validate_by_input and got 20 errors. Removed all of the divs and it validated.

    I'm guessing from the "div class column" that you want to break it apart for styling. I think I would go with 4 separate ul's.
  • haha... I think I have been playing with this for too long and it is turning into a huge convoluted monster. I am going to start fresh (sans divs) and go from there.

    Thanks for your help :P sometimes you just need an extra set of eyes :shock:
  • You could also try using classes instead of divs...