Re: [WSG] Image replacement menu that works with images off
I thought I'd post back to let you know what I came up with. It turned out that I was able to use Thierry's solution (http://www.tjkdesign.com/articles/tip.asp). Result can be seen here http://geekministry.com/yeah/index.php If I'm using a BR before the text it is because of IE that shows tiny icons when images are turned off. Have a great weekend Kim John Faulds skrev: I wrote an article about styling a horizontal nav with the IR technique I mentioned previously: http://www.tyssendesign.com.au/articles/css/single-image-replacement-rollovers-with-suckerfish-dropdowns/ It also includes a bit on how to combine it with Suckerfish Dropdowns, but the first part should relate to what you want. On Wed, 27 Sep 2006 08:15:36 +1000, Kim Kruse [EMAIL PROTECTED] wrote: Hi, Maybe I should extend my question a bit. Here on this page http://geekministry.com/yeah/index.php I'm currently using Dan Cederholm/Pixi's solution http://www.simplebits.com/notebook/2003/09/30/accessible_imagetab_rollovers.html which works very well with images on. The obvious problem is with images off. Is using a list the best way for a navigation? The reason I ask I because is because I want to follow best practice (at my level out in the fine art of doing web sites) and I think that using a list and css images (separating structure from presentation et al) must be better than using real nav buttons or shims/spacer gifs with alt texts... right? The thing I can't get my head around is how to have different size nav items without creating 4 css rules for each nav item. (similar to example 4 in this article http://tjkdesign.com/articles/tip.asp) but that would also require me to use a div for each nav item... right? I've probably been thinking so much over this problem that I might be overlooking a real simple solution. Thank you Kim John Faulds skrev: snip It should be pointed out that this method has problems when you resize the text (unless you've since found a way to fix that Mike). My recommendation would be: http://www.ryznardesign.com/web_coding/image_replacement/index.html --Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** --Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Image replacement menu that works with images off
On 9/26/06, Kim Kruse [EMAIL PROTECTED] wrote: Hi, I'm looking for a good solid img replacement menu that works well with images off. Suggestions welcome. Thanks Kim For want of more information, I'll give you the best answer I can: img src=menu_item_1.png alt=Item description for images off -- -- Christian Montoya christianmontoya.com ... portfolio.christianmontoya.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Image replacement menu that works with images off
Kim Kruse wrote: I'm looking for a good solid img replacement menu that works well with images off. Hello Kim, You might want to check out this technique [1]. It gives a masthead-type image as an example, but it could be easily adapted to a menu. I've just recently started playing around with it and put it to use for the first time on a site I just made [2]. It *seems* to be a pretty solid technique and it does away with the empty span which is common to all my other sites that use IR. [1] http://neal.venditto.org/articles/12/bir [2] http://myrnamunroe.org/ Hope this is useful. Respectfully, Mike Cherim http://green-beast.com/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Image replacement menu that works with images off
Hi, I'm looking for a good solid img replacement menu that works well with images off. Suggestions welcome. Thanks Kim *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Image replacement menu that works with images off
Hi, Maybe I should extend my question a bit. Here on this page http://geekministry.com/yeah/index.php I'm currently using Dan Cederholm/Pixi's solution http://www.simplebits.com/notebook/2003/09/30/accessible_imagetab_rollovers.html which works very well with images on. The obvious problem is with images off. Is using a list the best way for a navigation? The reason I ask I because is because I want to follow best practice (at my level out in the fine art of doing web sites) and I think that using a list and css images (separating structure from presentation et al) must be better than using real nav buttons or shims/spacer gifs with alt texts... right? The thing I can't get my head around is how to have different size nav items without creating 4 css rules for each nav item. (similar to example 4 in this article http://tjkdesign.com/articles/tip.asp) but that would also require me to use a div for each nav item... right? I've probably been thinking so much over this problem that I might be overlooking a real simple solution. Thank you Kim John Faulds skrev: [1] http://neal.venditto.org/articles/12/bir It should be pointed out that this method has problems when you resize the text (unless you've since found a way to fix that Mike). My recommendation would be: http://www.ryznardesign.com/web_coding/image_replacement/index.html --Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Image replacement menu that works with images off
John Faulds wrote:
It should be pointed out that this method has
problems when you resize the text (unless
you've since found a way to fix that Mike).
I did, John, as seen on the site I just used it on: http://myrnamunroe.org/.
Basically what I did is 1) allowed lots of room for growth and 2) applied
overflow:hidden to the container:
#header {
width : 100%;
height : 200px;
overflow : hidden;
}
It can get obscenely big now without spilling out of the box.
Mike
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Image replacement menu that works with images off
Maybe I'm missing something but you've got an image in your HTML. That's
not really an image replacement method in that case.
On Wed, 27 Sep 2006 08:17:03 +1000, Mike at Green-Beast.com
[EMAIL PROTECTED] wrote:
John Faulds wrote:
It should be pointed out that this method has
problems when you resize the text (unless
you've since found a way to fix that Mike).
I did, John, as seen on the site I just used it on:
http://myrnamunroe.org/.
Basically what I did is 1) allowed lots of room for growth and 2) applied
overflow:hidden to the container:
#header {
width : 100%;
height : 200px;
overflow : hidden;
}
It can get obscenely big now without spilling out of the box.
Mike
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Tyssen Design
Web print design services
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Image replacement menu that works with images off
I wrote an article about styling a horizontal nav with the IR technique I mentioned previously: http://www.tyssendesign.com.au/articles/css/single-image-replacement-rollovers-with-suckerfish-dropdowns/ It also includes a bit on how to combine it with Suckerfish Dropdowns, but the first part should relate to what you want. On Wed, 27 Sep 2006 08:15:36 +1000, Kim Kruse [EMAIL PROTECTED] wrote: Hi, Maybe I should extend my question a bit. Here on this page http://geekministry.com/yeah/index.php I'm currently using Dan Cederholm/Pixi's solution http://www.simplebits.com/notebook/2003/09/30/accessible_imagetab_rollovers.html which works very well with images on. The obvious problem is with images off. Is using a list the best way for a navigation? The reason I ask I because is because I want to follow best practice (at my level out in the fine art of doing web sites) and I think that using a list and css images (separating structure from presentation et al) must be better than using real nav buttons or shims/spacer gifs with alt texts... right? The thing I can't get my head around is how to have different size nav items without creating 4 css rules for each nav item. (similar to example 4 in this article http://tjkdesign.com/articles/tip.asp) but that would also require me to use a div for each nav item... right? I've probably been thinking so much over this problem that I might be overlooking a real simple solution. Thank you Kim John Faulds skrev: snip It should be pointed out that this method has problems when you resize the text (unless you've since found a way to fix that Mike). My recommendation would be: http://www.ryznardesign.com/web_coding/image_replacement/index.html --Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Image replacement menu that works with images off
Hi Mike, Sorry, I've had a closer look now and see how you've done it. My only problem with that method would be that you've needed to apply overflow: hidden to a block level element above the block level element that holds the anchor and span. This is probably OK for something like a header where you'd probably have a h1 contained within a #header anyway, but if you want to image replace a navigation list, you'd have to add additional elements (as well as the span) to each list item to hide the overflow. On Wed, 27 Sep 2006 09:25:10 +1000, Mike at Green-Beast.com [EMAIL PROTECTED] wrote: John Faulds wrote: Maybe I'm missing something but you've got an image in your HTML. That's not really an image replacement method in that case. But it is, though. The embedded image is there for another reason and it's not the same image: It's my pre-loading [1] technique, John; it's the hover/focus image. Granted, you might be thinking if I'm going to do that I could very well just place the embedded image and apply alt text in the alt attribute, and that would make sense, but then I'd lose the hover/focus effect on the inside pages (unless I applied the effect using onmouseover/onfocus with JavaScript). [Plus every thing above the #header div is in a single include file.] I preload it that way; it's offset outside the viewport. If you compare the two images you note the subtle style differences. I do it as a courtesy and performace enhancement to those with slower connections. It's not needed on the home page, but it gets it in the cache ahead of time for the inside pages. I am trying to avoid that flicker so often associated with IR methods. And it doesn't affect resizing of the content. It'll create a horizonatal scroll bar if styles are off, but no scrolling is needed so I can live with that. I hope that makes sense. [1] http://green-beast.com/blog/?p=118 Respectfully, Mike Cherim *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
