Posted By

johnloy on 05/26/09


Tagged

css menu textmate template layout


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

nerdfiles


Perfectly centered tabs, cross-browser, no-hacks, no inline-block


 / Published in: Other
 

  1. /*
  2. Technique by Matthew James Taylor
  3. http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
  4.  
  5. Corresponding markup:
  6.  
  7. <div id="centeredmenu">
  8. <ul>
  9. <li><a href="#">Tab one</a></li>
  10. <li><a href="#" class="active">Tab two</a></li>
  11. <li><a href="#">Tab three</a></li>
  12. <li><a href="#">Tab four</a></li>
  13. </ul>
  14. </div>
  15.  
  16. */
  17.  
  18. #centeredmenu {
  19. float:left;
  20. width:100%;
  21. background:#fff;
  22. border-bottom:4px solid #000;
  23. overflow:hidden;
  24. position:relative;
  25. }
  26. #centeredmenu ul {
  27. clear:left;
  28. float:left;
  29. list-style:none;
  30. margin:0;
  31. padding:0;
  32. position:relative;
  33. left:50%;
  34. text-align:center;
  35. }
  36. #centeredmenu ul li {
  37. display:block;
  38. float:left;
  39. list-style:none;
  40. margin:0;
  41. padding:0;
  42. position:relative;
  43. right:50%;
  44. }
  45. #centeredmenu ul li a {
  46. display:block;
  47. margin:0 0 0 1px;
  48. padding:3px 10px;
  49. background:#ddd;
  50. color:#000;
  51. text-decoration:none;
  52. line-height:1.3em;
  53. }
  54. #centeredmenu ul li a:hover {
  55. background:#369;
  56. color:#fff;
  57. }
  58. #centeredmenu ul li a.active,
  59. #centeredmenu ul li a.active:hover {
  60. color:#fff;
  61. background:#000;
  62. font-weight:bold;
  63. }

Report this snippet  

You need to login to post a comment.