Used “css nested ul” in sitepoint search. The results don’t seem to address my specific illiteracy.
I suspect my XHTML markup is pretty close. And this would be a piece of cake with tables. But the proper CSS eludes me.
Here’s an excerpt of the markup: Note that excerpt follows a (“selectdiv”) </div> markup.
</div> <!-- selectdiv -->
<div id="recapdiv">
<form method="post" id="recapform" action="/lessons/recap/parse.php">
<ul id="recapul">
<li>
<ul id="contextul">
<li>
<label for="datelesson" class="labelclass">Date</label>
<input type="text" id="datelesson" name="datelesson" value="02/06/12" />
</li>
<li>
<label for="instructor" class="instructo">Instructor</label>
<input type="text" id="instructor" name="instructor" value="Cheryl" />
</li>
<li>
<label for="horsename">Horse</label>
<select id="horsename" name="horsename">
<option>--select--</option>
<option>Amy</option>
<option>Annabel</option>
<option>Anne</option>
<option selected="selected">Buckshot</option>
<option>Cindy</option>
<option>Cinnamon</option>
<option>Cowboy</option>
<option>Frank</option>
<option>Lizzie</option>
<option>Marbles</option>
<option>Pilgrim</option>
<option>Queenie</option>
<option>Sweetie Pie</option>
<option>Ziggy</option>
</select>
</li>
<li>
<label for="tackname">Tack</label>
<select id="tackname" name="tackname">
<option>--select--</option>
<option>Baby Western</option>
<option>Cindy Western</option>
<option>Circle Western</option>
<option>Endurance</option>
<option>English</option>
<option>Large Western</option>
<option selected="selected">Narha Pad</option>
<option>ShortSaddle</option>
<option>Western 8</option>
</select>
</li>
</ul> <!-- end contextul -->
</li>
<li>
<ul id="volunteerul">
<li>
<label for="independent" class="independent">Independent</label>
<input type="text" id="independent" name="independent" value="N" />
</li>
<li>
<label for="leader" class="leader">Leader</label>
<input type="text" id="leader" name="leader" value="0" />
</li>
<li>
<label for="sidewalker" class="sidewalker">Sidewalker</label>
<input type="text" id="sidewalker" name="sidewalker" value="2" />
</li>
</ul> <!-- end volunteerul -->
</li>
<li>
<label for="recaptext">Recap</label>
<textarea id="recaptext" name="recaptext" cols="70" rows="4">Worked on good rein use and position at the walk. Followed good directions through a pattern using cones, poles and barrels.Played a matching laundry game.</textarea>
</li>
</ul> <!-- end recapul -->
</form>
</div> <!-- end recapdiv -->
The ‘<div id=“recapdiv”>’ is to float right of the (already) floated left ‘<div id=“selectdiv”>’ (of which only the </div> is shown – on the first line of the excerpt)
each of the three '<li>'s for ‘<ul id=“recapul”>’ is to appear as a row (or line) within the div
(2a) ‘<ul id=“contextul”>’ to appear above the ‘<ul id=“volunteerul”>’ to appear above the recap textarea
each of the '<li>'s within the nested uls (see 2a) is to appear inline
the labels are to appear above the select box / input text.
#recapdiv{
float:right;
/* may want a width here depending on situation*/
}
#recapdiv ul{margin:0;padding:0;list-style:none}
#recapdiv ul ul li{
display:inline-block;
vertical-align:top;
margin:0 0 10px;
}
[B]* html #recapdiv ul ul li{display:inline}/* ie6 inline-block fix */
*+html #recapdiv ul ul li{display:inline}/* ie7 inline-block fix */[/B]
#recapdiv ul li label{display:block}
Suspected it would be something simple like that. And, in retrospect, it’s clear why your solution works. But I wouldn’t have had the conceptual framework to figure it out on my own. Pretty humbling.