mikeage.net Logo
mikeage.net/tag/xhtml/

mikeage.net @ י״ז תשרי תשע״ט

Posts Tagged ‘XHTML’

Nested Lists in XHTML

‍‍ז׳ מנחם אב תשס״ה - Friday, August 12th, 2005

Quick Overview

If you want to nest lists in HTML, you probably did something like the following (although you may not have done the indenting)

&lt;ul&gt;<br />
&nbsp;&nbsp;&lt;li&gt;List Item 1&lt;/li&gt;<br />
&nbsp;&nbsp;&lt;ul&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Sublist Item 1&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Sublist Item 2&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Subsublist Item 1&lt;/li&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;Sublist Item 3&lt;/li&gt;<br />
&nbsp;&nbsp;&lt;/ul&gt;<br />
&nbsp;&nbsp;&lt;li&gt;List item 2&lt;/li&gt;<br />
&nbsp;&nbsp;&lt;li&gt;List Item 3&lt;/li&gt;<br />
&lt;/ul&gt;<br />

In XHTML, this is not valid (the w3 validator will complain about "document type does not allow element "ul" here; assuming missing "li" start-tag". The reason is that an nested &lt;ul&gt; belongs within an &lt;li&gt; tag. You might worry that this would put a higher level bullet on the sublist-- it doesn't. The key is you don't close the &lt;li&gt; tag from the previous entry until after the sublist finishes. Compare the following. (note that both are syntactically correct XHTML)

Code Output
&lt;ul&gt;<br />
&lt;li&gt;List Item 1<br />
&lt;ul&gt;<br />
&lt;li&gt;Sublist Item 1&lt;/li&gt;<br />
&lt;li&gt;Sublist Item 2<br />
&lt;ul&gt;<br />
&lt;li&gt;Subsublist Item 1&lt;/li&gt;<br />
&lt;/ul&gt;&lt;/li&gt;<br />
&lt;li&gt;Sublist Item 3&lt;/li&gt;<br />
&lt;/ul&gt;&lt;/li&gt;<br />
&lt;li&gt;List item 2&lt;/li&gt;<br />
&lt;li&gt;List Item 3&lt;/li&gt;<br />
&lt;/ul&gt;<br />
  • List Item 1
    • Sublist Item 1
    • Sublist Item 2
      • Subsublist Item 1
    • Sublist Item 3
  • List item 2
  • List Item 3
Versus
&lt;ul&gt;<br />
&lt;li&gt;List Item 1&lt;/li&gt;<br />

&lt;li&gt;&lt;ul&gt;<br />
&lt;li&gt;Sublist Item 1&lt;/li&gt;<br />
&lt;li&gt;Sublist Item 2&lt;/li&gt;<br />
&lt;li&gt;
&lt;ul&gt;<br />
&lt;li&gt;Subsublist Item 1&lt;/li&gt;<br />
&lt;/ul&gt;&lt;/li&gt;<br />
&lt;li&gt;Sublist Item 3&lt;/li&gt;<br />
&lt;/ul&gt;&lt;/li&gt;<br />
&lt;li&gt;List item 2&lt;/li&gt;<br />
&lt;li&gt;List Item 3&lt;/li&gt;<br />
&lt;/ul&gt;<br />

  • List Item 1
    • Sublist Item 1
    • Sublist Item 2
      • Subsublist Item 1
    • Sublist Item 3
  • List item 2
  • List Item 3

Enjoy.

XHTML Compatible Image Flip

‍‍ז׳ מנחם אב תשס״ה - Friday, August 12th, 2005

Quick Overview

Many sites nowadays (this one included) use an image flip for links. That is, an image displays one thing before it's clicked, and a different image when the mouse is hovering over it. The classic implementation is not valid XHTML 1.1, however, as it uses depreciated
JavaScript. Here's how to do it properly.

Header

Put the following code in your &lt;head&gt;...&lt;/head&gt; section.

&lt;script type=&quot;text/javascript&quot;&gt;<br />
&lt;!-- <br />
function swap(id,img) {<br />
document.images[id].src=img;<br />
}<br />
--&gt;<br />
&lt;/script&gt;

Main Document

Then, place the following code in your document

&lt;a href=&quot;page.html&quot; class=&quot;noborder&quot;<br />
onmouseover=&quot;swap('uniqid','image-flipped.png')&quot;<br />
onmouseout=&quot;swap('uniqid','image-original.png')&quot;&gt;<br />
&lt;img id=&quot;uniqid&quot; src=&quot;image-original.png&quot; alt=&quot;Alt T
ext&quot; /&gt;<br />
&lt;/a&gt;

The uniqid must be defined uniquely for each imageflip on a page. The class=&quot;noborder&quot; is a CSS class I defined to remove the box most browsers put around a link (e.g., on the mikeage.net logo above).

Enjoy.

Quick Map
Content +
Personal +
Archives +
Site Stuff +
RBS Weather +
Search +
Recent Images

Valid XHTML 1.1!
Printer Friendly Page
 

Last Modified: September 04, 2006 @ 02:11 CST

Memory(TRUE): 2097152/2097152
Memory(FALSE): 3000536/3010520