SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 47

Hybrid 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,481
    Mentioned
    182 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

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    This is t aking me forever...ugh...
    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,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    GOD IF I CAN JUST FIGURE OUT HOW TO SELECT <li>01</li> THEN IM DONE!!!!!!!!! WTFACK WHY IS THIS NOT WORKIN!!

    Edit: Answer posted . 5.2kb after all work is finished
    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,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Ryan has sent me an entry that is working well in Opera but does use more than the allowed units of CSS3.

    Well done for the quickest entry Ryan (even if it did break the rules a bit)

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Centauri has an entry that works in IE7, Firefox3 and Opera 10 with no problem - Well done Graeme for yet another great entry

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I'm surprised how far Safari has extended CSS3 crap..they let you go so far with something but then cut you dry...it's quite interesting.
    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,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hmmm.... I think I scared everyone away with this one

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    They see it take you 2 hours and they run off...it is a hard quiz though.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'll give it a go when I get a free moment or 20!

    The 'November' mistake... I assume you pointed this out so that we DON'T replicate it, or should we still follow the screenshots? :P

  10. #10
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stormrider View Post
    The 'November' mistake... I assume you pointed this out so that we DON'T replicate it
    I picked that up when I did my entry, and it would have been more fun to not say anything and see how many others picked it up - maybe to score a few bonus accolades

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I followed it and didn't even notice it lol. I think he doesn't really care because if you can gget that far (at least if I was Paul (oh how I wish )) I wouldn't care since I knew you could do it.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    To be honest I only noticed it after I read Pauls edit .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    SitePoint Guru
    Join Date
    Oct 2008
    Location
    Melbourne
    Posts
    754
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, I'm not sure how I feel about the semantics of this markup. Looks like a tasty challenge nonetheless!
    "I'm Commander Shepard, and this is
    my favourite post on the internet."

    We'll miss you, Dan Schulz.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Yes sorry about the 31 days in November Thanks to Centauri for pointing out. I'm not even sure where it came from as my html version shows 30 days in November so I must have grabbed a screenshot from an earlier version in error before I put in the logic for the days.

    Quote Originally Posted by raena
    Hmmm, I'm not sure how I feel about the semantics of this markup
    No semantics went out of the window on this quiz - Otherwise we would have needed 12 more nested ols or more semantically 12 tables

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I don't think anyone else is trying this out....I say just post solutions?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  16. #16
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I want to start mine on Saturday. Can you wait until then, Ryan?

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Yea I can wait I was just wondering since no activity has gone in this thread .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  18. #18
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    622
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I've posted a solution, but I think Paul is busy at the moment.

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

    Just had to time to look at your entry and yes it works fine in Firefox and Opera and as an added bonus it works in IE7 also so well done yet again

    I'll let the quiz run until the end of the week anyway just in case others finds the time.

  20. #20
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't expect to have time to do this quiz, since Paul said it would take a lot of time. As it happened, there was a little lull in my schedule at work, so I decided to take a look. Unless I misunderstood the rules, it wasn't really difficult. Just a bit labour intensive. (Kept me busy for about 45 minutes. Don't tell my boss!)

    My submission seems to work in Opera 9.63, Firefox 3 and IE7 (and doesn't even use the :last-child pseudo-class; it's valid CSS2.1). I also did an alternative version for fun, using the power of CSS3 pseudo-classes and combinators. It only works in really good browsers (i.e., Opera ), but it's quite amazing how much code bloat can be reduced with :nth-child() and ~.
    Birnam wood is come to Dunsinane

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Thanks for the entries Tommy they look great.

    (I may have put some people off when I said it took 2 hours but that included, testing, working out the rules, deciding on what html to use and getting screenshots etc. Besides now that I've done all the work with the html there's only the CSS to worry about )

  22. #22
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    622
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It would be much harder if we had to use :active instead of :hover. In fact I cant think of an way it would be possible?

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ro0bear View Post
    It would be much harder if we had to use :active instead of :hover. In fact I cant think of an way it would be possible?
    I think you must mean something else as you can simply swap :active for :hover and it works straight away when you hold the mouse button down.

    Remember that :active is just the instant you click something and then the state is gone unless you hold the mouse button down.

    If you mean :focus in order to try and hold the state so that the days stay displayed then it would be difficult - in fact it would be impossible . :focus is currently only applied to elements that can receive focus (such as links and form elements).

  24. #24
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    622
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I think you must mean something else as you can simply swap :active for :hover and it works straight away when you hold the mouse button down.

    Remember that :active is just the instant you click something and then the state is gone unless you hold the mouse button down.

    If you mean :focus in order to try and hold the state so that the days stay displayed then it would be difficult - in fact it would be impossible . :focus is currently only applied to elements that can receive focus (such as links and form elements).
    woops, I meant :focus

  25. #25
    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)
    Quote Originally Posted by Paul O'B View Post
    If you mean :focus in order to try and hold the state so that the days stay displayed then it would be difficult - in fact it would be impossible . :focus is currently only applied to elements that can receive focus (such as links and form elements).
    Morning,

    I know you were referring to impossible with CSS, but you can do it with JS. I have no idea if this would work in your guys particular case, but I recently put this together (with help as usual) to go with something I was working on. This gives focus to all browsers but Safari (Safari doesn't support tabindex on other than a couple tags).

    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">
    <script type="text/javascript" src="jquery/jquery.js"></script>
      <script type="text/javascript">
      $(document).ready(function(){
        $("li").focus(function () {
             $(this).addClass('focus');
        })
        $("li").blur(function () {
             $(this).removeClass('focus');
        })
       })
      </script>
    <style type="text/css">
    :focus, .focus {
             color:red;
    }
    </style>
    </head>
    <body>
    
    <ul>
      <li tabindex="1">hello1</li>
      <li tabindex="2">hello2</li>
      <li tabindex="3">hello3</li>
    </ul>
    
    </body>
    </html>


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
  •