PDA

View Full Version : DW CS3 adjacent hot spots cause images to unalign


toaglass
01-26-2010, 04:40 AM
I'm trying to have a navigation area with 4 hot spots on 4 adjacent images.
They're supposed to be aligned like the folder tabs here: http://toaglass.com/worksinprogress.html

But when I add the hotspots to each of the four images that make the tabs, this happens: http://toaglass.com/designing.html

Any ideas why this might happen?

If you have any other ideas for how to set up a sub-navigation area like this, I'm open since this is only my fourth or fifth website I've worked on.

Thanks!

gentleone
01-26-2010, 09:20 AM
If you don't set up your navigation properly with an unordered list then you run into problems like this.

Check out this CSS tabs article from Hongkiat... you might find a nice one that you can implement on your site and use your own images.

http://www.hongkiat.com/blog/50-nice-clean-css-tab-based-navigation-scripts/

toaglass
01-26-2010, 10:17 AM
Thanks for the link -- I'm sure something there will work for me.

I remember doing an unordered list in one of my other websites, but I was following a tutorial that merely told me to do it without telling me WHY. I guess that's why I neglected to set it up that way this time.

But having looked at your link now, would it be better to set up a group of three or four tabs using Ajax to avoid reloading the page, or is it better for SEO to have separate pages that link to each other?

Corrosive
01-26-2010, 12:50 PM
It's generally better to have individual pages that are linked together IMO

gentleone
01-26-2010, 03:05 PM
It's generally better to have individual pages that are linked together IMO

I agree with Corrosive. SEO-wise its always better to use individual pages with their own unique url's. I know... AJAX is a cool thing, but make sure you use it only for parts in your website that are not so SE important to you. For example an image gallery.

Corrosive
01-26-2010, 05:20 PM
In my early days I tried to build entire sites with the show/hide layer behaviours and then with nothing but a js accordion. Both were absolute disasters!

toaglass
01-26-2010, 08:25 PM
This tabbed interface (found it on the list gentleone provided) has a separate url AND it doesn't seem to need to reload the page.

http://www.ndoherty.biz/demos/coda-slider/2.0/

Am I missing something or is this the best of both worlds with the nice animation AND the separate url?

gentleone
01-26-2010, 08:46 PM
This tabbed interface (found it on the list gentleone provided) has a separate url AND it doesn't seem to need to reload the page.

http://www.ndoherty.biz/demos/coda-slider/2.0/

Am I missing something or is this the best of both worlds with the nice animation AND the separate url?

SEO-wise, no good! The url stays the same except that you see #1 and #2 and so on if you click on a tab, but this is because the href of the links has this value. It means that it is a sort of 'nogo' link. The rel="" attribute triggers the slide.

The reason why there is no refresh is because all the tab content is on the page itself, but due to the property overflow:hidden you only see the content from tab 1.

SE's will crawl the whole content, but imagine if someone finds through a search result a piece of content from lets say tab 3 then he comes on your page, but this will open of course with the content from tab 1.... so visitor is lost and can't find the content that he was looking for.... click... and gone he is.

Corrosive
01-27-2010, 07:22 AM
Through risk of repeating myself. It was a bad idea yesterday and it is a bad idea today. It's up to you though. Your site :)

Corrosive
01-27-2010, 10:08 AM
click... and gone he is.

http://www.guidedbyyoda.com/images/yoda_in_swamp.jpg

gentleone
01-27-2010, 10:26 AM
http://www.guidedbyyoda.com/images/yoda_in_swamp.jpg

:mrgreen: :mrgreen: :mrgreen: