SitePoint Sponsor

User Tag List

Page 1 of 4 1234 LastLast
Results 1 to 25 of 80
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,285
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)

    CSS - Test Your CSS Skills Number 30 - Multi columns

    CSS - Test Your CSS Skills Number 30 : Quiz now ended solutions in post #61

    To mark the anniversary of our 30th quiz I have not one but 2 little quizzes to keep you occupied over the following week.

    The first quiz was from an idea By Erik J and the second quiz is from an idea by Paul Sweatte. So thanks to both for suggestions and support.

    Remember these quizzes are mainly for fun but you will also learn a lot about CSS by trying them even if they don't always prove useful in the real world.


    Quiz A - Multi Columns

    CSS3 has a nice Multi column layout module but it will be a long time before we can actually use it in all browsers so this quiz is quite simple in concept in that you should turn one unordered list into three columns without using CSS3.

    Take a look at the attachment called list-colums.gif to see exactly what is required.

    Looks simple doesn't it?

    Rules:

    There are always rules aren't there?

    1) The first rule is that you must use the html I provide and cannot change the html at all although you can change the css in the head of course.

    2) Just using valid CSS (not css3) you must replicate the 3 columns as shown in the screenshot and it must work in all modern browsers from IE6 upwards. So make sure you test in IE6 - 8, Firefox3, Safari3 and Opera 10.

    You can use conditional comments for IE or the usual valid IE hacks but the code should still be valid.

    3)The html is basically one long unordered list (although we have provided a class in each list item to help you) and you need to divide the list into three columns breaking at the relevant points.

    The important thing to note
    is that you must allow for the number of items in each section to change and there could be more or less items in each column. For example I could give you another list with different numbers of items listed and your existing css would need to cater for this.

    Effectively this means you can't simply measure each list and then absolutely place it into position - so absolute positioning isn't a solution. The flow of the document should be preserved and the columns should cater for any number of items.

    4) The text in each line should wrap to the next line if it is too long which again effectively rules out absolute positioning because the height of the columns would depend on if text has wrapped or not.

    Here is the html you must use:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>List Items Divided in Ordered Columns</title>
    <style type="text/css">
    #columnlist {
        margin:auto;
        width:80&#37;;
        font:75%/1.5 arial;
    }
    #columnlist h1 {
        font-size:167%;
    }
    #columnlist ul {
        margin:0;
        padding:0;
    }
    #columnlist li {
        list-style:none;
        width:33%;
    }
    </style>
    </head>
    <body>
    <div id="columnlist">
        <h1>CSS2 - List Items Divided in Ordered Columns</h1>
        <ul>
            <li class="col1">Column One, Item 1</li>
            <li class="col1">Column One, Item 2</li>
            <li class="col1">Column One, Item 3</li>
            <li class="col1">Column One, Item 4</li>
            <li class="col1">Column One, Item 5</li>
            <li class="col1">Column One, Item 6</li>
            <li class="col1">Column One, Item 7</li>
            <li class="col1">Column One, Item 8</li>
            <li class="col1">Column One, Item 9</li>
            <li class="col1">Column One, Item 10</li>
            <li class="col1">Column One, Item 11</li>
            <li class="col1">Column One, Item 12</li>
            <li class="col1">Column One, Item 13</li>
            <li class="col1">Column One, Item 14</li>
            <li class="col1">Column One, Item 15</li>
            <li class="col1">Column One, Item 16</li>
            <li class="col1">Column One, Item 17</li>
            <li class="col1">Column One, Item 18</li>
            <li class="col2">Column Two, Item 19</li>
            <li class="col2">Column Two, Item 20</li>
            <li class="col2">Column Two, Item 21</li>
            <li class="col2">Column Two, Item 22</li>
            <li class="col2">Column Two, Item 23</li>
            <li class="col2">Column Two, Item 24</li>
            <li class="col2">Column Two, Item 25</li>
            <li class="col2">Column Two, Item 26</li>
            <li class="col2">Column Two, Item 27</li>
            <li class="col2">Column Two, Item 28</li>
            <li class="col2">Column Two, Item 29</li>
            <li class="col2">Column Two, Item 30</li>
            <li class="col3">Column Three, Item 31</li>
            <li class="col3">Column Three, Item 32</li>
            <li class="col3">Column Three, Item 33</li>
            <li class="col3">Column Three, Item 34</li>
            <li class="col3">Column Three, Item 35</li>
            <li class="col3">Column Three, Item 36</li>
            <li class="col3">Column Three, Item 37</li>
            <li class="col3">Column Three, Item 38</li>
            <li class="col3">Column Three, Item 39</li>
            <li class="col3">Column Three, Item 40</li>
            <li class="col3">Column Three, Item 41</li>
            <li class="col3">Column Three, Item 42</li>
            <li class="col3">Column Three, Item 43</li>
            <li class="col3">Column Three, Item 44</li>
            <li class="col3">Column Three, Item 45</li>
            <!-- number of items can change
        <li class="col3">Column Three, Item 46</li>
        <li class="col3">Column Three, Item 47</li>
        <li class="col3">Column Three, Item 48</li> -->
        </ul>
    </div>
    </body>
    </html>
    The answer to this quiz would actually cater for multiple columns so there is nothing special about it being 3 columns only and your technique should work for more columns with a little bit of extra css.

    This is quite a tough challenge and it too me a good few hours to come up with the solution.

    Remember once you have solved this change the number of items in the list and make sure it still works.

    Have Fun


    Quiz B - Vertical-align multiple images

    This second quiz is from an idea by Paul Sweatte and your task is to vertical-align multiple images within the viewport.

    Look at the attachment called vert-align.gif and you will see a screenshot of a wide screen and a narrow screen showing the images centred in both cases.

    Although I have used same sized images the answer should cater for images of any size.

    Rules

    There is only one main rule and that is that you can't use the display:table (or table-cell etc..) properties and the result should work in IE6 - 8, Firefox 3, Safari3 and Opera10.

    The code should be valid of course and you can use whatever css and html you like.

    As usual with both quizzes don't give the answer away in this thread but PM the answer once you have thoroughly checked your code.

    If you think you know the answer then PM it to me as I don't believe anyone who says they can do it but doesn't provide proof

    However don't give anything away in this thread although you can ask questions if you are not sure of the rules or what is required.

    Remember this is just for fun and there are no prizes other than smug self satisfaction of achievement.

    Have fun and I guarantee that quiz A will have you perplexed for a while. Quiz B is more straight forward if you understand the concept but will still prove tricky for some.

    Enjoy.

    PS. : In case you missed the other tests you can find them all listed here:
    Attached Images Attached Images
    Last edited by Paul O'B; Nov 29, 2009 at 11:19.

  2. #2
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    exciting quiz's once again
    now i wonder where i could squeeze out some free time.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,285
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    exciting quiz's once again
    now i wonder where i could squeeze out some free time.
    Thanks Timo.

    Yes you will need a couple of hours spare to tackle these

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hmm nice quizzes, I'll tackle these after the Ravens kick the Colts' butts

    Edit:

    Paul can you post the image URL here? Or upload it?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    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)
    Hey Paul,
    Why are the last three items in column one (ColumnTwo,16-18) there?

    Should they be in column two, or are you just showing them wrapping at will when a certain height is reached. It is kinda confusing seeing ColumnTwo items in ColumnOne.

    Maybe they should have just been called "Item 1-45"

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,285
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hmm nice quizzes, I'll tackle these after the Ravens kick the Colts' butts

    Edit:

    Paul can you post the image URL here? Or upload it?
    If you mean the attachments I've also linked to the images in the post.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,285
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Hey Paul,
    Why are the last three items in column one (ColumnTwo,16-18) there?

    Should they be in column two, or are you just showing them wrapping at will when a certain height is reached. It is kinda confusing seeing ColumnTwo items in ColumnOne.

    Maybe they should have just been called "Item 1-45"

    Well spotted Ray My mistake, I adjdusted the number in each column for testing but forgot to change the text itself.

    I'll update the images and attachments in a minute.

  8. #8
    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)
    I see it now, the naming error is in the html.

    Can we correct that or maybe you can correct the sample code for us?

    Edit:

    Just read your last post

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,285
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    All images,attachments and html changed now

  10. #10
    SitePoint Wizard ryanhellyer's Avatar
    Join Date
    Oct 2006
    Location
    New Zealand
    Posts
    2,323
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lol. I'm stumped. Every solution I try to come up with for the first quiz is a dead-end

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,285
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ryanhellyer View Post
    Lol. I'm stumped. Every solution I try to come up with for the first quiz is a dead-end
    Yes it's a bit of a puzzle and took me a good few hours to come up with the answer. Keep trying I'm sure you'll get there in the end.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,285
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I have a correct entry for Quiz B from Gary Turner - Many thanks Gary for your speedy and correct entry

    I've also had an entry from somebody else for Quiz A but it's not quite good enough.

  13. #13
    SitePoint Zealot
    Join Date
    Oct 2008
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This test is very good, but it seems no time to do it
    So there is time to test what I have

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quiz 1 I got almost everything done aka column 1 and 3 were in respective places with correct numbesr in place, however column 2 was dropping and I don't have a clue how to get it back into place working everywhere.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,285
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Quiz 1 I got almost everything done aka column 1 and 3 were in respective places with correct numbesr in place, however column 2 was dropping and I don't have a clue how to get it back into place working everywhere.
    Yes two columns are relatively easy to do but a different approach is needed when there are three (or more) columns so don't get caught going in the wrong direction

  16. #16
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i so fail at vertical centering...

  17. #17
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    There is only one main rule and that is that you can't use the display:table (or table-cell etc..) properties
    How about the <table> element? I'm stumped on both quizes - I thought I knew the trick for the second one but it doesn't seem to work as I expected.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,285
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    How about the <table> element? I'm stumped on both quizes - I thought I knew the trick for the second one but it doesn't seem to work as I expected.
    Tables are banned You could do the second quiz with tables of course but that's why I ruled out display:table also.

    Keep trying - the answer is out there

  19. #19
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    is the fist quiz a pure elegant solution or a mess of css rules?


    as you can guess, im also stumped.

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,285
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The first solution is quite elegant and doesn't need too many rules. In fact the method only requires two basic rules to achieve the effect although there are more rules needed to make it look right. (The only extra rules were that Ie6 and 7 needed something different and opera needed an extra fix also.)

  21. #21
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Yes two columns are relatively easy to do but a different approach is needed when there are three (or more) columns so don't get caught going in the wrong direction
    Yes lol when I was at the current stage in like 30 minutes I was like, am I gonna beat Paul answering this (time frame wise). I have a feeling you went this route in the beginning too
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,285
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I have a feeling you went this route in the beginning too
    Yes I wasted a couple of hours looking in the wrong direction . There is a certain technique that we all know that makes this work but it's too early to give any more clues than that

  23. #23
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wink

    sorry folks; it's a colossal waste of time. The average 10 year old can do this in 15 minutes, after having been shown HTML Tables just once. It's child's play. Saying Tables can only be used for tabular date is like saying you can't use a bulldozer to level a derelict building and clear the lot because bulldozers can only be used to doze bulls. And you're supposed to use a bamboo lawn rake - used for creating patterns in sand - instead. And Tables work in every browser ever made; you don't even have to check.

  24. #24
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by petweis View Post
    sorry folks; it's a colossal waste of time. The average 10 year old can do this in 15 minutes, after having been shown HTML Tables just once. It's child's play. Saying Tables can only be used for tabular date is like saying you can't use a bulldozer to level a derelict building and clear the lot because bulldozers can only be used to doze bulls. And you're supposed to use a bamboo lawn rake - used for creating patterns in sand - instead. And Tables work in every browser ever made; you don't even have to check.
    Welcome to Sitepoint!

    There's always one who misses the point of these quizes. They are for people who enjoy working with css and problem solving. They don't necessarily represent real world examples but you'll definitely learn a few tips and tricks if you persist. Have a look through the older quizes and you'll realise the purpose of them.

  25. #25
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    as markbrown4 already mentioned, these quizzes are here for our expansion of CSS related knowledge and fun.


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
  •