•
•
•
•
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
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.
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 Document */ body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #999999; margin: 0px; } ul { float: left; /*this part will stop it moving when the page scrolls so you may not want to include it*/ position: fixed; margin-left: 20px; } li { width: 150px; height: 15px; margin-top: 3px; border-style: solid; border-width: 1px; border-color: #64acd8; font-weight: bold; font-size: 120%; background-color: #ffffff; list-style: none; padding: 3px; } li:hover { background-color: #faffd8; border-color: #004f7b; } a:link { text-decoration: none; color: #999999; } a:hover { text-decoration: none; color: #333333; } a:visited { text-decoration: none; color: #999999; } a:active { text-decoration: none; color: #FF0000; }
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
•
•
•
•
DaniWeb Marketplace (Sponsored Links)