Centered Horzontial Navigation


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



Copy this code and paste it in your HTML
  1. <!DOCTYPE html>
  2. <meta charset="utf-8" />
  3. <title>Navigation</title>
  4.  
  5. <link href="style.css" rel="stylesheet" />
  6.  
  7. <style type="text/css">
  8.  
  9. #wrapper {width: 760px: margin: 0 auto;
  10. background-color: #ccc;
  11. min-height: 600px;}
  12.  
  13.  
  14. #nav{width: 700px; margin: 0 auto;}
  15.  
  16. ul#navlist
  17. {
  18.  
  19. margin-left: 0;
  20. padding-left: 0;
  21. white-space: nowrap;
  22. }
  23.  
  24. #navlist li
  25. {
  26. display: inline;
  27. list-style-type: none;
  28. }
  29.  
  30. #navlist a { padding: 3px 10px; }
  31.  
  32. #navlist a:link, #navlist a:visited
  33. {
  34. color: #fff;
  35. background-color: #036;
  36. text-decoration: none;
  37. }
  38.  
  39. #navlist a:hover
  40. {
  41. color: #fff;
  42. background-color: #369;
  43. text-decoration: none;
  44. }
  45.  
  46.  
  47.  
  48.  
  49.  
  50. </head>
  51.  
  52.  
  53. <div id="wrapper">
  54.  
  55. <div id="nav">
  56. <ul id="navlist">
  57. <li id="active"><a href="#" id="current">Item one</a></li>
  58. <li><a href="#">Item two</a></li>
  59. <li><a href="#">Item three</a></li>
  60. <li><a href="#">Item four</a></li>
  61. <li><a href="#">Item five</a></li>
  62. </ul>
  63. </div>
  64.  
  65.  
  66. </div>
  67.  
  68.  
  69.  
  70. </body>
  71. </html>

URL: http://css.maxdesign.com.au/index.htm

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.