SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How do you do this in lists please?

    How do you code (in css?), for lists, where it's something like :

    1. asssssssssssssssssssssssss

    2. assssssssssssssssssssssssssssssss

    3. asssssssssssssssssssssssssssss

    a) assssssssssssssssssssssssssss

    b) asssssssssssssssssssssssssssss

    4. assssssssssssssssssssssssssssssss

    a) asssssssssssssssssssssssss

    b) asssssssssssssssssssssssss

    c) asasasasasas

    5. asssssssssssssssssssssssssss


    etc, etc


    Any help appreciated.

    Dez

  2. #2
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    It's called an ordered list, and its structure is written with HTML.

    ol (HTML element)

    That should help get you started

    If you wish to style the ordered list...there's a large number of websites with information:

    ol li style css - Google Search
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    You use nested lists.

    Code:
    <ol>
    <li>one</li>
    <li>two</li>
    <li>three
       <ol>
       <li>three-a</li>
       <li>three-b</li>
       </ol></li>
    <li>four
       <ol>
       <li>four-a</li>
       <li>four-b</li>
       <li>four-c</li>
       </ol></li>
    <li>five</li>
    </ol>
    Note how I've placed the colour-coded opening and closing tags around the sub-list, it's important to get that right.

    Then in your CSS, you start from
    Code:
    ol li {list-style-type:decimal;}
    ol ol li {list-style-type:lower-roman;}
    and build up from there.
    Last edited by Stevie D; Aug 4, 2011 at 14:40. Reason: Formatting

  4. #4
    SitePoint Wizard
    Join Date
    Jun 2005
    Posts
    1,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Many thanks Stevie and Force Flow, in particular Stevie, for detailing the actual code.


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
  •