Forums

mshort

Hey everyone,

So my problem is starting to really frustrate me. I did this nav bar, with 2 lines of text inside each <li> I'm not so good at explaining it but if you see the code i've linked below you will see what i mean.

Anyway so the way I've done it works fine in the browser, doesnt have any display issues in either safari or firefox, (haven't checked ie yet) but the validator says

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Here is the code

<ul>
					<li>
						<a href=\"#\">
							<img src=\"images/home.png\" alt=\"\">
							<div class=\"text\">
								<p class=\"bold green\">Home</p><br />
								<p class=\"orange\">Go Home</p>
							</div>
							<div class=\"clear\"></div>
						</a>
					</li>
					<li>
						<a href=\"#\">
							<img src=\"images/about.png\" alt=\"\" />
							<div class=\"text\">
								<p class=\"bold green\">About Me</p><br />
								<p class=\"orange\">Who am I?</p>
							</div>
						</a>
					</li>
					<li>
						<a href=\"#\">
							<img src=\"images/portfolio.png\" alt=\"\" />
							<div class=\"text\">
								<p class=\"bold green\">Portfolio</p><br />
								<p class=\"orange\">See my Work</p>
							</div>
						</a>
					</li>
					<li>
						<a href=\"#\">
							<img src=\"images/contact.png\" alt=\"\" />
							<div class=\"text\">
								<p class=\"bold green\">Contact Me</p><br />
								<p class=\"orange\">Get in Touch</p>
							</div>
						</a>
					</li>
				</ul>

TheDoc

If I remember correctly, you cannot have a <p> inside a <li>.

luxurychair

<a> is an inline element and <div> is a block element. You can't put the <div> (or the <p>, for that matter) inside the <a> tag.

You can do it this way though.


<ul>
     <li>
          <a class = \"block_link\" href = \"#\"></a>
          <div>
               <p>text or whatever here</p>
          </div>
     </li>
</ul>

with the css:



a.block_link{
     display:block;
     width:100%;
     height:100%;
}

mshort

Thanks for that. and even though the <a> element isn't around the other elements they will all be clickable as the link?

luxurychair

Yeah, so long as its height and width are set appropriately - it'll expand and fill the area. You _should_ be able to do that with height:100% width:100%, but if not you can manually set them using px numbers and absolute positioning.

treehouse : what would you like to learn today?

Forums

Annoying little validation bug