Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Best Way for Nav - Image or CSS?

    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.

  • #2
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    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

    I take no responsibility for the above nonsense.


    Left Justified

  • #3
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    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.
    Omnis mico antequam dominus Spookster!

  • #4
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Regular Coder
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I coded the navigation for Western Technical Institute 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

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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

  • #7
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    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 in Mozilla. (That blank space on the left is where the Nav. should be )

    Damn lazy bank.

    I take no responsibility for the above nonsense.


    Left Justified

  • #8
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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

  • #9
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 (the subtle ALA redesigns just keep on coming), but IMO CSS-only is the only way to go. Didier Hilhorst has a beautiful example at SuperfluousBanter, but it's not as good as it could be. Naturally, Doug Bowman has a great example of CSS menus (part 1, part 2) at ALA.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #10
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts
    So which one is the "best" example to look at?

  • #11
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    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 ).
    Omnis mico antequam dominus Spookster!

  • #12
    Regular Coder
    Join Date
    Jul 2003
    Posts
    601
    Thanks
    17
    Thanked 0 Times in 0 Posts
    me',

    I've looked at the StopDesign example, as well as the Simplebits 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 (the subtle ALA redesigns just keep on coming), but IMO CSS-only is the only way to go. Didier Hilhorst has a beautiful example at SuperfluousBanter, but it's not as good as it could be. Naturally, Doug Bowman has a great example of CSS menus (part 1, part 2) at ALA.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •