nested list problem

Discussion in 'HTML' started by richard, Feb 8, 2009.

  1. richard

    richard Guest

    I have below a simple nested list situation.
    I want the state names to appear on every other line as the top <ul>.
    Below each state name is the second list which I want to be inline.
    If I simply declare "display:inline" either as a class or an inline
    style statement, the second line does not appear inline as intended.

    What's the trick?


    <div class="state">
    <ul>
    <li>Alabama</li>
    <ul class="line">
    <li>Top 50</li><li>Cities</li><li>Zip code</li>
    </ul>
    <li>Alaska</li>
    <li>Arizona</li>
    <li>Arkansas</li>
    </ul>
    </div>
    richard, Feb 8, 2009
    #1
    1. Advertising

  2. On 2009-02-08, richard wrote:
    > I have below a simple nested list situation.
    > I want the state names to appear on every other line as the top <ul>.
    > Below each state name is the second list which I want to be inline.
    > If I simply declare "display:inline" either as a class or an inline
    > style statement, the second line does not appear inline as intended.
    >
    > What's the trick?
    >
    >
    ><div class="state">
    ><ul>
    ><li>Alabama</li>
    > <ul class="line">
    > <li>Top 50</li><li>Cities</li><li>Zip code</li>
    > </ul>
    ><li>Alaska</li>
    ><li>Arizona</li>
    ><li>Arkansas</li>
    ></ul>
    ></div>


    <div class="state">
    <ul>
    <li>Alabama
    <ul class="line">
    <li>Top 50</li><li>Cities</li><li>Zip code</li>
    </ul>
    </li>
    <li>Alaska</li>
    <li>Arizona</li>
    <li>Arkansas</li>
    </ul>
    </div>


    --
    Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
    Chris F.A. Johnson, Feb 8, 2009
    #2
    1. Advertising

  3. richard wrote:

    > I have below a simple nested list situation.


    Almost.

    > I want the state names to appear on every other line as the top <ul>.
    > Below each state name is the second list which I want to be inline.
    > If I simply declare "display:inline" either as a class or an inline
    > style statement, the second line does not appear inline as intended.
    >
    > What's the trick?


    The trick is to properly nest the sub-<ul>:
    >
    > <div class="state">
    > <ul>
    > <li>Alabama</li> <------ move this </li>
    > <ul class="line">
    > <li>Top 50</li><li>Cities</li><li>Zip code</li>
    > </ul>
    > </li> <------ to here
    > <li>Alaska</li>
    > <li>Arizona</li>
    > <li>Arkansas</li>
    > </ul>
    > </div>


    I don't see the point of:
    <li>Top 50</li><li>Cities</li><li>Zip code</li>

    Are they going to be links to other pages when you're finished? As
    always, a URL would help.

    --
    -bts
    -Friends don't let friends drive Windows
    Beauregard T. Shagnasty, Feb 8, 2009
    #3
  4. richard

    richard Guest

    On Sun, 08 Feb 2009 04:55:08 +0000, "Chris F.A. Johnson"
    <> wrote:

    >On 2009-02-08, richard wrote:
    >> I have below a simple nested list situation.
    >> I want the state names to appear on every other line as the top <ul>.
    >> Below each state name is the second list which I want to be inline.
    >> If I simply declare "display:inline" either as a class or an inline
    >> style statement, the second line does not appear inline as intended.
    >>
    >> What's the trick?
    >>
    >>
    >><div class="state">
    >><ul>
    >><li>Alabama</li>
    >> <ul class="line">
    >> <li>Top 50</li><li>Cities</li><li>Zip code</li>
    >> </ul>
    >><li>Alaska</li>
    >><li>Arizona</li>
    >><li>Arkansas</li>
    >></ul>
    >></div>

    >
    ><div class="state">
    > <ul>
    > <li>Alabama
    > <ul class="line">
    > <li>Top 50</li><li>Cities</li><li>Zip code</li>
    > </ul>
    > </li>
    > <li>Alaska</li>
    > <li>Arizona</li>
    > <li>Arkansas</li>
    > </ul>
    ></div>



    Thanks. I totally forgot about where to split.
    richard, Feb 8, 2009
    #4
  5. richard

    richard Guest

    On Sun, 8 Feb 2009 00:05:51 -0500, "Beauregard T. Shagnasty"
    <> wrote:

    >richard wrote:
    >
    >> I have below a simple nested list situation.

    >
    >Almost.
    >
    >> I want the state names to appear on every other line as the top <ul>.
    >> Below each state name is the second list which I want to be inline.
    >> If I simply declare "display:inline" either as a class or an inline
    >> style statement, the second line does not appear inline as intended.
    >>
    >> What's the trick?

    >
    >The trick is to properly nest the sub-<ul>:
    >>
    >> <div class="state">
    >> <ul>
    >> <li>Alabama</li> <------ move this </li>
    >> <ul class="line">
    >> <li>Top 50</li><li>Cities</li><li>Zip code</li>
    >> </ul>
    >> </li> <------ to here
    >> <li>Alaska</li>
    >> <li>Arizona</li>
    >> <li>Arkansas</li>
    >> </ul>
    >> </div>

    >
    >I don't see the point of:
    > <li>Top 50</li><li>Cities</li><li>Zip code</li>
    >
    >Are they going to be links to other pages when you're finished? As
    >always, a URL would help.


    That's the idea. This is just a rough draft.
    richard, Feb 8, 2009
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Russ Perry Jr
    Replies:
    2
    Views:
    4,129
    Russ Perry Jr
    Aug 20, 2004
  2. Replies:
    2
    Views:
    505
    Gerard Flanagan
    Mar 22, 2006
  3. Chad E. Dollins
    Replies:
    3
    Views:
    654
    Kai-Uwe Bux
    Nov 8, 2005
  4. request@no_spam.com
    Replies:
    5
    Views:
    422
  5. Replies:
    3
    Views:
    467
    Victor Bazarov
    Dec 7, 2007
Loading...

Share This Page