Posted By


jlizarraga on 03/13/09

Tagged


Statistics


Viewed 591 times
Favorited by 0 user(s)

YUI TabView Reset CSS


/ Published in: CSS
Save to your folder(s)

This is a CSS reset snippet for the default (yui-navset-top) style of YUI TabView 2.7.0. This snippet enables rapid TabView prototyping and makes it easy to overwrite the default style while still serving the main CSS from Yahoo!'s servers.

Note: Does not overwrite the :hover states. To do so, simply copy and paste a given block and add :hover on the end. :)

Update (05.07.09): Now includes the fix for the following 2.7.0 bug:

http://yuilibrary.com/projects/yui2/ticket/2527894


Copy this code and paste it in your HTML
  1. /* YUI TabView Reset CSS */
  2. /* TabView Nav */
  3. .yui-skin-sam .yui-navset .yui-nav,
  4. .yui-skin-sam .yui-navset .yui-navset-top .yui-nav {
  5. border-width: 0;
  6. }
  7. /* <li>'s */
  8. .yui-skin-sam .yui-navset .yui-nav li,
  9. .yui-skin-sam .yui-navset .yui-navset-top .yui-nav li,
  10. .yui-skin-sam .yui-navset .yui-navset-bottom .yui-nav li {
  11. margin: 0 5px 0 5px;
  12. padding: 0;
  13. border-width: 0;
  14. }
  15. /* <li class="selected"> */
  16. .yui-skin-sam .yui-navset .yui-nav .selected,
  17. .yui-skin-sam .yui-navset .yui-navset-top .yui-nav .selected {
  18. margin: 0 0 -1px 0;
  19. padding: 0;
  20. border-width: 0;
  21. }
  22. /* <li> <a>'s */
  23. .yui-skin-sam .yui-navset .yui-nav a,
  24. .yui-skin-sam .yui-navset .yui-navset-top .yui-nav a {
  25. margin: 0;
  26. padding: 0;
  27. border-width: 0;
  28. background: none;
  29. }
  30. /* <li class="selected"> <a> */
  31. .yui-skin-sam .yui-navset .yui-nav .selected a,
  32. .yui-skin-sam .yui-navset .yui-navset-top .yui-nav .selected a {
  33. margin: 0;
  34. padding: 0;
  35. border-width: 0;
  36. background: none;
  37. }
  38. /* <li> <a> <em>'s */
  39. .yui-skin-sam .yui-navset .yui-nav a em,
  40. .yui-skin-sam .yui-navset .yui-navset-top .yui-nav a em {
  41. top: 0;
  42. margin: 0;
  43. padding: 0;
  44. border-width: 0;
  45. cursor: pointer;
  46. }
  47. /* <li class="selected"> <a> <em> */
  48. .yui-skin-sam .yui-navset .yui-nav .selected a em,
  49. .yui-skin-sam .yui-navset .yui-navset-top .yui-nav .selected a em {
  50. top: 0;
  51. margin: 0;
  52. padding: 0;
  53. border-width: 0;
  54. cursor: pointer;
  55. }
  56. /* <div class="yui-content"> */
  57. .yui-skin-sam .yui-navset .yui-content,
  58. .yui-skin-sam .yui-navset .yui-navset-top .yui-content {
  59. margin: 0;
  60. padding: 0px;
  61. border: 1px solid #c9c9c9;
  62. background: #f2f2f2;
  63. }
  64. /* YUI TabView 2.7.0 Bug Fix (#2527894) */
  65. .yui-skin-sam .yui-navset .yui-content .yui-hidden,
  66. .yui-skin-sam .yui-navset .yui-navset-top .yui-content .yui-hidden {
  67. display: none;
  68. }

URL: http://developer.yahoo.com/yui/tabview/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.