XHTML help please

**mac173** · 01-25-2008 02:27 PM

I am trying to put an image map on my website, in the header. I am taking the coding from a tutorial, which shows it as:

<img src="MyMap.gif" alt="Image Map" usemap="#MyImageMap">

<map id="MyImageMap">
<area shape="rect" coords="8,13,130,123"
href="#LINK1" alt="Determining Mapped Areas"/>
</map>

My problem is that I use CSS on my site, and the image for my header is coded as a background in the default.css text file, like this:

.header
{
background: #56644A url(img/XLheader3.gif) no-repeat center;
height: 285px;
}

and on the index.html file as:

<div class="header">

Here is the image http://img.photobucket.com/albums/v1.../XLheader3.gif

I want the LOTRO logo to be a link to their website.
SO........

How do I get the header to have a clickable link on it?

**DarkenProject** · 01-25-2008 03:33 PM

Hi mac173:

Within the conventions of CSS, this is not possible. Items with the background attribute are considered entities behind the content; they don't have behavorial properties.

A quick question to answer for yourself: why do you want content that the user is going to interact with in the background?

If you need to keep it as a background object, here are 2 ideas I came up with:

Use absolute positioning to place a transparent image over the "LOTR" logo. Link that Image.
place a <div> object over the "LOTR" portion and use JavaScript's onclick to link the page.

Try those out and let us know if they worked for you ;)

**mac173** · 01-25-2008 04:27 PM

I am pretty much a novice at XHTML. The structure is a template I modified to my own use. What I am trying to do is have the LOTRO logo be a link to their website, thereby allowing me to use it, and qualifing me for inclusion on their links page (iffy at best).

SO....the template uses the background attribute to place the image in the header position.

I think the transparent image will work. I can place that within the header.

BTW, this is the current website, so you can see what I am trying to upgrade.

http://www.dorcraft.org

**curt15** · 01-29-2008 11:39 AM

First

<img src="MyMap.gif" alt="Image Map" usemap="#MyImageMap">

Not W3C standard

<img src="MyMap.gif" alt="Image Map" usemap="#MyImageMap" /> that is.

Checked your site. It isn't XHTML1 Standard

Validation Output: 21 Errors

1. Error Line 3, Column 1: Missing xmlns attribute for element html. The value should be: http://www.w3.org/1999/xhtml.

<html>

✉

Many Document Types based on XML need a mandatory xmlns="" on the root element. For example, the root element for XHTML will look like:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
2. Error Line 92, Column 11: there is no attribute "width".

<tr width=100%>

✉

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.
3. Error Line 92, Column 11: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified.

<tr width=100%>

✉
4. Error Line 92, Column 14: an attribute value must be a literal unless it contains only name characters.

<tr width=100%>

✉

You have used a character that is not considered a "name character" in an attribute value. Which characters are considered "name characters" varies between the different document types, but a good rule of thumb is that unless the value contains only lower or upper case letters in the range a-z you must put quotation marks around the value. In fact, unless you have extreme file size requirements it is a very very good idea to always put quote marks around your attribute values. It is never wrong to do so, and very often it is absolutely necessary.
5. Error Line 99, Column 7: document type does not allow element "ul" here; assuming missing "li" start-tag.

<ul>

✉
6. Error Line 102, Column 7: document type does not allow element "li" here; missing one of "ul", "ol" start-tag.

<li>Explorer</li>

✉

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>").
7. Error Line 108, Column 7: document type does not allow element "li" here; missing one of "ul", "ol" start-tag.

<li>Tinker</li>

✉

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>").
8. Error Line 112, Column 7: document type does not allow element "li" here; missing one of "ul", "ol" start-tag.

<li>Historian</li>

✉

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>").
9. Error Line 117, Column 7: end tag for "li" omitted, but OMITTAG NO was specified.

</ul>

✉

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
10. Info Line 99, Column 4: start tag was here.

<ul>

11. Error Line 124, Column 7: document type does not allow element "ul" here; assuming missing "li" start-tag.

<ul>

✉
12. Error Line 127, Column 7: document type does not allow element "li" here; missing one of "ul", "ol" start-tag.

<li>Woodsman</li>

✉

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>").
13. Error Line 133, Column 7: document type does not allow element "li" here; missing one of "ul", "ol" start-tag.

<li>Armsman</li>

✉

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>").
14. Error Line 137, Column 7: end tag for "li" omitted, but OMITTAG NO was specified.

</ul>

✉

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
15. Info Line 124, Column 4: start tag was here.

<ul>

16. Error Line 152, Column 8: end tag for "p" omitted, but OMITTAG NO was specified.

</div>

✉

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
17. Info Line 151, Column 4: start tag was here.

<p>Critical success produces a better version of the item, either a higher q

18. Error Line 170, Column 8: end tag for "ul" which is not finished.

</ul>

✉

Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists (ul, ol, dl) require list items (li, or dt, dd), and so on.
19. Error Line 92, Column 11: XML Parsing Error: AttValue: " or ' expected.

<tr width=100%>

✉
20. Error Line 92, Column 11: XML Parsing Error: attributes construct error.

<tr width=100%>

✉
21. Error Line 92, Column 11: XML Parsing Error: Couldn't find end of Start Tag tr line 92.

<tr width=100%>

✉
22. Error Line 139, Column 6: XML Parsing Error: Opening and ending tag mismatch: table line 91 and tr.

</tr>

✉
23. Error Line 140, Column 8: XML Parsing Error: Opening and ending tag mismatch: div line 80 and table.

</table>

✉
24. Error Line 152, Column 9: XML Parsing Error: Opening and ending tag mismatch: p line 151 and div.

</div>

You should fix that

Thread: XHTML help please

LinkBack

Thread Tools

Display

XHTML help please

Re: XHTML help please

Re: XHTML help please

Re: XHTML help please

Similar Threads

XHTML / CSS compliant coding Wanted

text ads do not show up in xhtml

Validando XHTML 1.0 Transitional!

XHTML valid...

xHTML and CSS

Posting Permissions