SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    One List, Multiple Columns

    I have an ol that I'd like to display in four columns. For accessibility reasons, I'd like to keep it all in a single list. I think the only thing lists are allowed to hold (in strict XHTML, anyway) is the li element, so I can't wrap div's around the appropriate items. The only technique I can think of is to give corresponding class names to the items that will be in the first, second, third, and fourth column, and then to jump through all kinds of CSS hoops to make it look right.

    Is there any other way to do this?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,598
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, there is a modeul in CSS3 for multi column, however only webkit currently has support (and I think the latest versions of FF)

    However it's be best to just create your HTML to simulate the multi columns (aka set up the HTML like that)

    If you don't understand what I mean then shout.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The only technique I can think of is to give corresponding class names to the items that will be in the first, second, third, and fourth column, and then to jump through all kinds of CSS hoops to make it look right.
    Hi,
    You have pretty much answered your own question if you want it to be a single OL. That was actually one of the CSS Quizzes recently and there were many hoops to jump through. In fact IE6/7 had to get a completely different stylesheet to make them work due to the broken float model and other issues.

    I will just point you to the thread and you can see for yourself what it was all about. As it is explained in the thread, CSS3 offers a Multi Column Module but it is not a cross browser solution.

    Test Your CSS Skills Number 30 - Multi columns

    Here are my examples from that quiz -
    http://www.css-lab.com/misc-test/quiz-30.html
    http://www.css-lab.com/demos/quiz/qu...opera-fix.html

    As far as a cross browser version without having to "jump through hoops" the easiest thing to do is simply float four columns left and use four separate OLs'. Our resident html guru "AutisticCuckoo" has provided a very elegant solution in this recent thread that uses a pseudo :before block on the LI with a counter reset to continue the decimal sequence into each column.

    Restart and ordered list at a particular number

    There is a refined version in post #19 that provides a very small javascript that takes care of IE6/7 since they don't support the pseudo :before element.

    All credit goes to Tommy for the code and script in the link below, all I did was turn it into a three column OL based off of the basic structure shown in the thread.

    http://www.css-lab.com/misc-test/ol-counter-reset.html

    I would probably use that last method if I needed full browsers support without a lot of complicated css.

    Hope that helps

  4. #4
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I feared as much. Thanks for the awesome resources, though. Those look pretty cool.

  5. #5
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is great. I've used
    Code:
    content: "  - <" attr(href) ">";
    but never knew about the counter stuff.

  6. #6
    SitePoint Addict AtSea webdesign's Avatar
    Join Date
    May 2010
    Location
    Newark, Delaware
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


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
  •