SitePoint Sponsor

User Tag List

Results 1 to 25 of 47

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 15 :

    CSS - Test Your CSS Skills Number 15 : Quiz ended - Solution posted in post #41

    These days fly by so fast that I can't keep track. What I really need is a little html calendar so I can tell what day it is. Sounds like a good idea for a little quiz.

    If you've been following the previous few quizzes then then this next quiz builds on what you have learned so beginners to intermediate could have a go at this by looking at the answers to the last couple of quizzes.

    Have a look at the attachment and you will see 12 little screenshots of a calendar I have constructed showing the months from January to December. (This exercise took me about 2 hours from start to finish so you will need a long coffee break to attempt this - Note the deliberate mistake where November seems to have more days than it should ;))

    Your mission (should you once again accept) is to produce the calendar using the html that I will give you.

    The calendar should have a default setting for January showing but when you hover over any other of the other months then January switches off and the other month is highlighted in any colour you want (orange in my example).

    Look at the attachment which shows the 12 states of the calendar as I hovered over each month in turn. Also notice that each month has the correct number of days and starts on the correct day for each month.

    Only the months need to be hovered and the days will revert to default as soon as the mouse is moved away from the month section (i.e. You don't need to keep the days in view if you leave the month section and then tried to move the mouse to one of the days (although that could be another quiz idea )).

    I am going to set a few other rules to make it awkward for you as usual.

    1) You must use the html I have given and you can only add CSS within the style element that is in the head. (No classes can be added to the html)

    2) The css must be valid css2.1 (no CSS3) apart from one property that I will let you use and that is the last-child psudo class.
    Code:
    :last-child
    3) No absolute positioning

    4) Each day should be alternately coloured as per my example and in a nice little box.

    5) Make the calendar as aesthetically pleasing as possible as styling this is a little awkward and needs some thought.

    6) This only needs to work in Firefox 3 and Opera 10


    Here is the html that you must use.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    /* enter your css here */
    
    
    </style>
    </head>
    <body>
    <div>
        <ol>
            <li><a href="#">Jan</a></li>
            <li><a href="#">Feb</a></li>
            <li><a href="#">Mar</a></li>
            <li><a href="#">Apr</a></li>
            <li><a href="#">May</a></li>
            <li><a href="#">Jun</a></li>
            <li><a href="#">July</a></li>
            <li><a href="#">Aug</a></li>
            <li><a href="#">Sep</a></li>
            <li><a href="#">Oct</a></li>
            <li><a href="#">Nov</a></li>
            <li><a href="#">Dec</a></li>
            <li>
                <ul>
                    <li>Mon</li>
                    <li>Tue</li>
                    <li>Wed</li>
                    <li>Thu</li>
                    <li>Fri</li>
                    <li>Sat</li>
                    <li>Sun</li>
                </ul>
            </li>
            <li>
                <ol>
                    <li>01</li>
                    <li>02</li>
                    <li>03</li>
                    <li>04</li>
                    <li>05</li>
                    <li>06</li>
                    <li>07</li>
                    <li>08</li>
                    <li>09</li>
                    <li>10</li>
                    <li>11</li>
                    <li>12</li>
                    <li>13</li>
                    <li>14</li>
                    <li>15</li>
                    <li>16</li>
                    <li>17</li>
                    <li>18</li>
                    <li>19</li>
                    <li>20</li>
                    <li>21</li>
                    <li>22</li>
                    <li>23</li>
                    <li>24</li>
                    <li>25</li>
                    <li>26</li>
                    <li>27</li>
                    <li>28</li>
                    <li class="m29">29</li>
                    <li>30</li>
                    <li>31</li>
                </ol>
            </li>
        </ol>
    </div>
    </body>
    </html>
    The code should be valid html and css2.1 (apart from the :last-child pseudo class that I will let you use) and work in all the above mentioned browsers without hacks needed.

    General Rules:

    No javascript or scripting of any kind
    No images or background images.
    No Hacks
    Firefox3 and Opera10 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 but the techniques used to create it are essential tools in your css toolbox.

    Solutions 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
    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
  •