Navbar (New Guy) in HTML/XHTML Posted December 3, 2013 Hello everyone, Im currently in the process of learning html/CSS and starting to work on a webpage for my business. with my knowledge I have only been able to create a very basic navigation bar that looks like this. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Dbuchhorn</title><style> .nav { list-style-type: none; margin: 0 auto; padding: 2px 0; overflow: hidden; width: 1000px; border-top: 3px solid black; border-bottom: 3px solid black; } .nav li { float: left; width: 20%; } .nav li a { display: block; text-align: center; text-decoration: none; color: black; border-right: 3px solid black; font-family: sans-serif; font-weight: bold; } .nav li:last-child a { border-right: none; } .nav li a:hover { background-color: blue; color: white; }</style></head><body><ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">Collections</a></li> <li><a href="#">Media</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li></ul></body></html> I would like to have a far more visually appealing navigation bar similar to the one apple has. http://www.apple.com/ How did they do it? I am able to create the design in photoshop. Just need some info on how to implement it into my webpage. Do I make the hover effect display another image? Obviously I will not make my navbar identical. Any advice would be greatly appreciated.
Navbar (New Guy)
in HTML/XHTML
Posted
Hello everyone, Im currently in the process of learning html/CSS and starting to work on a webpage for my business.
with my knowledge I have only been able to create a very basic navigation bar that looks like this.
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Dbuchhorn</title><style> .nav { list-style-type: none; margin: 0 auto; padding: 2px 0; overflow: hidden; width: 1000px; border-top: 3px solid black; border-bottom: 3px solid black; } .nav li { float: left; width: 20%; } .nav li a { display: block; text-align: center; text-decoration: none; color: black; border-right: 3px solid black; font-family: sans-serif; font-weight: bold; } .nav li:last-child a { border-right: none; } .nav li a:hover { background-color: blue; color: white; }</style></head><body><ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">Collections</a></li> <li><a href="#">Media</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li></ul></body></html>I would like to have a far more visually appealing navigation bar similar to the one apple has.
http://www.apple.com/
How did they do it? I am able to create the design in photoshop. Just need some info on how to implement it into my webpage. Do I make the hover effect display another image?
Obviously I will not make my navbar identical.
Any advice would be greatly appreciated.