Day
-
Posts
53 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by Day
-
-
I haven't bothered to look at apple's nav bar code, but there are multiples options when it comes to making aesthetic nav. Assuming your customer's demographic isn't using old browsers, you could get creative with CSS3 gradient, border-radius, shadow, and other properties. Or if you already have a design in Photoshop, an easier solution would be image sprites.
what you'll want to do is make one image that contains your static and hover/focus states. As well as an active state if you plan on having one, which apple does.
Here is an example made in photoshop:
In this example, each section is 40px high, so you would set your links to 40px high. I liked to do this using the line-height property. Then you set the sprite as the background for your links. It would only show the top 40px as your link is only 40px high. Then you just use the background-position property to change which part of the background is showing on :hover and :active.
Here is an example using your code with some changes:
http://www.ryangoree.com/menuHelp/
and here is the code:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Dbuchhorn</title><style> .nav { list-style-type: none; margin: 0 auto; overflow: hidden; width: 750px; /* added */ border-radius: 5px; padding: 0; /**/ } .nav li { float: left; } .nav li a { display: block; text-align: center; text-decoration: none; color: white; font-family: sans-serif; /* added */ background: url('media/navSprite.png'); font-size: 14px; text-shadow: 1px 1px #000; line-height: 40px; width: 150px; /**/ } .nav li a:hover, .nav li a:focus { /* added focus psuedo so the affect occurs when using a keyboard only has well */ background-color: blue; color: white; /* added */ background-position: 0 -40px; } .nav li a:active { background-position: 0 -80px; }</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 hope this helps... Your more than welcome to use this code if you'd like. Just replace the image with your own.
Ryan
-
I agree with newseed. I will usually use about 2-3 style sheets in my own sites. Usually they will be something like global.css, detailPage.css, and some other style sheet I've gotten from a plugin. I do it so my global style sheet is lighter and easier to read. The secondary style sheet is usually one that applies to a layout preserved for certain types of pages.
However, I work for a huge corporation as a designer and front-end developer and it is twice as easy for me to request an "exception" style sheet be uploaded for a project I'm working on than it is for me to request modifications to an existing style sheet. This results in an abundance of style sheets like you've probably seen.
Navbar (New Guy)
in HTML/XHTML
Posted
Meant to also explain that whenever using images for backgrounds, I would use sprites. Which is just one image with all states included. Using separate images will sometimes result in a split second where your element has no background when you hover over it for the first time because it has to load the separate image at the time that you hover over it.