nested URL CSS

**Grnadpa** · Sep 18, 2012 09:10

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.

Code:

  </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 -->

1) 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)
2) 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
3) each of the '<li>'s within the nested uls (see 2a) is to appear inline
4) the labels are to appear above the select box / input text.

Regards,

(grNadpa) Brian Case

**Paul O'B** · Sep 18, 2012 10:23

Hi,

Not really sure if this is what you meant but its a start

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#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;
}
#recapdiv ul li label{display:block}

</style>
</head>

<body>
 </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 -->
</body>
</html>

If that's what you wanted then I'll give you the ie6/7 fixes for inline-block as well.

**Grnadpa** · Sep 18, 2012 10:48

Precisely what I needed. The ie6/7 fixes would be helpful, thanks for the offer.

**Paul O'B** · Sep 18, 2012 11:39

Originally Posted by Grnadpa

Precisely what I needed. The ie6/7 fixes would be helpful, thanks for the offer.

Ok here you go

Code:

#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;
}
* html #recapdiv ul ul li{display:inline}/* ie6 inline-block fix */
*+html #recapdiv ul ul li{display:inline}/* ie7 inline-block fix */
#recapdiv ul li label{display:block}

**Grnadpa** · Sep 19, 2012 08:13

So, of course, I can't leave it alone. The '<ul id="volunteerul">' set would look better inline upon

Code:

#independent, #leader, #sidewalker {
  font-size: smaller;
	width: 12px;
}

Try as I might, I cannot come up with a "display:" that will render the volunteerul line as inline leaving Paul's css unchanged

Code:

#recapdiv ul ul li{
	display:inline-block;	
	vertical-align:top;
	margin:0 0 10px;
}
#recapdiv ul li label{display:block}

Don't know why I can't get my mind to wrap around this.

**Paul O'B** · Sep 20, 2012 02:07

Do you mean something like this:

Code:

#independent, #leader, #sidewalker {
 font-size: smaller;
	width: 12px;
	margin-right:15px;
}
ul#volunteerul li label{display:inline-block;padding:0 10px 0 0 }

You need to use the same weight to over-ride previous styles.

**Grnadpa** · Sep 20, 2012 07:16

Yes, brilliant, that works. Thank you.

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.

Thank you much.

grNadpa

User Tag List

Thread: nested URL CSS

Thread Tools

Display

nested URL CSS

Bookmarks

Bookmarks

Posting Permissions