CSS code

  1. body {
  2. font: normal 75%/150% Verdana, Arial, Helvetica, sans-serif;
  3. text-align: center;
  4. }
  5. /* this code comes from www.456bereastreet.com */
  6. #accessibility {
  7. position: absolute;
  8. left: -5000px;
  9. }
  10. #accessibility a:focus,
  11. #accessibility a:active {
  12. display: block;
  13. position: absolute;
  14. top: 10px;
  15. left: 5001px;
  16. z-index: 10;
  17. font-size: 1em;
  18. line-height: 120%;
  19. padding: 0.5em;
  20. border: 2px solid #B22222;
  21. width: 20em;
  22. background: #FFFAFA;
  23. }
  24. #accessibility a:hover {
  25. text-decoration: underline;
  26. border-color: #580801;
  27. }
  28. #page {
  29. position: relative;
  30. width: 57em;
  31. margin: 1em auto 0;
  32. text-align: left;
  33. }
  34. #head {
  35. position: relative;
  36. width: 45em;
  37. height: 100px;
  38. overflow: hidden;
  39. border-right: 1px solid white;
  40. }
  41. #main {
  42. width: 45em;
  43. overflow: hidden;
  44. }
  45. #main #content {
  46. float: right;
  47. width: 31em;
  48. margin: 0;
  49. overflow: hidden;
  50. }
  51. #main #menu {
  52. width: 13em;
  53. margin-right: 1em;
  54. }
  55. #related {
  56. position: absolute;
  57. right: 0;
  58. top: 0;
  59. width: 10em;
  60. margin-top: 1em;
  61. padding: 0 5px;
  62. background: #F08080;
  63. }
  64. #footer {
  65. text-align: center;
  66. height: 50px;
  67. }

HTML code

  1. <div id="page">
  2. <ul id="accessibility">
  3. <li><a href="#menu" tabindex="1" accesskey="m">Skip to menu</a></li>
  4. <li><a href="#content" tabindex="2" accesskey="s">Skip to content</a></li>
  5. <li><a href="#related" tabindex="3" accesskey="r">Skip to related links</a></li>
  6. </ul>
  7. <div id="head">
  8. <h1></h1>
  9. </div>
  10. <div id="main">
  11. <div id="content"></div>
  12. <div id="menu"></div>
  13. </div>
  14. <div id="related"></div>
  15. <div id="footer"></div>
  16. </div>