SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 47 of 47
  1. #26
    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>

  2. #27
    SitePoint Enthusiast ravi_k47's Avatar
    Join Date
    Feb 2009
    Location
    india
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can i post the answer here ?? im a newbie.

  3. #28
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Send in your submission as a private message to Paul O'B.

    If you post your answer, you'll 'ruin' the quiz for those who are going to submit their solutions but have not yet done so. Paul will post the solutions once the quiz finishes (probably on Friday).
    Birnam wood is come to Dunsinane

  4. #29
    SitePoint Enthusiast ravi_k47's Avatar
    Join Date
    Feb 2009
    Location
    india
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    never mind i'll wait.. its complicated :P

  5. #30
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    622
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    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>
    Thanks Eric. It could be achieved with JavaScript (as can pretty much anything on a web page) but this is CSS test, testing your knowlege and the limits of what can be achieved with CSS.

    I think it could be achieved with pure CSS if you could change the html.

  6. #31
    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 ro0bear View Post
    Thanks Eric. It could be achieved with JavaScript (as can pretty much anything on a web page) but this is CSS test, testing your knowlege and the limits of what can be achieved with CSS.

    I think it could be achieved with pure CSS if you could change the html.
    That is the limits of CSS. As Paul said, you can't apply focus (or rather, it won't work) to anything other than anchors and form elements.

  7. #32
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    622
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    That is the limits of CSS. As Paul said, you can't apply focus (or rather, it won't work) to anything other than anchors and form elements.
    You could achieve it using pure CSS with :focus if you could change the html...

    I am just PM'ing Paul to see if its ok for me to post what I mean using quiz #14 as an example. It should be ok, but I will just check with Paul first.

  8. #33
    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 ro0bear View Post
    You could achieve it using pure CSS with :focus if you could change the html...

    I am just PM'ing Paul to see if its ok for me to post what I mean using quiz #14 as an example. It should be ok, but I will just check with Paul first.
    Hi, yes I know it could be accomplished if you change the HTML. I am purely referring to times in which you cannot.

  9. #34
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    622
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Hi, yes I know it could be accomplished if you change the HTML. I am purely referring to times in which you cannot.
    Oh right, no you can't using this quiz's rules with pure CSS.

    But here is an example of how you could do it if you could change the html which is based on the last quiz (not this one, so its not an answer to this quiz). (as ive done it now I might as well post it )

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
      <head>
        <title>ro0bear</title>
        <style type="text/css">
    	  a {text-align: center; font-size: 100&#37;; width: 5em; background-color: #FFFFCC; border: black 0.25em solid; outline: red 0.1em solid; padding: 0.25em; margin: 0; color: black; text-decoration: none;}
    	  a:focus {border: orange 0.25em solid;}
    	  ul {list-style: none; font-size: 75%; width: 10em; padding: 0;}
    	  ul li {display: block; background-color: blue; color: white; border: 1px solid red; margin-top: -1px; padding-left: 0.5em;}
    	  ul li:hover {text-decoration: underline; cursor: pointer;}
    	  span {position: absolute; right: 0.5em;}
    	  .first {background-color: #FFFF00; color: red;}
    	  .second {background-color: #BDBDBD;}
    	  .third {background-color: #FFA500;}
    	  #container {position: relative;}
    	  #tab_1, #tab_2, #tab_3, #tab_4 {font-size: 150%; width: 6em; height: 2em; overflow: visible; padding: 0; margin: 0; cursor: pointer;}
    	  #tab_1 {position: absolute; left: 1em; top: 0;}
    	  #tab_2 {position: absolute; left: 9em; top: 0;}
    	  #tab_3 {position: absolute; left: 17em; top: 0;}
    	  #tab_4 {position: absolute; left: 25em; width: 0; height: 0; top: 0;}
    	  #tab_1 ul {position: absolute; top: 3em;}
    	  #tab_2 ul {position: absolute; top: 3em; left: -10.65em;}
    	  #tab_3 ul {position: absolute; top: 3em; left: -21.35em;}
    	  #tab_4 ul {position: absolute; top: 3em; left: -32.05em; width: 10.1em;}
    	  #tab_4 a {display: none;}
    	  #tab_1 a:focus + ul, #tab_2 a:focus + ul, #tab_3 a:focus + ul {z-index: 1;}
        </style>
      </head>
      <body>
    
      <h1>Here are the Results</h1>
        <div id="container">
    
          <div id="tab_1">
            <a href="#">Reading</a>
            <ul>
              <li>Angela</li>
              <li class="third">Barry <span>&#171;3rd</span></li>
              <li>Carl</li>
              <li>David</li>
              <li class="first">Edward <span>&#171;1st</span></li>
              <li>Frank</li>
              <li>Gabriel</li>
              <li>Hilary</li>
              <li>Jean</li>
              <li class="second">Karen <span>&#171;2nd</span></li>
            </ul>
          </div>
          
          <div id="tab_2">
            <a href="#">Writing</a>
            <ul>
              <li>Angela</li>
              <li>Barry</li>
              <li>Carl</li>
              <li class="second">David <span>&#171;2nd</span></li>
              <li>Edward</li>
              <li>Frank</li>
              <li class="first">Gabriel <span>&#171;1st</span></li>
              <li class="third">Hilary <span>&#171;3rd</span></li>
              <li>Jean</li>
              <li>Karen</li>
            </ul>
          </div>
    
          <div id="tab_3">
            <a href="#">Arithmetic</a>
            <ul>
              <li class="second">Angela <span>&#171;2nd</span></li>
              <li>Barry</li>
              <li class="first">Carl <span>&#171;1st</span></li>
              <li>David</li>
              <li>Edward</li>
              <li class="third">Frank <span>&#171;3rd</span></li>
              <li>Gabriel</li>
              <li>Hilary</li>
              <li>Jean</li>
              <li>Karen</li>
            </ul>
          </div>
          
          <div id="tab_4">
            <a>Register</a>
            <ul>
              <li>Angela</li>
              <li>Barry</li>
              <li>Carl</li>
              <li>David</li>
              <li>Edward</li>
              <li>Frank</li>
              <li>Gabriel</li>
              <li>Hilary</li>
              <li>Jean</li>
              <li>Karen</li>
            </ul>
          </div>
    
        </div>
    
    </html>
    Paul also showed me this example that he did a long time ago http://www.pmob.co.uk/temp/hideandshow3-css.htm

    ro0bear

  10. #35
    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)
    Nice ro0bear!

  11. #36
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    awww this quiz sounds awesome, but i won't be able to participate.

    much too much work, 18 hours work a day with no coffee breaks the last 3 days, and 1 day was 19 hours... : (

    i will try it when i finish, but by then the quiz will probably be finished...

  12. #37
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Your missing out I learned a lot in this quiz, such as the limits of browser suppport for certain types of selectors .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #38
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm learning css and i feel its a challenge
    and would be tough for noob like me....
    I must have good look at w3 css tutorials

  14. #39
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i personally never found the w3 css tutorials useful, especially for pauls quizzes...

  15. #40
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I basically use w3schools as more of a reference then anything else...anyway answers are going to be posted today or tomorrow so I can't wait . Paul's quizzes ideas are usually from layouts he has on his site.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  16. #41
    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)
    Solution Time

    As I said in post #1 the days fly by so fast and another quiz is over

    I think the size and complexity of this quiz put a few people off but the basic concept wasn't really that hard but very labour intensive.

    The quickest entry was Ryan but as it only works in Opera and used CSS3 then it isn't eleigible to win outright but was a good entry considering it was received quite quickly - so well done.

    There were only three other entries which were from Centauri, RoObear and Tommy and of the three I would pick Tommy's entry as the winner but only because it scaled better than Centauri's. RoObear would be third as the display was not as clean as the others but worked fine.

    In fact the above three all worked in IE7, FF3 and Opera9.5+ so well done to all and thanks for taking part. Tommy has also supplied a CSS3 version with much reduced CSS so I will post that at the end as it shows what can be done when CSS3 is well supported (works in Opera only).

    The solution was basically using the adjacent selector to select each of the list items in turn but due to the number of adjacent items the selectors became very long.

    The days were shifted to the correct starting position by using a different margin on the start day for each month that was hovered. As the days were floated the rest of the days moved into position automatically.

    As the months are different lengths the last few days of each month had to be hidden according to what month it was. That's the reason that I left in the extra class so that days from the 28th of the month onwards could be targeted more easily (although it could have been done without this extra class anyway).

    I also said the last-child pseudo class could be used if wanted but most ignored it in order to support IE7 as it wasn't that hard to do without it.

    This is my original solution which has a few comments in it to make it easier to understand and I have left the css in a longer version than usual so that is is easier to understand what's going on.

    The example works in IE7, Opera9.5+ and Firefox3 (didn't bother checking 2 but probably works there also.

    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">
    * {
        margin:0;
        padding:0
    }
    /* December */
    li:hover + li + li ol li {
        margin-left:2.05em
    }
    li:hover + li + li ol li + li {
        margin-left:0
    }
    /* November */
    li:hover + li + li + li ol li {
        margin-left:12.4em
    }
    li:hover + li + li + li ol li + li {
        margin-left:0
    }
    li:hover + li + li + li ol li.m29 + li + li {
        visibility:hidden
    }
    /* October */
    li:hover + li + li + li + li ol li {
        margin-left:6.2em
    }
    li:hover + li + li + li + li ol li + li {
        margin-left:0
    }
    /* September */
    li:hover + li + li + li + li + li ol li {
        margin-left:2.05em
    }
    li:hover + li + li + li + li + li ol li + li {
        margin-left:0
    }
    li:hover + li + li + li + li + li ol li.m29 + li + li {
        visibility:hidden
    }
    /* August */
    li:hover + li + li + li + li + li + li ol li {
        margin-left:10.3em
    }
    li:hover + li + li + li + li + li + li ol li + li {
        margin-left:0
    }
    /* July */
    li:hover + li + li + li + li + li + li + li ol li {
        margin-left:4.1em
    }
    li:hover + li + li + li + li + li + li + li ol li + li {
        margin-left:0
    }
    /* June */
    li:hover + li + li + li + li + li + li + li + li ol li {
        margin-left:0
    }
    li:hover + li + li + li + li + li + li + li + li ol li + li {
        margin-left:0
    }
    li:hover + li + li + li + li + li + li + li + li ol li.m29 + li + li {
        visibility:hidden
    }
    /* May */
    li:hover + li + li + li + li + li + li + li + li + li ol li {
        margin-left:8.25em
    }
    li:hover + li + li + li + li + li + li + li + li + li ol li + li {
        margin-left:0
    }
    /* April */
    li:hover + li + li + li + li + li + li + li + li + li + li ol li {
        margin-left:4.1em
    }
    li:hover + li + li + li + li + li + li + li + li + li + li ol li + li {
        margin-left:0
    }
    li:hover + li + li + li + li + li + li + li + li + li + li ol li.m29 + li + li {
        visibility:hidden
    }
    /* March */
    li:hover + li + li + li + li + li + li + li + li + li + li + li ol li {
        margin-left:12.4em
    }
    li:hover + li + li + li + li + li + li + li + li + li + li + li ol li + li {
        margin-left:0
    }
    /* February */
    li:hover + li + li + li + li + li + li + li + li + li + li + li + li ol li {
        margin-left:12.4em
    }
    li:hover + li + li + li + li + li + li + li + li + li + li + li + li ol li + li {
        margin-left:0
    }
    li:hover + li + li + li + li + li + li + li + li + li + li + li + li ol li.m29 {
        visibility:hidden
    }
    li:hover + li + li + li + li + li + li + li + li + li + li + li + li ol li.m29 + li {
        visibility:hidden
    }
    li:hover + li + li + li + li + li + li + li + li + li + li + li + li ol li.m29 + li + li {
        visibility:hidden
    }
    /* january*/
    li + li + li + li + li + li + li + li + li + li + li + li + li + li ol li {
        margin-left:6.2em
    }
    li + li + li + li + li + li + li + li + li + li + li + li + li + li ol li + li {
        margin-left:0
    }
    ol, ul {
        float:left;
        width:14.7em;
        list-style:none;
        clear:both;
        text-align:center;
    }
    ul {
        border-top:1px solid red;
        border-bottom:1px solid red
    }
    li {
        float:left;
        width:3.65em;
        cursor:pointer;
    }
    li a {
        display:block;
        border:1px solid #000;
        text-decoration:none;
        color:#000;
        padding:.2em 0;
    }
    li:hover a {
        background:orange
    }
    li li {
        padding:.2em 0;
        cursor:default;
        width:2em;
        border:1px solid #000;
        margin:1px -1px 1px 0;
    }
    
    ul,ol,li {background:red}
    ol li ol {
        height:12em;
    }
    /* lets just add some nice styling now */
    li a {
        background:green;
        color:#fff;
    }
    li + li a{background:yellow;color:#000;}
    ol:hover  li a{background:yellow;color:#000;}
    ol:hover  li a:hover{background:orange;color:#000;}
    ul li{border-color:blue!important}
    div {
        float:left;
        margin:10px;
        border:5px inset red;
        background:red;
        padding:2px;
    }
    /* chequerboard effect  form here on*/
    li {
        background:#ffffcc;
    }
    li + li {
        background:#fff
    }
    li + li + li {
        background:#ffffcc
    }
    li + li + li + li {
        background:#fff
    }
    li + li + li + li + li {
        background:#ffffcc
    }
    li + li + li + li + li + li {
        background:#fff
    }
    li + li + li + li + li + li + li {
        background:#ffffcc
    }
    li + li + li + li + li + li + li + li {
        background:#fff
    }
    li + li + li + li + li + li + li + li + li {
        background:#ffffcc
    }
    li + li + li + li + li + li + li + li + li + li {
        background:#fff
    }
    li + li + li + li + li + li + li + li + li + li + li {
        background:#ffffcc
    }
    li + li + li + li + li + li + li + li + li + li + li + li {
        background:#fff
    }
    li + li + li + li + li + li + li + li + li + li + li + li + li {
        background:#ffffcc
    }
    li + li + li + li + li + li + li + li + li + li + li + li + li + li {
        background:#fff
    }
    li + li +li + li + li + li + li + li + li + li + li + li + li + li + li {
        background:#ffffcc
    }
    li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li {
        background:#fff
    }
    li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
        background:#ffffcc
    }
    li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
        background:#fff
    }
    li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
        background:#ffffcc
    }
    li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
        background:#fff
    }
    li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
        background:#ffffcc
    }
    li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
        background:#fff
    }
    li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
        background:#ffffcc
    }
    li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
        background:#fff
    }
    li + li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
        background:#ffffcc
    }
    li + li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
        background:#fff;
    }
    li + li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
        background:#ffffcc;
    }
    li + li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
        background:#fff;
    }
    li + li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
        background:#ffffcc;
    }
    li + li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
        background:#fff;
    }
    li + li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
        background:#ffffcc;
    }
    li + li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
        background:#fff;
    }
    li + li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
        background:#ffffcc;
    }
    li + li + li +li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li {
        background:#fff;
    }
    li + li + li + li + li + li + li + li + li + li + li + li + li  {
            width:14.2em;
        background:red;
    }
    li + li + li + li + li + li + li + li + li + li + li + li + li ol li  {
            width:2em;
        background:#ffffcc;
    }
    </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>
    Well done to all and keep a look out for the next quiz which I will post over the weekend.

    All the entries to follow in the next posts.

  17. #42
    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)
    Tommy's 2 solutions:

    IE7, Opera and FF3
    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">
    * {margin:0; padding:0}
    body {margin:1em}
    a {display:block; padding:0.25em 0; color:#000; text-decoration:none}
    li {list-style-type:none}
    div {width:14.7em; height:20em; border:6px inset #900; padding:2px; background-color:#f00}
    div>ol>li {float:left; width:3.5em; border:0.05em solid #000; background-color:#ff0; text-align:center}
      div>ol>li:first-child {background-color:#090; color:#fff}
        div>ol>li:first-child a {color:#fff}
      div>ol:hover>li:first-child {background-color:#ff0; color:#000}
        div>ol:hover>li:first-child a {color:#000}
        div>ol>li a:hover {background-color:#f90; color:#000}
      div>ol>li:first-child+li+li+li+li+li+li+li+li+li+li+li+li {float:none; clear:left; width:100&#37;; border:0; padding-top:1px; background-color:transparent}
        ul li {float:left; width:2em; margin-right:-1px; border:0.05em solid #00f; padding:0.25em 0; background-color:#ffc}
          ul li:first-child+li,
          ul li:first-child+li+li+li,
          ul li:first-child+li+li+li+li+li {background-color:#fff}
      div>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li {float:none; clear:left; overflow:hidden; width:100%; border:0; padding-top:1px; background-color:transparent}
      ol ol li {float:left; width:2em; margin:1px -1px 0 0; border:0.05em solid #000; padding:0.25em 0; background-color:#ffc}
        ol ol li:first-child+li,
        ol ol li:first-child+li+li+li,
        ol ol li:first-child+li+li+li+li+li,
        ol ol li:first-child+li+li+li+li+li+li+li,
        ol ol li:first-child+li+li+li+li+li+li+li+li+li,
        ol ol li:first-child+li+li+li+li+li+li+li+li+li+li+li,
        ol ol li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li,
        ol ol li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
        ol ol li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
        ol ol li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
        ol ol li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
        ol ol li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
        ol ol li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
        ol ol li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
        ol ol li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {background-color:#fff}
        ol ol li:first-child {margin-left:6.2em}
        li:hover+li+li+li+li+li+li+li+li ol li:first-child {margin-left:0}
        li:hover+li+li+li+li+li+li+li ol li:first-child,
        li:hover+li+li+li+li+li+li+li+li+li+li ol li:first-child {margin-left:4.1em}
        li:hover+li+li ol li:first-child,
        li:hover+li+li+li+li+li ol li:first-child {margin-left:2.05em}
        li:hover+li+li+li+li+li+li+li+li+li ol li:first-child {margin-left:8.3em}
        li:hover+li+li+li+li+li+li ol li:first-child {margin-left:10.3em}
        li:hover+li+li+li ol li:first-child,
        li:hover+li+li+li+li+li+li+li+li+li+li+li ol li:first-child,
        li:hover+li+li+li+li+li+li+li+li+li+li+li+li ol li:first-child {margin-left:12.4em}
        li:hover+li+li+li+li+li+li+li+li+li+li+li+li ol .m29,
        li:hover+li+li+li+li+li+li+li+li+li+li+li+li ol .m29+li,
        li:hover+li+li+li+li+li+li+li+li+li+li+li+li ol .m29+li+li,
        li:hover+li+li+li ol .m29+li+li,
        li:hover+li+li+li+li+li ol .m29+li+li,
        li:hover+li+li+li+li+li+li+li+li ol .m29+li+li,
        li:hover+li+li+li+li+li+li+li+li+li+li ol .m29+li+li {display:none}</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>
    CSS3 Opera only
    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">
    * {margin:0; padding:0}
    body {margin:1em}
    a {display:block; padding:0.25em 0; color:inherit; text-decoration:none}
    li {list-style-type:none}
    div {width:14.7em; height:20em; border:6px inset #900; padding:2px; background-color:#f00}
    div>ol>li {float:left; width:3.5em; border:0.05em solid #000; background-color:#ff0; text-align:center}
      div>ol>li:first-child {background-color:#090; color:#fff}
      div>ol:hover>li:first-child {background-color:#ff0; color:#000}
        div>ol>li a:hover {background-color:#f90; color:#000}
      div>ol>li:nth-child(13) {float:none; clear:left; width:100%; border:0; padding-top:1px; background-color:transparent}
        ul li {float:left; width:2em; margin-right:-1px; border:0.05em solid #00f; padding:0.25em 0; background-color:#ffc}
          ul li:nth-child(even) {background-color:#fff}
      div>ol>li:nth-child(14) {float:none; clear:left; overflow:hidden; width:100%; border:0; padding-top:1px; background-color:transparent}
      ol ol li {float:left; width:2em; margin:1px -1px 0 0; border:0.05em solid #000; padding:0.25em 0; background-color:#ffc}
        ol ol li:nth-child(even) {background-color:#fff}
        ol ol li:first-child {margin-left:6.2em}
        li:nth-child(6):hover~li ol li:first-child {margin-left:0}
        li:nth-child(4):hover~li ol li:first-child, li:nth-child(7):hover~li ol li:first-child {margin-left:4.1em}
        li:nth-child(9):hover~li ol li:first-child, li:nth-child(12):hover~li ol li:first-child {margin-left:2.05em}
        li:nth-child(5):hover~li ol li:first-child {margin-left:8.3em}
        li:nth-child(8):hover~li ol li:first-child {margin-left:10.3em}
        li:nth-child(2):hover~li ol li:first-child, li:nth-child(3):hover~li ol li:first-child, li:nth-child(11):hover~li ol li:first-child {margin-left:12.4em}
        li:nth-child(2):hover~li ol li:nth-last-child(-n+3),
        li:nth-child(4):hover~li ol li:last-child,
        li:nth-child(6):hover~li ol li:last-child,
        li:nth-child(9):hover~li ol li:last-child,
        li:nth-child(11):hover~li ol li:last-child {display:none}
            </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>
    Centauri:
    IE7, OPera and FF3:
    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">
    * {
        margin: 0;
        padding: 0;
        font-size: 16px;
    }
    div {
        background-color: #FF0000;
        padding: 1px;
        border: 5px solid;
        border-color: #A90000 #FF8E8E #FF8E8E #A90000;
        margin: 10px auto;
        width: 246px;
        overflow: hidden;
    }
    ul, ol {
        float: left;
        padding-left: 1px;
        width: 245px;
        overflow: hidden;
    }
    li ol, li ul {
        margin-left: -1px;
    }
    li ol {
        margin-top: 1px;
    }
    li {
        height: 24px;
        line-height: 24px;
        list-style: none;
        float: left;
        border: 1px solid black;
    }
    a {
        float: left;
        height: 24px;
        width: 59px;
        background-color: #FFFF00;
        color: #000000;
        text-decoration: none;
        text-align: center;
    }
    li:first-child a {
        background-color: #008000;
        color: #FFFFFF;
    }
    ol:hover li:first-child a {
        background-color: #FFFF00;
        color: #000000;
    }
    ol:hover li a:hover {
        background-color: #FFA500;
    }
    li li {
        width: 34px;
        text-align: center;
        background-color: #FFFFCC;
        margin: 1px 0 0 -1px;
    }
    li:first-child+li,li:first-child+li+li+li, li:first-child+li+li+li+li+li,
    li:first-child+li+li+li+li+li+li+li, li:first-child+li+li+li+li+li+li+li+li+li,
    li:first-child+li+li+li+li+li+li+li+li+li+li+li, li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li,
    li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
    li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
    li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
    li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
    li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
    li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
    li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li,
    li:first-child+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
        background-color: #FFFFFF;
    }
    li ul li {
        border-color: #0000FF;
    }
    div>ol>li+li+li+li+li+li+li+li+li+li+li+li+li {
        height: auto;
        background-color: #FF0000 !important;
        border: 0;
        width: 245px;
    }
    li ol li:first-child {
        margin-left: 104px;
    }
    li:hover+li+li+li+li+li+li+li+li+li+li+li+li ol li:first-child,
    li:hover+li+li+li+li+li+li+li+li+li+li+li ol li:first-child,
    li:hover+li+li+li ol li:first-child {
        margin-left: 209px;
    }
    li:hover+li+li+li+li+li+li ol li:first-child {
        margin-left: 174px;
    }
    li:hover+li+li+li+li+li+li+li+li+li ol li:first-child {
        margin-left: 139px;
    }
    li:hover+li+li+li+li+li+li+li+li+li+li ol li:first-child,
    li:hover+li+li+li+li+li+li+li ol li:first-child {
        margin-left: 69px;
    }
    li:hover+li+li+li+li+li ol li:first-child,
    li:hover+li+li ol li:first-child {
        margin-left: 34px;
    }
    li:hover+li+li+li+li+li+li+li+li ol li:first-child {
        margin-left: -1px;
    }
    li:hover+li+li+li ol li.m29+li+li,
    li:hover+li+li+li+li+li ol li.m29+li+li,
    li:hover+li+li+li+li+li+li+li+li ol li.m29+li+li,
    li:hover+li+li+li+li+li+li+li+li+li+li ol li.m29+li+li {
        display: none;
    }
    li:hover+li+li+li+li+li+li+li+li+li+li+li+li ol li.m29,
    li:hover+li+li+li+li+li+li+li+li+li+li+li+li ol li.m29+li,
    li:hover+li+li+li+li+li+li+li+li+li+li+li+li ol li.m29+li+li {
        display: none;
    }
    li:hover ol {
    }
    </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>

  18. #43
    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)
    RoObear:
    IE7, Opera and FF3:
    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">
    * {
        padding: 0;
        margin: 0;
        text-align: center;
    }
    div {
        width: 22.9em;
        border: outset 5px red;
        background-color: red;
        height: 29em;
        margin: 3em;
        padding: 1em;
    }
    ol, ul {
        padding: 0;
        margin: 0;
    }
    li {
        float: left;
        margin: 0.1em 0 0.1em 0;
    }
    li, a, ul, ol {
        display: block;
    }
    ol li a {
        width: 5em;
        background-color: yellow;
        border: 0.05em solid black;
        text-align: center;
    }
    ol li ol li {
        width: 3em;
        padding: 0.5em 0 0.5em 0;
        background-color: white;
        border: solid black 0.1em;
    }
    ol li ul li {
        width: 3em;
        padding: 0.5em 0 0.5em 0;
        background-color: white;
        border: solid blue 0.1em;
    }
    ol>li+li+li+li+li+li+li+li+li+li+li+li+li {
        width: 22.9em;
    }
    ol>li>ol>li {
        width: 3em !important;
    }
    a {
        background-color: yellow;
        text-decoration: none;
        color: black;
        padding: 0.5em 0 0.5em 0;
    }            /* background color for months */
    ol>li:first-child a:hover {
        background-color: green;
        color: white;
    }                                     /* hover background color for Jan */
    a:hover {
        background-color: orange;
    }                                                                     /* hover background color for months */
    ol>li:first-child:hover+li+li+li+li+li+li+li+li+li+li+li+li+li>ol>li:first-child {
        margin-left: 9.3em;
    }  /* Jan */
    ol>li+li:hover+li+li+li+li+li+li+li+li+li+li+li+li>ol>li:first-child {
        margin-left: 18.6em;
    }             /* Feb */
    ol>li+li:hover+li+li+li+li+li+li+li+li+li+li+li+li .m29 {
        display: none;
    }                                /* Feb 29th */
    ol>li+li:hover+li+li+li+li+li+li+li+li+li+li+li+li .m29+li {
        display: none;
    }                             /* Feb 30th */
    ol>li+li:hover+li+li+li+li+li+li+li+li+li+li+li+li .m29+li+li {
        display: none;
    }                          /* Feb 31st */
    ol>li+li+li:hover+li+li+li+li+li+li+li+li+li+li+li>ol>li:first-child {
        margin-left: 9.3em;
    }              /* Mar */
    ol>li+li+li+li:hover+li+li+li+li+li+li+li+li+li+li>ol>li:first-child {
        margin-left: 6.2em;
    }              /* Apr */
    ol>li+li+li+li:hover+li+li+li+li+li+li+li+li+li+li .m29+li+li {
        display: none;
    }                          /* Apr 31st */
    ol>li+li+li+li+li:hover+li+li+li+li+li+li+li+li+li>ol>li:first-child {
        margin-left: 12.4em;
    }             /* May */
    ol>li+li+li+li+li+li:hover+li+li+li+li+li+li+li+li>ol>li:first-child {
        margin-left: 0;
    }                  /* Jun */
    ol>li+li+li+li+li+li:hover+li+li+li+li+li+li+li+li .m29+li+li {
        display: none;
    }                          /* Jun 31st */
    ol>li+li+li+li+li+li+li:hover+li+li+li+li+li+li+li>ol>li:first-child {
        margin-left: 6.2em;
    }              /* Jul */
    ol>li+li+li+li+li+li+li+li:hover+li+li+li+li+li+li>ol>li:first-child {
        margin-left: 15.5em;
    }             /* Aug */
    ol>li+li+li+li+li+li+li+li+li:hover+li+li+li+li+li>ol>li:first-child {
        margin-left: 3.1em;
    }              /* Sept */
    ol>li+li+li+li+li+li+li+li+li:hover+li+li+li+li+li .m29+li+li {
        display: none;
    }                          /* Sept 31st */
    ol>li+li+li+li+li+li+li+li+li+li:hover+li+li+li+li>ol>li:first-child {
        margin-left: 9.3em;
    }              /* Oct */
    ol>li+li+li+li+li+li+li+li+li+li+li:hover+li+li+li>ol>li:first-child {
        margin-left: 18.7em;
    }             /* Nov */
    ol>li+li+li+li+li+li+li+li+li+li+li:hover+li+li+li .m29+li+li {
        display: none;
    }                          /* Nov 31st */
    ol>li+li+li+li+li+li+li+li+li+li+li+li:hover+li+li>ol>li:first-child {
        margin-left: 3.1em;
    }              /* Dec */
    /* Alteraltive Background Color */
    
    ol>li>ul>li:first-child {
        background-color: #FFFFCC;
    }
    ol>li>ul>li+li {
        background-color: white;
    }
    ol>li>ul>li+li+li {
        background-color: #FFFFCC;
    }
    ol>li>ul>li+li+li+li {
        background-color: white;
    }
    ol>li>ul>li+li+li+li+li {
        background-color: #FFFFCC;
    }
    ol>li>ul>li+li+li+li+li+li {
        background-color: white;
    }
    ol>li>ul>li+li+li+li+li+li+li {
        background-color: #FFFFCC;
    }
    ol>li>ol>li:first-child {
        background-color: #FFFFCC;
    }
    ol>li>ol>li+li {
        background-color: white;
    }
    ol>li>ol>li+li+li {
        background-color: #FFFFCC;
    }
    ol>li>ol>li+li+li+li {
        background-color: white;
    }
    ol>li>ol>li+li+li+li+li {
        background-color: #FFFFCC;
    }
    ol>li>ol>li+li+li+li+li+li {
        background-color: white;
    }
    ol>li>ol>li+li+li+li+li+li+li {
        background-color: #FFFFCC;
    }
    ol>li>ol>li+li+li+li+li+li+li+li {
        background-color: white;
    }
    ol>li>ol>li+li+li+li+li+li+li+li+li {
        background-color: #FFFFCC;
    }
    ol>li>ol>li+li+li+li+li+li+li+li+li+li {
        background-color: white;
    }
    ol>li>ol>li+li+li+li+li+li+li+li+li+li+li {
        background-color: #FFFFCC;
    }
    ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li {
        background-color: white;
    }
    ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li {
        background-color: #FFFFCC;
    }
    ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li {
        background-color: white;
    }
    ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
        background-color: #FFFFCC;
    }
    ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
        background-color: white;
    }
    ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
        background-color: #FFFFCC;
    }
    ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
        background-color: white;
    }
    ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
        background-color: #FFFFCC;
    }
    ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
        background-color: white;
    }
    ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
        background-color: #FFFFCC;
    }
    ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
        background-color: white;
    }
    ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
        background-color: #FFFFCC;
    }
    ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
        background-color: white;
    }
    ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
        background-color: #FFFFCC;
    }
    ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
        background-color: white;
    }
    ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
        background-color: #FFFFCC;
    }
    ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
        background-color: white;
    }
    ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
        background-color: #FFFFCC;
    }
    ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
        background-color: white;
    }
    ol>li>ol>li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li+li {
        background-color: #FFFFCC;
    }
    </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>
    Ryan:
    Opera only and some CSS3

    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">
    *{margin:0;padding:0;}
    a
    {
        color:black;
        text-decoration:none;
    }
    div
    {
        background:white;
        overflow:hidden;
        width:399px;
    }
    ol
    {
        width:388px;
        height:500px;
        overflow:hidden;
        background:red;
        border-left:5px solid red;
        border-right:5px solid red;
        border-top:5px solid pink;
    }
    ol,li,ul
    {
        list-style-type:none;
    }
    div>ol>li
    {
        width:93px;
    }
    ol li
    {
        float:left;
        background:yellow;
        color:black;
        text-align:center;
        line-height:40px;
        height:40px;
        border:2px solid black;
        list-style-type:none;
    }
    ol li ul
    {
        width:400px;
        position:relative;
        z-index:1;
        border:none;
        padding:0;
    }
    ol li ul li
    {
        background:white;
        border:1px solid blue;
        width:54px;
        position:relative;
        z-index:3;
        padding:0;
    }
    ol li ol
    {
        border:none;
        position:relative;
        top:42px;
        left:-94px;
    }
    ol li ol li
    {
        background:white;
        display:inline;
        padding:0;
        width:51px;
        float:left;
    }
    ol li:last-child ol li:first-child
    {
        margin-left:164px;
    }
    div>ol>li:nth-child(1)
    {
        background:green;
        color:white;
    }
    div>ol>li:nth-child(2):hover
    {
        background:orange;
    }
    div>ol>li:nth-child(3):hover
    {
        background:orange;
    }
    div>ol>li:nth-child(4):hover
    {
        background:orange;
    }
    div>ol>li:nth-child(5):hover
    {
        background:orange;
    }
    div>ol>li:nth-child(6):hover
    {
        background:orange;
    }
    div>ol>li:nth-child(7):hover
    {
        background:orange;
    }
    div>ol>li:nth-child(8):hover
    {
        background:orange;
    }
    div>ol>li:nth-child(9):hover
    {
        background:orange;
    }
    div>ol>li:nth-child(10):hover
    {
        background:orange;
    }
    div>ol>li:nth-child(11):hover
    {
        background:orange;
    }
    div>ol>li:nth-child(12):hover
    {
        background:orange;
    }
    div>ol>li:hover:nth-child(2)+li+li+li+li+li+li+li+li+li+li+li+li ol li:first-child
    {
        margin-left:330px;
    }
    div>ol>li:hover:nth-child(3)+li+li+li+li+li+li+li+li+li+li+li ol li:first-child
    {
        margin-left:330px;
    }
    div>ol>li:hover:nth-child(4)+li+li+li+li+li+li+li+li+li+li ol li:first-child
    {
        margin-left:110px;
    }
    div>ol>li:hover:nth-child(5)+li+li+li+li+li+li+li+li+li ol li:first-child
    {
        margin-left:219px;
    }
    div>ol>li:hover:nth-child(6)+li+li+li+li+li+li+li+li ol li:first-child
    {
        margin-left:0px;
    }
    div>ol>li:hover:nth-child(7)+li+li+li+li+li+li+li ol li:first-child
    {
        margin-left:110px;
    }
    div>ol>li:hover:nth-child(8)+li+li+li+li+li+li ol li:first-child
    {
        margin-left:276px;
    }
    div>ol>li:hover:nth-child(9)+li+li+li+li+li ol li:first-child
    {
        margin-left:53px;
    }
    div>ol>li:hover:nth-child(11)+li+li+li ol li:first-child
    {
        margin-left:330px;
    }
    div>ol>li:hover:nth-child(12)+li+li ol li:first-child
    {
        margin-left:50px;
    }
    div>ol>li>ol li:nth-child(odd), div>ol>li>ul li:nth-child(even)
    {
        background:pink;
    }
    div>ol>li:hover:nth-child(9)+li+li+li+li+li ol li.m29+li+li, div>ol>li:hover:nth-child(6)+li+li+li+li+li+li+li+li ol li.m29+li+li, div>ol>li:hover:nth-child(4)+li+li+li+li+li+li+li+li+li+li ol li.m29+li+li, div>ol>li:hover:nth-child(2)+li+li+li+li+li+li+li+li+li+li+li+li ol li.m29, div>ol>li:hover:nth-child(2)+li+li+li+li+li+li+li+li+li+li+li+li ol li.m29+li, div>ol>li:hover:nth-child(2)+li+li+li+li+li+li+li+li+li+li+li+li ol li.m29+li+li
    {
        visibility:hidden;
    }
    
    </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>
    Well done to all - I'm using my calendar as we speak

  19. #44
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Location
    Sydney, Australia
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would of never thought to attempt it like that (your original solution), but as far as that goes, I didn't even get very far anyway. Shows my lack of understanding of CSS still.

    Very cool though to see how it was done.

  20. #45
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I thought I'd be a bit creative with my CSS3 as it would merely have taken a bit more code to produce the results using CSS2. I'm just lazy: I admit . When's the next quiz?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  21. #46

  22. #47
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    And what a great quiz it is indeed .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •