CODEWITHSUNDEEP
html
DoYouEvenHTML
DoYouEvenHTML

Reputation: 33

<li> element problems in navigation bar

I am making a navigation bar, but w3 validator is giving me the following error:

Element a not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

With code like this:

<ul id="main-nav">
    <a href="'.$index.'"><logo></logo></a>
    <li><a href="'.$index.'" title="Home page ">Home</a></li>
</ul>

I tried to change the menu around, but I couldn't fix it. What would be a simple fix?

E: the logo tag displays the logo

ul#main-nav logo{

    background: url('images/logo.jpg') no-repeat;
    width: 250px;
    height: 54px;
    display: block;
    text-indent: -9999px;
    float:left;
}

Upvotes: 0

Views: 47

Answers (3)

Aneesh
Aneesh

Reputation: 283

Child of a ul must be a 'list-item' ie li and in your case you have entered a hyperlink, hence the error. This might help.

Upvotes: 1

DwB
DwB

Reputation: 38300

The problem is this line: <a href="'.$index.'"><logo></logo></a>

The only element that can be the child of a ul tag is an li tag; all other tags are forbidden.

Try this:

<a href="'.$index.'"><logo></logo></a>
<ul id="main-nav">
    <li><a href="'.$index.'" title="Home page ">Home</a></li>
</ul>

Upvotes: 1

BenM
BenM

Reputation: 53198

The problem is with your <a> element, not the <li>. The only valid child of <ul> is <li>. From the W3 Docs:

Permitted contents

Zero or more li elements

You should update your code as follows:

<ul id="main-nav">
    <li><a href="'.$index.'"><logo></logo></a></li>
    <li><a href="'.$index.'" title="Home page ">Home</a></li>
</ul>

There is no tag called <logo>, by the way... If you want the logo to appear outside the list, use:

<a href="'.$index.'"><logo></logo></a>
<ul id="main-nav">
    <li><a href="'.$index.'" title="Home page ">Home</a></li>
</ul>

Upvotes: 1

Related Questions