SitePoint Sponsor |
|
User Tag List
Results 26 to 47 of 47
-
Feb 25, 2009, 10:13 #26
- Join Date
- Dec 2007
- Location
- Carlsbad, California, United States
- Posts
- 3,658
- Mentioned
- 15 Post(s)
- Tagged
- 0 Thread(s)
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>
-
Feb 25, 2009, 11:01 #27
- 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.
-
Feb 25, 2009, 11:16 #28
- 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
-
Feb 25, 2009, 11:24 #29
- Join Date
- Feb 2009
- Location
- india
- Posts
- 68
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
never mind i'll wait.. its complicated :P
-
Feb 25, 2009, 12:28 #30
- Join Date
- Oct 2007
- Location
- United Kingdom
- Posts
- 622
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
-
Feb 25, 2009, 12:55 #31
- Join Date
- Dec 2007
- Location
- Carlsbad, California, United States
- Posts
- 3,658
- Mentioned
- 15 Post(s)
- Tagged
- 0 Thread(s)
-
Feb 25, 2009, 13:46 #32
- Join Date
- Oct 2007
- Location
- United Kingdom
- Posts
- 622
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
-
Feb 25, 2009, 13:50 #33
- Join Date
- Dec 2007
- Location
- Carlsbad, California, United States
- Posts
- 3,658
- Mentioned
- 15 Post(s)
- Tagged
- 0 Thread(s)
-
Feb 25, 2009, 14:21 #34
- Join Date
- Oct 2007
- Location
- United Kingdom
- Posts
- 622
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
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%; 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>«3rd</span></li> <li>Carl</li> <li>David</li> <li class="first">Edward <span>«1st</span></li> <li>Frank</li> <li>Gabriel</li> <li>Hilary</li> <li>Jean</li> <li class="second">Karen <span>«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>«2nd</span></li> <li>Edward</li> <li>Frank</li> <li class="first">Gabriel <span>«1st</span></li> <li class="third">Hilary <span>«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>«2nd</span></li> <li>Barry</li> <li class="first">Carl <span>«1st</span></li> <li>David</li> <li>Edward</li> <li class="third">Frank <span>«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>
ro0bear
-
Feb 25, 2009, 14:33 #35
- Join Date
- Dec 2007
- Location
- Carlsbad, California, United States
- Posts
- 3,658
- Mentioned
- 15 Post(s)
- Tagged
- 0 Thread(s)
Nice ro0bear!
-
Feb 26, 2009, 14:30 #36
- 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...
-
Feb 26, 2009, 14:31 #37
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 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
-
Feb 27, 2009, 04:39 #38
- 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
-
Feb 27, 2009, 05:00 #39
- 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...
-
Feb 27, 2009, 07:40 #40
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 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
-
Feb 27, 2009, 15:06 #41
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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>
All the entries to follow in the next posts.
-
Feb 27, 2009, 15:06 #42
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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%; 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>
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>
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>
-
Feb 27, 2009, 15:06 #43
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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>
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>
-
Feb 27, 2009, 18:01 #44
- 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.
-
Feb 27, 2009, 21:55 #45
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 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
-
Feb 28, 2009, 12:02 #46
-
Feb 28, 2009, 13:40 #47
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 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