Navigation Bar help

Hi All,

Sorry if this has been repeated before.

I was just wondering whether someone/some people could provide insight into what would be the best method for me to change the font in my navigation bar to the same font used in my logo.

www.slippcases.com

The font used is ‘Futura LT’.

I would be really interested to hear any comments that might help improve the aesthetic appeal of my navigation bar/fonts.

Thanks for all your help in advance.

Tom :slight_smile:

I’m not sure how that script works, but I hope it’s not encouraging people to breach font copyrights.

um dude u can download fonts for free lol and its legal, just liscenced

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.

oh i kno what u mean, u want a custom font, i use that in my site tho u need javascript

I suggest you dont use it if ur only using the font for the menu

but here it is anyway: http://typeface.neocracy.org/

Fair enough, but many fonts are not allowed to be used like that. Looks like Futura LT is free though.

With that script, what happens if JS is disabled?

i guess u see the default then

Hi Ralph and GameInfinity,

Thank you so much for your replies and help.

I might have a go at the typeface javascript plugin. If that doesn’t work though what other fonts can you recommend that the majority of people will be able to see? Im guessing stuff like arial, times new roman etc.

Thanks,

Tom

lol it does work, in anycase u can still use images for the nav bar

There are lots more options than those. When you specify fonts, you choose your favorites and then provide a list of fallback options. E.g.

font-family:"Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;

Any machine that doesn’t have Lucida Grande or Trebuchet will use Helvetica, or Arial if Helvetica isn’t available.

Here are some links to font-stack options:
http://www.codestyle.org/css/font-family/BuildBetterCSSFontStacks.shtml

http://www.apaddedcell.com/web-fonts

http://www.sitepoint.com/newsletter/viewissue.php?id=5&issue=56
(see the Which fonts are Web Safe section)

Hi Ralph and GameInfiniti,

Thanks for all your replies.

I am still struggling quite a lot to get this right, I just want the font to match that of the Logo ‘Futura LT’.

When I change the font stack to showcase Futura LT first for some reason the font goes very stretched and looks really wide, do you either of you have a solution for this?

Thanks

Tom :slight_smile:

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

Of course that you are already up to 333k of javascript and 52k of CSS on a page that doesn’t even have CONTENT yet, you’re probably not as concerned about excess scripting as I am given your empty page in the link is over three times the upper limit I allow for a single page with CONTENT, and five to six times my comfort zone. You might want to do yourself a huge favor and rip out all those bloated rubbish libraries that aren’t doing a single useful thing for you. Lands sake you’ve got 8k of markup and you don’t even have content plugged into it.

dont be so harsh on the guy but its kinda true

damn this looks scary

<link rel=“stylesheet” type=“text/css” href=“http://www.slippcases.com/skin/frontend/base/default/css/widgets.css” media=“all” />
<link rel=“stylesheet” type=“text/css” href=“http://www.slippcases.com/skin/frontend/default/blank/css/styles.css” media=“all” />
<link rel=“stylesheet” type=“text/css” href=“http://www.slippcases.com/skin/frontend/default/blank/css/print.css” media=“print” />
<script type=“text/javascript” src=“http://www.slippcases.com/js/prototype/prototype.js”></script>
<script type=“text/javascript” src=“http://www.slippcases.com/js/prototype/validation.js”></script>
<script type=“text/javascript” src=“http://www.slippcases.com/js/scriptaculous/builder.js”></script>
<script type=“text/javascript” src=“http://www.slippcases.com/js/scriptaculous/effects.js”></script>
<script type=“text/javascript” src=“http://www.slippcases.com/js/scriptaculous/dragdrop.js”></script>
<script type=“text/javascript” src=“http://www.slippcases.com/js/scriptaculous/controls.js”></script>
<script type=“text/javascript” src=“http://www.slippcases.com/js/scriptaculous/slider.js”></script>
<script type=“text/javascript” src=“http://www.slippcases.com/js/varien/js.js”></script>
<script type=“text/javascript” src=“http://www.slippcases.com/js/varien/form.js”></script>
<script type=“text/javascript” src=“http://www.slippcases.com/js/varien/menu.js”></script>
<script type=“text/javascript” src=“http://www.slippcases.com/js/mage/translate.js”></script>
<script type=“text/javascript” src=“http://www.slippcases.com/js/mage/cookies.js”></script>

Lol it is scary - all of those javascript parts come as default installation of Magento.

I think I will go for the image based nav bar as suggested by deathshadow60.

Does any one know the CSS I would have to use to add hover effects to the images?

Thanks

The best way is to use “CSS Sprites”—in other words, a single background image that shifts position on hover. Here are some descriptions of how it’s done:

http://www.alistapart.com/articles/sprites

Hi Ralph,

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?

Thanks so much for your help.

Tom :slight_smile:

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).

oh yea, css sprites, but i dont supposed they dont work very well in IE do they?

Hi Ralph,

To change the normal flow of things and remove that white space would I have to go back to the HTML and recode what was already there or is it to do with the order of the CSS?

Also how can I link the navigation bar to another element?

Sorry for all the questions.

Thanks again,

Tom

They work just fine in IE. No problems at all.