Complex Table Help

[afrinspray]

I cut-up a photo into parts to use as the navigation on a site. I
can't seem to get the table to look right however:

http://www.michaelscottweber.com/gdc/index.html

Can someone help?

Thanks in advance,
Mike

 

[dorayme]

I cut-up a photo into parts to use as the navigation on a site. I
can't seem to get the table to look right however:

http://www.michaelscottweber.com/gdc/index.html

Can someone help?

Not that this is a great idea these days, ie. to use image slices
but I have used them in the past for mildly complex or arty
banners with links inside. Easiest is to use quality program like
Fireworks to slice up and even generate the table, you can clean
up the code later.

If you want me to help (honestly, how could you resist?), please
supply the original pic whole. Too boring to see get the sizes of
all your slices and study your markup closely. But others may do
so.

You can also use an image map, probably simpler and more
reliable.

Best maybe not to do this at all but to redesign so that either
you use styled html links that still look nice (my
recommendation) or even pics that do not require such precise
slicing.

 

[afrinspray]

Dorayme, thanks for the help. Unfortunately I don't have fireworks.

I do however have the photoshop document that I cut-up. It contains
every single part... you could just make some layers visible and "Save
for web" as needed. Check it out...
http://michaelscottweber.com/gdc/nav_master.psd (65k).

To address the problem a little further...
There's 6 links on the picture. For each link on the picture, there is
a mouseover image that makes the text in that part bold. If I used one
picture with no bolds and 6 others with one bold in each, I wouldn't be
able to keep the current page's link bold (which is a requirement
unfortunately).

So really you end up with every combination of bold images possible
that need to be preloaded if you just use one image that is swapped in
and out. That's why I thought I'd have to cut it up like that...

Also, the words (links) are staggered so you can't make clean cuts for
the table (see the example... here's the link...
http://www.michaelscottweber.com/gdc/index.html).

Thanks for your help so far,
Mike

 

[afrinspray]

Correction: 117k... not that it really matters.

 

[dorayme]

dorayme, thanks for the help. Unfortunately I don't have fireworks.

I do however have the photoshop document that I cut-up. It contains
every single part... you could just make some layers visible and "Save
for web" as needed. Check it out...
http://michaelscottweber.com/gdc/nav_master.psd (65k).

Honestly, I don't recommend all this. But here is your image,
re-sliced by me and exported, it is horrible markup but even
works in Mac IE 5. To get this mess to work to roll things over,
you will need to note the sizes of the slices and arrange your
substitutes and so on for the hovers... I would not bother
frankly.

<http://members.optushome.com.au/droovies/test/slices/tryThisPal.h
tml>

 

[afrinspray]

Hmmm.... well any idea how I could better do this?

 

[John Hosking]

I cut-up a photo into parts to use as the navigation on a site. I
can't seem to get the table to look right however:

http://www.michaelscottweber.com/gdc/index.html

I don't have the answer, but (at least) I've got a question. That ought
to count for *something*. ;-)

How many columns do you think you have in that table? Now look at each
row and count the colspans you specify. I get different answers.

Maybe the browser is doing the best it can with broken arithmetic.

HTH

 

[dorayme]

(e-mail address removed) wrote:

Hmmm.... well any idea how I could better do this?

(top posting fixed... hint, hint...)

Well, why not use an image map? Where such is unavoidable or you
need to link inside a pic, this is simple and you can get the
needed coordinates easily from your Photoshop (which you
mentioned).

Or, if you can, you can re organise. I used to have something
like this for a header:

<http://members.optushome.com.au/droovies/test/pendulumEXbanner/>

and removed all the js and slices and pic of text but kept the
pic (which I had taken the trouble to design) for decorative
static banner and simply made a horizontal navigation html menu
with same links (but scalable text). You might choose a different
path to an HTML treatment. Without knowledge of your whole
website, I cannot say.

As for image maps, well, there are likely all over the place. You
can see the code for such at:

<http://members.optusnet.com.au/~kroiter43/letters/letters9.html>

Each letter is a link. No fancy rollover, but that is fine surely?

 

[afrinspray]

How many columns do you think you have in that table? Now look at each
row and count the colspans you specify. I get different answers.
Maybe the browser is doing the best it can with broken arithmetic.

The table should be 5 rows by 4 columns. I might not understand
rowspan completely, but when you have a td rowspan of 2, the next row
down has one less td, correct?

Well, why not use an image map?

Because for example if I click the catalogue link, the nav link for
catalogue on the catalogue page has to always be bold.... so I have to
break it up, or else I'll have way too many images for each combination
(ie. I'll have to make an image with catalogue and about as bold,
catalogue and contact as bold, catalogue bold by itself, etc..).

Thanks for your help so far guys, I know I'm close. Worse comes to
worse I'll use the link you gave Dorayme. Thanks for that.

Mike

 

[afrinspray]

For future reference, I took the fireworks route, but I did it
manually. At the moment I have 40 images totaling 32k to download.

http://www.michaelscottweber.com/gdc/nav/index.html
http://www.michaelscottweber.com/gdc/nav/nav_master_new.psd
http://www.michaelscottweber.com/gdc/nav/nav_master_new_bold.psd

 

[dorayme]

For future reference, I took the fireworks route, but I did it
manually. At the moment I have 40 images totaling 32k to download.

http://www.michaelscottweber.com/gdc/nav/index.html
http://www.michaelscottweber.com/gdc/nav/nav_master_new.psd
http://www.michaelscottweber.com/gdc/nav/nav_master_new_bold.psd

Best to quote some context... but I recall a few things... You
need to slice things up a bit more meaningfully surely? Part of
the O and gue in catalogue is not a unit worth rolling over
for... but this may be a mere test for you or at last, not
obvious the intent? At least it is a table that has no gaps in as
before.