SitePoint Sponsor

User Tag List

Results 1 to 25 of 96

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 16

    CSS - Test Your CSS Skills Number 16 : Quiz finished - See solutions in post #54

    As last weeks quiz seemed a bit hard we are going to change direction and make this one even harder

    However, it's a smaller project and won't need so much code so don't be frightened away. I am also including a smaller and easier quiz at the end so that beginners and intermediates can try their hand at something.

    The first quiz has been supplied by Tommy (Autistic Cuckoo) and if you take a look at the attachment called graph.png you will see what needs to be done.

    The attachment shows a bar graph of browsers statistics for the year. Your mission once again is to produce that graph from the html supplied. You are not allowed to touch the html and can only add CSS in the head.

    Here is the nice semantic html that 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>
    <title>2008 Browser Statistics</title>
    <style type="text/css">
    
    </style>
    </head>
    <body>
    <table>
        <caption>
        2008 Browser Statistics
        </caption>
        <thead>
            <tr>
                <th>Browser</th>
                <th>Jan</th>
                <th>Feb</th>
                <th>Mar</th>
                <th>Apr</th>
                <th>May</th>
                <th>Jun</th>
                <th>Jul</th>
                <th>Aug</th>
                <th>Sep</th>
                <th>Oct</th>
                <th>Nov</th>
                <th>Dec</th>
            </tr>
        </thead>
        <tbody>
            <tr class="ie">
                <th>Internet Explorer</th>
                <td>54.7&#37;</td>
                <td>54.7%</td>
                <td>53.9%</td>
                <td>54.8%</td>
                <td>54.5%</td>
                <td>54.0%</td>
                <td>51.7%</td>
                <td>50.5%</td>
                <td>48.6%</td>
                <td>47.1%</td>
                <td>46.6%</td>
                <td>45.7%</td>
            </tr>
            <tr class="ff">
                <th>Firefox</th>
                <td>36.4%</td>
                <td>36.5%</td>
                <td>37.0%</td>
                <td>39.1%</td>
                <td>39.8%</td>
                <td>41.0%</td>
                <td>42.6%</td>
                <td>43.7%</td>
                <td>42.6%</td>
                <td>44.0%</td>
                <td>44.2%</td>
                <td>44.4%</td>
            </tr>
            <tr class="saf">
                <th>Safari</th>
                <td>1.9%</td>
                <td>2.0%</td>
                <td>2.1%</td>
                <td>2.2%</td>
                <td>2.4%</td>
                <td>2.6%</td>
                <td>2.5%</td>
                <td>2.6%</td>
                <td>2.7%</td>
                <td>2.8%</td>
                <td>2.7%</td>
                <td>2.7%</td>
            </tr>
            <tr class="op">
                <th>Opera</th>
                <td>1.4%</td>
                <td>1.4%</td>
                <td>1.4%</td>
                <td>1.4%</td>
                <td>1.5%</td>
                <td>1.7%</td>
                <td>1.9%</td>
                <td>2.1%</td>
                <td>2.0%</td>
                <td>2.2%</td>
                <td>2.3%</td>
                <td>2.4%</td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript">
          (function () {
            var td = document.getElementsByTagName("TD");
            for (var i = 0, n = td.length; i < n; ++i) {
                var pct = parseFloat(td[i].firstChild.data) * 10.0;
                td[i].style.height = pct + "px";
            }
          })();
        </script>
    </body>
    </html>
    You will notice there is some javascript at the bottom of the html and this is to create the column heights based on the data that is held in the table. You don't really need to know how this works and you don't need to touch it.

    What you need to know is that the JS will write into each opening td tag the following inline style with a value relevant to the data.

    Code:
    <td style="height: 547px;">54.7%</td>
    Therefore you must find a way to color those columns at their representative heights and merge all columns into one row as shown in the attachment (graph.png). Then you need to move the headings to the side of the graph as shown in the attachment.

    If any of that is unclear then just shout and I will clarify.

    Rules:

    1) don't touch the html - Just add CSS in the head.

    2)Valid CSS2.1

    3) Must work in Firefox3 and Opera 9.5+ (and Safari3 if you want). IE7 won't play ball fully with this so I've omitted it but you are welcome to try and get something going in IE7 or make it degrade nicely but don't compromise the code to do this.

    General Rules:

    No extra javascript or scripting of any kind
    No images or background images.
    No Hacks
    Firefox3 and Opera9.5 support only required

    As usual there are no prizes other than the self-satisfaction of completing this. If you have a valid layout then post a message here but PM me the solution so that other people can still have a go. I will decide on the best layout this time rather than the first one I receive and the criteria may be based on code and looks.

    Be aware that this quiz may not produce a valid day-to day real world use (cross browser) but the techniques used to create it are essential tools in your css toolbox.

    2nd smaller Coffee break quiz
    Here follows a smaller quiz for those that don't have much time

    This was suggested by Yurikolovsky and is a nice little rollover effect. Look at the attachment called rolloverbox.gif which is a simple fixed width and height box with text.

    All you need to do is to change the box on hover as shown. Every part of the box should be active and point to the same location.

    The problem is that the text is not an anchor and you must use html like this.

    Code:
    <div>
    <h2>Planes</h2>
    <p>for air travel</p>
    </div>
    As this needs to work in IE6 then you are allowed to add only one anchor to each box but you are allowed to add extra divs and other elements if you need.

    That's all there is to it.

    Just make the box rollover and all parts of the box are active and would proceed to the destination in the anchors href. Every part of the box must stay in the on position when the mouse is over and must not flicker.

    The text does not change colour but the background and borders do.

    The code must be valid html and css so you cannot wrap an anchor around the whole lot as that would be invalid and cheating.

    Solutions to both quizzes will be posted later in the week (or longer) depending on how it goes

    Have fun .

    Paul

    PS. : In case you missed the other tests you can find them here:
    test 1: http://www.sitepoint.com/forums/showthread.php?t=168555
    test 2: http://www.sitepoint.com/forums/showthread.php?t=169710
    test 3: http://www.sitepoint.com/forums/showthread.php?t=170190
    test 4: http://www.sitepoint.com/forums/showthread.php?t=171221
    test 5: http://www.sitepoint.com/forums/showthread.php?t=172472
    test 6: http://www.sitepoint.com/forums/show...est+css+skills
    test 7:http://www.sitepoint.com/forums/show...44#post3216244
    test 8:http://www.sitepoint.com/forums/show...64#post3235664
    test9:http://www.sitepoint.com/forums/show...45#post4108145
    test10:http://www.sitepoint.com/forums/show...63#post4119063
    test11:http://www.sitepoint.com/forums/showthread.php?t=595943
    test12: http://www.sitepoint.com/forums/showthread.php?t=597256
    test13:http://www.sitepoint.com/forums/showthread.php?t=598538
    test 14:http://www.sitepoint.com/forums/showthread.php?t=600332
    test 15:http://www.sitepoint.com/forums/showthread.php?t=601564
    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
  •