SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    On list display as 2?

    Hi, Just wondered if this is possible in CSS?

    We currently use tables to lay this out but would like to get rid of them.

    We have a list of 10 country names that we display 5 in one table cell and the next 5 in the next cell so that they display like 2 lists of 5 countries next to each other.

    Ideally I would like to markup the list of 10 countries as a single list and have css take care of splitting it into 2 instead, if it can do this.

    I'm thinking there might be some way to limit the size of the container element perhaps and have the display move to the left and keep going so it looks like 2 lists of 5 elements each but semantically is just one list of 10. Does that sound like it should be possible?

    Thanks in advance

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
    .country-lst {
      width:100%;
      float:left;
    }
     
    .country-lst li {
      width:50%;
      float:left;
    }

    Code HTML4Strict:
    <ul class="country-lst">
        <li><a href="#" title="">Country A</a></li>
        <li><a href="#" title="">Country B</a></li>
        <li><a href="#" title="">Country C</a></li>
        <li><a href="#" title="">Country D</a></li>
    </ul>
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fantastic! Thanks very much.

  4. #4
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just one thought though; Could it be done and still retain the order going downwards?

    ie
    Country A Country C
    Country B Country D

    instead of;
    Country A Country B
    Country C Country D

    just using css without having to reorder the html markup?

    Thanks

  5. #5
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Yes, there is. But it's a lot more complicated. Have a look.

    You may also want to read the entire thread as it gives you information on the possible pitfalls. http://www.sitepoint.com/forums/showthread.php?t=648340
    Maleika E. A. | Rockatee | Twitter | Dribbble



  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you can add some classes to the last 5 items you can do it like this more easily.

    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>Untitled Document</title>
    <style type="text/css">
    ul {
        margin:0;
        padding:0;
        list-style:none;
    }
    a {
        text-decoration:none
    }
    ul.country {
        width:600px;
        border:1px solid #000;
        float:left;
    }
    ul.country li {
        float:left;
        width:301px;
        clear:left
    }
    ul.country li.c2 {
        width:auto;
        clear:none;
        float:none
    }
    </style>
    </head>
    <body>
    <ul class="country">
        <li><a href="#" title="">Country 1</a></li>
        <li><a href="#" title="">Country 2</a></li>
        <li><a href="#" title="">Country 3</a></li>
        <li><a href="#" title="">Country 4</a></li>
        <li><a href="#" title="">Country 5</a></li>
        <li class="c2"><a href="#" title="">Country 6</a></li>
        <li class="c2"><a href="#" title="">Country 7</a></li>
        <li class="c2"><a href="#" title="">Country 8</a></li>
        <li class="c2"><a href="#" title="">Country 9</a></li>
        <li class="c2"><a href="#" title="">Country 10</a></li>
    </ul>
    </body>
    </html>
    However 2 lists floated side by side would of course be the easiest of all.

  7. #7
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I think we can add classes in without too much problem.
    Can this method be easily extended to 3 or 4 columns if we had a bigger list?

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yes it can extend to 1000 columns as long as the parent has enough width to fit them all . You will have to mess with the widths though to fit however many columns you will be creating.

    You will also need to add a class to the <li> for whatever column (as Paul did for the <li>'s belonging to the second column)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Looks just what I need.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by cwedgwood50 View Post
    Thanks. I think we can add classes in without too much problem.
    Can this method be easily extended to 3 or 4 columns if we had a bigger list?
    That example can only allow 2 columns. If you want more columns then you would be better of just floating complete uls 3 or 4 across as required.

  11. #11
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,
    Do I understand what you mean correctly?
    Do you mean put them each in a different <ul> list.
    eg

    <ul>
    <li><a href="#" title="">Country A</a></li>
    <li><a href="#" title="">Country B</a></li>
    </ul>
    <ul>
    <li><a href="#" title="">Country C</a></li>
    <li><a href="#" title="">Country D</a></li>
    </ul>
    <ul>
    <li><a href="#" title="">Country E</a></li>
    <li><a href="#" title="">Country F</a></li>
    </ul>

    That is what I would like to avoid doing. I want just one <ul> element ad have the layout done with css.

    We generate the xhtml markup dynamically from server-side code so wish to have complete independence between the structure of the xhtml and the design.

    For example if we altered the server-side code to give us 3 <ul> elements because the design wanted that and then someone came along and wanted to redesign the front-end to have 4 then we would have to go back and alter the servce-side code to accomplish this. It's this interdependence that we want to break.

    Thanks

  12. #12
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cwedgwood50 View Post
    Hi Paul,
    Do I understand what you mean correctly?
    Do you mean put them each in a different <ul> list.
    eg

    <ul>
    <li><a href="#" title="">Country A</a></li>
    <li><a href="#" title="">Country B</a></li>
    </ul>
    <ul>
    <li><a href="#" title="">Country C</a></li>
    <li><a href="#" title="">Country D</a></li>
    </ul>
    <ul>
    <li><a href="#" title="">Country E</a></li>
    <li><a href="#" title="">Country F</a></li>
    </ul>

    That is what I would like to avoid doing. I want just one <ul> element ad have the layout done with css.

    We generate the xhtml markup dynamically from server-side code so wish to have complete independence between the structure of the xhtml and the design.

    For example if we altered the server-side code to give us 3 <ul> elements because the design wanted that and then someone came along and wanted to redesign the front-end to have 4 then we would have to go back and alter the servce-side code to accomplish this. It's this interdependence that we want to break.

    Thanks
    Maybe you could try this method ? No floats, relative positioning .... just plain negative margins
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by cwedgwood50 View Post
    Hi Paul,
    Do I understand what you mean correctly?
    Do you mean put them each in a different <ul> list.
    eg
    Yes that's what I meant but I knew that it wasn't what you really wanted . You will have to wait for css3 to be implemented in all browsers and the multi column modules will cater for this sort of thing properly.

    The only alternatives are relatively messy and involve adding classes and manipulating with negative margins etc and rely on lines being of equal height.

  14. #14
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, Thanks.


Tags for this Thread

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
  •