Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    need help with listing

    Hi.
    Can anyone guide me how to create a listing style like below using <ul> and <li> only?
    Thanks
    Last edited by w3nta1; 08-11-2011 at 08:14 AM.

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    One option is to first create a container (probably a div) to hold the listing.

    Then just create your lists using <ul>. Set the width of each list to 33% and float them. To set your own image for the <li> marker, you can use list-style-image in the css.

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Bullant for the prompt response. But i think you do not understand what i mean. If we use normal li method will only achieve the result like the bottom link.
    http://clementng.my/temp.html

  • #4
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i need every of the row to have the same height like sample below >.<
    can anyone give me comment on my code? thanks


  • #5
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    ok, personally I would put each of the 3 rows in a separate div and then have 3 floated <ul>'s in each div. That should set the height of each div (with overflow: hidden) to the height of the longest list in each row.

    But if you are limited to using only <ul> and <li>, then you could have an outer <ul> with an <li> for each of the 3 rows and then nested, floated <ul>'s for the 3 lists in each row. But this seems like more code and messier to me.

    And if you want heading for each list, I would use a <dl> with its <dt> for the heading and put the list items in the <dd>

    Why are you limited to <ul> and <li>?
    Last edited by bullant; 08-11-2011 at 07:07 AM.

  • #6
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    something like this:

    Add/change styles to suit.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #listingsContainer {
                    width: 900px;
                    border: 1px solid red;
                }
                #listingsContainer div {
                    border: 1px solid brown;
                    clear: both;
                    overflow: hidden;
                }
                #listingsContainer dl {
                    width: 33%;
                    border: 1px solid blue;
                    float: left;
                }
            </style>
        </head>
        <body>
            <div id="listingsContainer">
                <!-- Row 1 -->
                <div>
                    <dl>
                        <dt>Listing A</dt>
                        <dd>
                            <ul>
                                <li>Item 1</li>
                                <li>Item 2</li>
                            </ul>
                        </dd>
                    </dl>
                    <dl>
                        <dt>Listing B</dt>
                        <dd>
                            <ul>
                                <li>Item 1</li>
                                <li>Item 2</li>
                                <li>Item 3</li>
                                <li>Item 4</li>
                            </ul>
                        </dd>
                    </dl>
                    <dl>
                        <dt>Listing C</dt>
                        <dd>
                            <ul>
                                <li>Item 1</li>
                                <li>Item 2</li>
                                <li>Item 3</li>
                            </ul>
                        </dd>
                    </dl>
                </div>
                <!-- Row 2 -->
                <div>
                    <dl>
                        <dt>Listing D</dt>
                        <dd>
                            <ul>
                                <li>Item 1</li>
                                <li>Item 2</li>
                            </ul>
                        </dd>
                    </dl>
                    <dl>
                        <dt>Listing E</dt>
                        <dd>
                            <ul>
                                <li>Item 1</li>
                                <li>Item 2</li>
                                <li>Item 3</li>
                                <li>Item 4</li>
                            </ul>
                        </dd>
                    </dl>
                    <dl>
                        <dt>Listing F</dt>
                        <dd>
                            <ul>
                                <li>Item 1</li>
                                <li>Item 2</li>
                                <li>Item 3</li>
                            </ul>
                        </dd>
                    </dl>
                </div>
            </div>
        </body>
    </html>
    Last edited by bullant; 08-11-2011 at 07:29 AM.

  • #7
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bullant View Post
    ok, personally I would put each of the 3 rows in a separate div and then have 3 floated <ul>'s in each div. That should set the height of each div (with overflow: hidden) to the height of the longest list in each row.

    But if you are limited to using only <ul> and <li>, then you could have an outer <ul> with an <li> for each of the 3 rows and then nested, floated <ul>'s for the 3 lists in each row. But this seems like more code and messier to me.

    And if you want heading for each list, I would use a <dl> with its <dt> for the heading and put the list items in the <dd>

    Why are you limited to <ul> and <li>?
    Thanks a lot for your help Bullant

    no it's not limited to only use ul and li. It's my first time expose to dl dt and dd tag. Thanks for the codes, i'll explore it and apply necessary changes. 10Q~~!!!

  • #8
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    you're welcome


  •  

    Posting Permissions

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