Page 1 of 1

[NEVERMIND] CSS help needed - nested list issue

Posted: Mon Jul 16, 2007 12:59 pm
by RobertGonzalez
Ok, here is the deal. I have a nested list that I want to look like this on screen:

Code: Select all

Group1    |    Group2    |    Group3    |    Group4

Group1-Sub1    |    Group1-Sub2    |    Group1-Sub3    |    Group1-Sub4
 * G1-S1-SS1   |     * G1-S2-SS1   |     * G1-S3-SS1   |     * G1-S4-SS1
 * G1-S1-SS2   |     * G1-S2-SS2   |     * G1-S3-SS2   |     * G1-S4-SS2
 * G1-S1-SS3   |     * G1-S2-SS3   |     * G1-S3-SS3   |     * G1-S4-SS3
 * G1-S1-SS4   |     * G1-S2-SS4   |     * G1-S3-SS4   |     * G1-S4-SS4
 * G1-S1-SS5   |     * G1-S2-SS5   |                   |     * G1-S4-SS5
 * G1-S1-SS6   |     * G1-S2-SS6   |                   |     * G1-S4-SS6
 * G1-S1-SS7   |     * G1-S2-SS7   |                   |     * G1-S4-SS7
               |     * G1-S2-SS8   |                   |     * G1-S4-SS8
               |     * G1-S2-SS9   |                   |
Group 1 would be the only item in the uppermost list to have descendent lists. Groups 2-4 would be single list items. The markup for this layout would derive from (unless there is a better way to do it):

Code: Select all

<ul>
  <li>Group1
  <ul>
    <li>Group1-Sub1
    <ul>
      <li>G1-S1-SS1</li>
      <li>G1-S1-SS2</li>
      <li>G1-S1-SS3</li>
      <li>G1-S1-SS4</li>
      <li>G1-S1-SS5</li>
      <li>G1-S1-SS6</li>
      <li>G1-S1-SS7</li>
    </ul>
    </li>
    
    <li>Group1-Sub2
    <ul>
      <li>G1-S2-SS1</li>
      <li>G1-S2-SS2</li>
      <li>G1-S2-SS3</li>
      <li>G1-S2-SS4</li>
      <li>G1-S2-SS5</li>
      <li>G1-S2-SS6</li>
      <li>G1-S2-SS7</li>
      <li>G1-S2-SS8</li>
      <li>G1-S2-SS9</li>
    </ul>
    </li>
    
    <li>Group1-Sub3
    <ul>
      <li>G1-S3-SS1</li>
      <li>G1-S3-SS2</li>
      <li>G1-S3-SS3</li>
      <li>G1-S3-SS4</li>
    </ul>
    </li>
    
    <li>Group1-Sub4
    <ul>
      <li>G1-S4-SS1</li>
      <li>G1-S4-SS2</li>
      <li>G1-S4-SS3</li>
      <li>G1-S4-SS4</li>
      <li>G1-S4-SS5</li>
      <li>G1-S4-SS6</li>
      <li>G1-S4-SS7</li>
      <li>G1-S4-SS8</li>
    </ul>
    </li>
  </ul>
  </li>
  <li>Group2</li>
  <li>Group3</li>
  <li>Group4</li>
</ul>
Does anyone have any idea how I can go about this? I cannot seem to get my styles to work for nothing. I have tried a bunch of failures and was hoping someone could point me in the right direction. At the moment, I have this CSS:

Code: Select all

#nav-container {
    background-color: #e8f1fb; /*deebff*/
    border: 1px solid #57a9fd;
    margin: 40px 10px;
}

#nav {
    padding: 0;
    list-style-position: outside;
    list-style-type: none;
    list-style-image: none;
    height: 30px;
}

#nav li {
    display: block;
    float: left;
    width: 200px;
    min-width: 200px;
    max-width: 200px;
}

#nav li#nav-toc ul#toc {
    position: relative;
    top: 20px;
    float: left;
    list-style: none;
    width: 100%;
    border: 1px solid #f00;
}

#nav li#nav-toc ul#toc li.section-header {
    display: block;
    float: left;
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    border: 1px solid #0f0;
}
#nav-container is a div that wraps the main UL. #nav is the parent UL. #nav-toc is the is the Group1 LI. #toc is the UL that wraps all of the Group1-SubX LI's. .section-header are the tertiary LI elements.

Posted: Mon Jul 16, 2007 1:33 pm
by RobertGonzalez
Nevermind, I undercomplicated it to get to the solution. All is well now.

Posted: Tue Jul 17, 2007 1:48 am
by matthijs
So, what is your solution then. Now you made me curious..

Posted: Tue Jul 17, 2007 10:23 am
by RobertGonzalez
I have two. As soon as they are both cleaned up enough to not embarrass me, I will post both. Should be able to have that today.