You have a font-family set on the <body> element that will affect all text unless you specify a different font for particular elements. So you can declare different fonts for your menus (I wasn’t sure which menu you meant). The only caution is that any font you use will only appear if it is installed on the user’s computer, so you need to have good fallbacks.
There are newer methods for specifying fonts, such as using @font-face, but you still need to have permission to send fonts to users. And I don’t think I’d do that for a menu item anyway.
There is no single consistent font technology I would trust to handle that across all browsers/platforms. Custom fonts usually involves fat bloated scripts, use of plugins, and browser specific properities… CSS3 promises to bring that someday, but right now some 50-60% of the browsing public will never see it.
So… My advice is to use images with a image-replacement technique like gilder-levin. You’re using an image for the logo, right? So use images for the menu. Waste of bandwidth and code, but no more so than all those BS scripted font implementation methods and at least it will work across all browsers all the way back to IE 5.x
Thanks again for your help on this. I have booked marked those pages so that I can go back and implement sprites at some point.
For now though I have used a fairly crude Fireworks to dreamweaver button method and then a div class and CSS to move it to the correct location.
I am now looking to solve the problem of the gap between the blue placeholder image I have put in that says “Coming soon” and where the header ends - I have used Magento before and remember running into this problem last time… I just can’t find the right bit of CSS that is causing the big gap, any ideas?
That white space is actually where your navbar div belongs (in the natural flow of the document). You have a negative top margin that pulls it up; but because it has position:relative, the space it would naturally occupy is preserved for it.
SO… Ideally you would structure the page better so that you wouldn’t have to place items like this, such as with floats. I guess you could add position:relative to the following items and pull them upwards as well, but that would make things even messier.
You could use position:absolute instead, and link the nav to another element (by placing it inside the other element and giving that position:relative).