Definition list

I have been looking at this article (the last part about GetRows and PrintRow):
15 Seconds : Overcome Data Shaping Limitations

The loop itself isn’t a problem, but I have a problem with finding the upper level, and close my HTML-code correct (using <pre> as in the example isn’t an option).

I’m trying to build a sitemap using unordered list (or now I’m trying with dl and dt instead, but that doesn’t matter).

This is how the sitemap should look
level 1
level 2
level 3
level 1
level 1
level 2

Which means with <dl> and <dt> list formatted with CSS will give this look.

This is how the HTML should look, but I’m not able to close the HTML correct within the loop in the example:

<dl>level 1
<dt>level 2
<dt>level 3</dt></dt>
</dl>
<dl>level 1</dl>
<dl>level 1</dl>
<dl>level 1
<dt>level 2</dt>
</dl>

I can’t help the back-end part, but you cannot nest dt tags like that… you probably do want an unordered list. That’s what I use for sitemaps.

You’ll want to go for HTML output that looks like this:


<ul id="map">
  <li><a href="usa">USA - pop.</a>
    <ul>
      <li><a href="fla">FLORIDA - pop.</a>
        <ul>
          <li><a href="mia">MIAMI - pop.</a></li>
        </ul>
      </li>
      <li><a href="ill">ILLINOIS - pop.</a>
        <ul>
          <li><a href="chi">CHICAGO - pop.</a></li>
          <li><a href="ro">ROCKFORD - pop.</a></li>
        </ul>
      </li>    
      <li><a href="tex">TEXAS - pop.</a>
        <ul>
          <li><a href="aus">AUSTIN - pop.</a></li>
          <li><a href="dal">DALLAS - pop.</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

The above example had three levels, so I used an unordered list. If your data really is more like a two-column table though, say only states and cities, then a dl might make more sense (esp if you would end up with a lot of one-item lists). Also if area name and population are supposed to be separate things, then you’d want to shoot for something like this (more complicated):


<ul id="populations">
  <li><!--outer level, country... this is the list's sole item-->
    <dl>
      <dt>USA</dt>
      <dd>pop.</dd>
    </dl>
    <ul><!-- list within country (3 items)-->
      <li><!--first state in list-->
        <dl>
          <dt>FLORIDA</dt>
          <dd>pop.</dd>
        </dl>
        <ul><!-- list within state (list of one item)-->
          <li>
            <dt> 
              <dt>MIAMI</dt>
              <dd>pop.</dd>
            </dl>
          </li>
        </ul><!--end list within state-->
      </li>
      <li><!--next state in list-->
        <dl>
          <dt>ILLINOIS</dt>
            <dd>pop.</dd>
        </dl>
        <ul><!--list within state (2 items)-->
          <li>
            <dl>
              <dt>CHICAGO</dt>
              <dd>pop.</dd>
              <dt>ROCKFORD</dt>
              <dd>pop.</dd>
            </dl>
          </li>
        </ul><!--end list within state-->
      </li>
      <li><!-- next state in list-->
        <dl>
          <dt>TEXAS</dt>
          <dd>pop.</dd>
        </dl>
        <ul><!--list within state (2 items)-->
          <li>
            <dl>
              <dt>AUSTIN</dt>
              <dd>pop.</dd>
              <dt>DALLAS</dt>
              <dd>pop.</dd>
            </dl>
          </li>
        </ul><!--end list within state-->
      </li>
    </ul><!-- end list of states-->
  </li><!-- usa is sole item in list-->
</ul>

It’s a lot of markup, but if multiple relationships and levels of relationships need to be shown, this is what you’d end up with.