User Name Password Register
DaniWeb IT Discussion Community
All
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 331,472 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 4,082 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Jan 1st, 2007
Views: 3,202
This piece of css will show you that it is perfectly possibly to create a good looking navigation bar without any images or javascript and just a couple of lines of css.

All you need to do is create a html file that contains a unordered list in it with your navigation links in it as <li>. You will then need to simply attach the css file to your html.

I hope this will help you to realise that it isn't all about huge flash navigation and rollover images.

You can find my example here.
css Syntax | 5 stars
  1. /* CSS Document */
  2.  
  3. body {
  4. font-family: Arial, Helvetica, sans-serif;
  5. font-size: 12px;
  6. color: #999999;
  7. margin: 0px;
  8. }
  9.  
  10. ul {
  11. float: left;
  12. /*this part will stop it moving when the page scrolls so you may not want to include it*/
  13.  
  14. position: fixed;
  15. margin-left: 20px;
  16. }
  17.  
  18. li {
  19. width: 150px;
  20. height: 15px;
  21. margin-top: 3px;
  22. border-style: solid;
  23. border-width: 1px;
  24. border-color: #64acd8;
  25. font-weight: bold;
  26. font-size: 120%;
  27. background-color: #ffffff;
  28. list-style: none;
  29. padding: 3px;
  30. }
  31. li:hover {
  32. background-color: #faffd8;
  33. border-color: #004f7b;
  34. }
  35.  
  36. a:link {
  37. text-decoration: none;
  38. color: #999999;
  39. }
  40. a:hover {
  41. text-decoration: none;
  42. color: #333333;
  43. }
  44. a:visited {
  45. text-decoration: none;
  46. color: #999999;
  47. }
  48.  
  49. a:active {
  50. text-decoration: none;
  51. color: #FF0000;
  52. }
Comments (Newest First)
Pim | Junior Poster in Training | Feb 22nd, 2008
Very nice. The only thing is that the a:hover colour doesn't work in combination with the colour of the list.
Post Comment

Only community members can submit or comment on code snippets. You must register or log in to contribute.

DaniWeb Marketplace (Sponsored Links)
All times are GMT -4. The time now is 8:37 am.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC