Advanced Search

Centered Horzontial Navigation

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

Expand | Embed | Plain Text

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