SitePoint Sponsor

User Tag List

Page 1 of 4 1234 LastLast
Results 1 to 25 of 96
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,522
    Mentioned
    182 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

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Nice quiz..I just need to find out how to align cells to the bottom of the a row and I'm done. I just for the life of me can't figure it out .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Answer PM'd. Also for
    Code:
                <th>Browser</th>
    I couldn't find where to put it so I just left it in there. Wasn't clear as to where it should be..

    Edit: My answer was for the hard quiz, and a tough one at that!
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,522
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Looks good Ryan well done

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    thanks. I really feel smart being the first one done the quizzes. Ima own once I get a real job at this crap . Anyway...now I got the whole week....to do nothing . What browsers does it support? IE7 failed epically because of it not supporting...
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Got bored so I did the second quiz. Answer pm'd.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

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

    Have some more entries for Raffles and MediumDeviation so well done to those 2 also

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,522
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Got bored so I did the second quiz. Answer pm'd.
    The code for the second quiz must validate Ryan and you can't just wrap the anchor around the whole block because that's cheating lol

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Didn't see that rule...AP time.

    Edit: Valid entry PMd
    Last edited by RyanReese; Mar 1, 2009 at 09:24. Reason: Entry.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Answer PM'd. Also for
    Code:
                <th>Browser</th>
    I couldn't find where to put it so I just left it in there. Wasn't clear as to where it should be..
    It's not displayed at all in the graph. You could put it above the browser legends to the right of the graph if you wanted to, but it shouldn't be necessary. The header cell is needed in the tabular version, but not in the graph version.
    Birnam wood is come to Dunsinane

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,522
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Didn't see that rule...AP time.

    Edit: Valid entry PMd
    Haven't received it yet

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I actually sent it to myself LOL. I just sent to you. Sorry just got home from work .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,522
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I've got 2 solutions from Erik for quiz b that work very well. Well done Erik

    Actually although I said quiz b was easier it's actually quite tricky as some of you are finding out. It's easy when you know the answer

    Remember that quiz B must work in IE6.

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Guess I shouldn't have assumed IE6 was working...let me rewrite it .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  15. #15
    SitePoint Member
    Join Date
    Jan 2009
    Location
    Paris, France
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Answer PM'd.



    Edit : I just noticed the answer almost works in Safari and Chrome...

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,522
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Thanks frozenmyst that seems to work well - well done.

    We now have 4 correct entries for quiz1 but only one person has given the correct answer to quiz2 so far.

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    It's not displayed at all in the graph. You could put it above the browser legends to the right of the graph if you wanted to, but it shouldn't be necessary. The header cell is needed in the tabular version, but not in the graph version.
    Ok I guess I COULD do a rewrite so it did that but honestly I don't care

    Edit: Not to say I don't appreciate you telling me that info.

    Edit2: Guess I'll have to go super-saiyan to get the second quiz working.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  18. #18
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think we could all use some CSS practice hehe

  19. #19
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Are we allowed an expression for IE6? PS: Paul read your PM.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,522
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Are we allowed an expression for IE6?
    No afraid not

    Quiz 2 is quite tricky isn't it

  21. #21
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I was going ot use the content property and aall was good but forgot IE6 fails on that...back to the drawing boards (yes it is).
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,522
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I have a solution for quiz a from Erik that works very well and even works in IE7.

    Well done Erik

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,522
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    RoObear has just sent a solution for quiz A that works well and scales with the window also.

    I have had a couple more entries for quiz B but only Erik has so far managed to crack it.

  24. #24
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I'm table-tarded, so I won't even attempt the first one. But the second...

    Can you use AB positioning for the h2 and the p? And to be clear, we only need to do "one" box right? Thanks!

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

    You can use whatever you like as long as its valid but you can only have one anchor in the box.

    You can't do this:
    Code:
    <a href="#">
    <h2>text</h2>
    <p>Text</p>
    </a>
    You can do this:
    Code:
    <div>
    <a href="#"></a>
    <h2>text</h2>
    <p>Text</p>
    </div>
    or you can do this:
    Code:
    <div>
    <h2>text</h2>
    <p><a href="#">Text<a></p>
    </div>
    Or any variation with extra elements as required but only one anchor per box and the html must be valid.

    It's not as easy as it looks


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
  •