...

View Full Version : Best Way for Nav - Image or CSS?



kraftomatic
01-05-2004, 01:51 AM
Hey All,

I've been doing some reading and was looking to see opinions on what the best way is to do an "image-based" navigation.

There's the traditional, Javascript code that handles all the rollovers, links and such, but what about CSS?

I've been looking at this link and it seems like a viable alternative:

http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/


Of course with CSS, there are hacks needed to ensure browser compatibility across the board.

Any thoughts?

Thanks.

mindlessLemming
01-05-2004, 02:28 AM
There is a solution!
But unfortunately, my college's student server is down ATM and I can't get to my links site to find the link for you, nor can I find it on google:mad:.
Anyway, the link is to a site which takes pixy's CSS rollovers, someone elses (can't remember who's..) fixes and hacks for pixy's rollovers and combines it all into a simple, user friendly CSS rollover generator.
And before anyone says "...Generator! That's heracy, I MUST hand code all!..."/pompusVoice, you can just give it a faked image and get the code so you know what/where the hacks go for maximum cross-browser compatibility.

I'll keep trying to get onto the site, and if I can I'll edit this message. Otherwise, click the link in my sig. and go to the CSS section. The link I'm talking about is easy to find.

Andrew

Mhtml
01-05-2004, 03:45 AM
I doubt very much that you will need to use CSS hacks to get a proper navigation system working across all browsers.

As long as you use a list for the menu.

Of course you have the option of css background rollovers or image text replacement either way will work fine in most up to date browsers and degrade well in older browsers.

kraftomatic
01-05-2004, 04:15 AM
Originally posted by Mhtml
I doubt very much that you will need to use CSS hacks to get a proper navigation system working across all browsers.

As long as you use a list for the menu.

Of course you have the option of css background rollovers or image text replacement either way will work fine in most up to date browsers and degrade well in older browsers.

I'm trying! No luck so far. :)

Skyzyx
01-05-2004, 05:27 AM
I coded the navigation for Western Technical Institute (http://www.wti-ep.com) using the Langridge Image Replacement technique. It only uses CSS and Images... no JavaScript. It utilizes the Pixy method... but if I remember correctly, I had to use the Alternate Box Model Hack to get it to work with IE5/Win

rmedek
01-05-2004, 05:55 AM
Along the same lines, we all know it's best to use CSS navigation instead of tables, and CSS for images when possible (i.e. border instead of a 1px image, margin instead of spacer gifs), but are there any huge advantages in using CSS rollovers instead of javascript?

Okay, I know the size is reduced somewhat, but it seems as if all the hacks aren't worth the trouble for now...

-Rich

mindlessLemming
01-05-2004, 06:16 AM
Originally posted by Mhtml
I doubt very much that you will need to use CSS hacks to get a proper navigation system working across all browsers.

Ah yes, but he want's an image based CSS navigation, which of course remains totally accessible to all browsers...which is what Im trying to find, but my damn server is still down:mad:
rmedek The advantage is that when (most) CSS image navs collapse they leave a text replacement as an alternative.

If you wanna see how nicely 'dHTML' degrades, visit
www.westpac.com.au (http://www.westpac.com.au) in Mozilla. (That blank space on the left is where the Nav. should be:confused: )

Damn lazy bank.

rmedek
01-05-2004, 11:15 AM
good point... especially when I noticed my javascript rollovers don't work in Opera. They still link, but without the rollover it's not quite as obvious what they should be doing. Maybe it's time to switch to CSS (or, I guess, start learning Javascript enough to hack it for Opera...).

Give Westpac a break, I mean, it's Australia's first bank. The others have hopefully learned from them... :)

-Rich

me'
01-05-2004, 12:38 PM
Originally posted by rmedek
Along the same lines, we all know it's best to use CSS navigation instead of tables, and CSS for images when possible (i.e. border instead of a 1px image, margin instead of spacer gifs), but are there any huge advantages in using CSS rollovers instead of javascript? One huge one: more people have CSS enabled than have Javascript enabled. We've seen it done with both (http://www.alistapart.com/articles/dropdowns/) (the subtle ALA redesigns just keep on coming), but IMO CSS-only is the only way to go. Didier Hilhorst (http://superfluousbanter.org/archives/000134.php) has a beautiful example at SuperfluousBanter, but it's not as good as it could be. Naturally, Doug Bowman (www.stopdesign.com) has a great example of CSS menus (part 1 (http://www.alistapart.com/articles/slidingdoors/), part 2 (http://www.alistapart.com/articles/slidingdoors2/)) at ALA.

kraftomatic
01-05-2004, 02:45 PM
So which one is the "best" example to look at?

Mhtml
01-05-2004, 04:46 PM
www.westpac.com.au in Mozilla. (That blank space on the left is where the Nav. should be )

Argh, good thing I'm with the Greater Credit Union ;) .. (Just realised you were from Australia when I saw that link :)).

kraftomatic
01-05-2004, 06:15 PM
me',

I've looked at the StopDesign example, as well as the Simplebits (http://www.simplebits.com/archives/2003/09/30/accessible_imagetab_rollovers.html) example and none of them seem to be bulletproof.

The main issue with the Simplebits scenario is the screen flicker in IE. My target audience is IE and NS.

I'm still torn on JS vs. CSS. I was going to go back to an old DHTML drop down menu I had when I saw the CSS-based drop down menu you referred to. I'll take a look at this and see how it shapes up ..

Thanks.



Originally posted by me'
One huge one: more people have CSS enabled than have Javascript enabled. We've seen it done with both (http://www.alistapart.com/articles/dropdowns/) (the subtle ALA redesigns just keep on coming), but IMO CSS-only is the only way to go. Didier Hilhorst (http://superfluousbanter.org/archives/000134.php) has a beautiful example at SuperfluousBanter, but it's not as good as it could be. Naturally, Doug Bowman (www.stopdesign.com) has a great example of CSS menus (part 1 (http://www.alistapart.com/articles/slidingdoors/), part 2 (http://www.alistapart.com/articles/slidingdoors2/)) at ALA.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum