I created the following to make a navigation sidebar.
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>navigation bar problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.div_nav { /* navigation bar */
width: 100px;
float: left;
border-right: none;
background-color: black;
}
.navLink {
padding: 2px;
padding-left: 5px;
border-left: 2px solid black;
border-bottom: 1px solid black;
background-color: #3C2A36 !important;
font: 10px "Lucida Sans Unicode", Verdana, Arial, Sans-serif; color: #F0F0F0;
text-decoration: none;
text-align: left;
cursor: pointer;
}
.navOver {
padding: 2px;
padding-left: 5px;
border-left: 2px solid black;
border-bottom: 1px solid black;
background-color: #3C2A36 !important;
font: bold 10px "Lucida Sans Unicode", Verdana, Arial, Sans-serif; color: #F0F0F0;
text-align: left;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="div_nav">
<div style="border-top: 2px solid black;" class="navLink" onmouseover="this.className='navOver'" onmouseout="this.className='navLink'">home</div>
<div class="navLink" onmouseover="this.className='navOver'" onmouseout="this.className='navLink'">site</div>
<div class="navLink" onmouseover="this.className='navOver'" onmouseout="this.className='navLink'">blog</div>
<div class="navLink" onmouseover="this.className='navOver'" onmouseout="this.className='navLink'">about</div>
<div class="navLink" onmouseover="this.className='navOver'" onmouseout="this.className='navLink'">galleria</div>
<div class="navLink" onmouseover="this.className='navOver'" onmouseout="this.className='navLink'">link</div>
<div style="border-bottom: 2px solid black" class="navLink" onmouseover="this.className='navOver'" onmouseout="this.className='navLink'">contact</div>
</div>
</body>
</html>
<blockquote id="quote"><font size="1" face="geneva, verdana, arial" id="quote">quote:<hr height="1" noshade id="quote">
Line 51, column 175: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
...onmouseout="this.className='navLink'">home</div></a>
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 "
" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
<hr height="1" noshade id="quote"></blockquote id="quote"></font id="quote">
Now the problem is that this does not validate for
XHTML 1.0 Transitional. The problem would be the <div> in between the <a></a>. I understand that I cannot have a block level element like the <div> in an inline element like the <a>. However, I can't think of any other way to get the effect I want. I suspect I might need to use javascript, but I'm hoping not to go there cause I know nothing about it.
I'm hoping someone can give me a
XHTML solution to the problem! Thanks for any help!
XHTML Block Element in an Inline Element
Jul 3rd, 2004, 18:37
Similar Threads
