SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    List items in grid columns

    Hi,

    I'm trying to display list items like grid .

    For example i have a html like
    Code:
    <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
    </ul>
    and i'm expecting it to be displayed as

    1.A--4.D--7.G
    2.B--5.E
    3.C--6.F

    Note : hyphen indicates space

    Is it possible using css3 . Can anyone help me on this.
    http://jsfiddle.net/jpDJj/

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2012
    Location
    Scarborough, North Yorkshire, United Kingdom
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep, place a div around the list and use the following CSS

    HTML Code:
    .list{
       -moz-column-count: 3;
        -moz-column-gap: 20px;
        -webkit-column-count: 3;
        -webkit-column-gap: 20px;
        column-count: 3;
        column-gap: 20px;}​
    http://jsfiddle.net/jpDJj/4/
    Richard
    Resell SSL Certificates - API / WHMCS / HostBill / ClientExec
    ServerTastic - RapidSSL, Geotrust, Thawte, Symantec, SmarterTools and more

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Bearing in mind that CSS3 is not fully supported, you can do it like this:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>split list</title>
    	
    <style media="all">
    ul {
    -moz-column-count: 2; /* For FireFox */
    -webkit-column-count: 2; /* For Safari/Chrome */
    column-count: 2; /* For when the standard gets fully supported */
    }
    </style>
    	
    </head>
    <body>
    <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
    </ul>​
    </body>
    </html>
    Support info

    Edit:

    Pipped by Richard, and forgot you wanted 3 columns.

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2012
    Location
    Scarborough, North Yorkshire, United Kingdom
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Bearing in mind that CSS3 is not fully supported, you can do it like this:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>split list</title>
    	
    <style media="all">
    ul {
    -moz-column-count: 2; /* For FireFox */
    -webkit-column-count: 2; /* For Safari/Chrome */
    column-count: 2; /* For when the standard gets fully supported */
    }
    </style>
    	
    </head>
    <body>
    <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
    </ul>​
    </body>
    </html>
    Support info

    Edit:

    Pipped by Richard, and forgot you wanted 3 columns.
    Aye but you don't need my div around it.
    Richard
    Resell SSL Certificates - API / WHMCS / HostBill / ClientExec
    ServerTastic - RapidSSL, Geotrust, Thawte, Symantec, SmarterTools and more

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by RichardAskew View Post
    Aye but you don't need my div around it.
    Aye, right you are, our Richard. Let's call it draw then, shall we?

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2009
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot, exactly what i was looking for .


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
  •