SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: nested URL CSS

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    288
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    nested URL CSS

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  3. #3
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    288
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Precisely what I needed. The ie6/7 fixes would be helpful, thanks for the offer.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Grnadpa View Post
    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}

  5. #5
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    288
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  7. #7
    SitePoint Addict
    Join Date
    Oct 2005
    Posts
    288
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •