SitePoint Sponsor

User Tag List

Results 1 to 25 of 80

Threaded View

  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 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


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
  •