Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

XHTML Block-Level Element in Inline Element

Status
Not open for further replies.
gohankid77

gohankid77

Technical User
Jun 28, 2004
65
US
I created the following to make a navigation sidebar.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<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">
		<a href="#" title="To The Splash Page"><div style="border-top: 2px solid black;" class="navLink" onmouseover="this.className='navOver'" onmouseout="this.className='navLink'">home</div></a>
		<a href="#" title="Site News"><div class="navLink" onmouseover="this.className='navOver'" onmouseout="this.className='navLink'">site</div></a>
		<a href="#" title="Rants, Life, and The Hard Truth"><div class="navLink" onmouseover="this.className='navOver'" onmouseout="this.className='navLink'">blog</div></a>
		<a href="#" title="About Me"><div class="navLink" onmouseover="this.className='navOver'" onmouseout="this.className='navLink'">about</div></a>
		<a href="#" title="Pictures"><div class="navLink" onmouseover="this.className='navOver'" onmouseout="this.className='navLink'">galleria</div></a>
		<a href="#" title="Favourite Links"><div class="navLink" onmouseover="this.className='navOver'" onmouseout="this.className='navLink'">link</div></a>
		<a href="#" title="Email Me"><div style="border-bottom: 2px solid black" class="navLink" onmouseover="this.className='navOver'" onmouseout="this.className='navLink'">contact</div></a>
	</div>

</body>

</html>

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 "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
Click to expand...

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!

"Ships that pass in the night and speak each other in passing;
Only a signal shown and a distant voice in the darkness;
So on the ocean of life we pass and speak one another,
Only a look and a voice; then darkness again and a silence."
- Henry Wadsworth Longfellow
 
Sort by date Sort by votes
This is horribly and needlessly complicated. I get the same effect using less code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<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;
        }
    
    .div_nav a {
        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;
	display: block;
        }
    
    .div_nav a:hover {
        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">
        <a href="#" title="To The Splash Page">home</a>
        <a href="#" title="Site News">site</a>
        <a href="#" title="Rants, Life, and The Hard Truth">blog</a>
        <a href="#" title="About Me">about</a>
        <a href="#" title="Pictures">galleria</a>
        <a href="#" title="Favourite Links">link</a>
        <a href="#" title="Email Me">contact</a>
</div>

</body>

</html>
The key is display: block; in the <a> field. This is perfectly valid XHTML and CSS. If you need to use block level elements inside <a> tag and have pages validated use span and add attribute display: block; to its CSS. The result looks samey in IE6, Mozilla and Opera.
 
Upvote 0 Downvote
I got it to work. Thanks anyways.

"Ships that pass in the night and speak each other in passing;
Only a signal shown and a distant voice in the darkness;
So on the ocean of life we pass and speak one another,
Only a look and a voice; then darkness again and a silence."
- Henry Wadsworth Longfellow
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
791
PeDa
PeDa
Lets Code
  • Locked
  • Question
Inline element into a block level element
Replies
1
Views
277
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
822
pmonett
pmonett
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
1K
spamjim
spamjim
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
650
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top