Of Tables and Imageready...

Hornet · 02-03-2004

This doesn't quite fit into the category of "Photoshop", but it is to do with Imageready. Basically, how do you slice an interface so that it can easily be defined as tables, without everything in the middle sliding around everywhere?

Okay, that doesn't make sense... Basically, I've been asked to create an interface that has a panel of links in the left hand side, and the panel MUST stay still when the interface has content added to it. The right hand side has a ShoutBox, and I'm having similar problems making that stay put. It looks a bit like the attached sketch (Normal) when it's got very little in it. It then looks like the second sketch (called Wibble) when it's got content in it.

The red line is where I tried to stop it inflation by adding a table, but it will then cause problems unless whoever edits the page only put X number of lines in the top cell, which isn't ideal. I then tried to solve it by turning every image bar the shoutbox and button panel into cell backgrounds, but then the panel and it's buttons ended up split into slices all down the page! Finally, I tried putting the four different parts of the page into their own tables, in order to try and stop everything expanding when the middle cell was changed, but that caused a gap to appear between the four sections!

What can I do, either in ImageReady or the HTML side of things, to stop this happening?

**Man1c M0g** · 02-03-2004

I understand exactly what you are going through here. Part of the main problem is that you set imageready to cut the whole lot up at once, so its created a source HTML file that tries to maintain the aspect ratio of all the individual components. You *can* reverse this by looking at the html and manually editing all the dimensions, making sure that it uses as few relational % heights/widths as possible, OR you can go for the more sensible option and cut it a little differently. By this, I mean that you should cut in terms of bulk sections (i.e. side, mainbit, header, etc), and then cut AGAIN for the mini-sections in these bulk sections and add them in individually (i.e. the shoutbox, navigation buttons, etc).

Its a little hard to explain, so please tell me if you are confused and i'll create a little diagram or something...

Hornet · 02-05-2004

I think I know what you mean - I'll try it later and see what happens. I also tried removing all relative heights (that was the first thing I did!) and aligning _everything_ to top the of its cell, but to no avail. Cheers Mog.

**Man1c M0g** · 02-08-2004

Well, if it doesnt work, often the best way is to deconstruct the entire thing into its main sections and rebuild it by hand. Long-winded but, hey, it works!

Hornet · 02-08-2004

Quote:

Originally Posted by Man1c M0g

Well, if it doesnt work, often the best way is to deconstruct the entire thing into its main sections and rebuild it by hand. Long-winded but, hey, it works!

I've tried that, but it still tries to resize the table regardless, even when the buttons are in a cell with absolute heights! I'm starting to despair.

Hornet · 03-02-2004

That still didn't solve the problem, by the way. I tried seperating the areas (in four different ways - I even tried adding three completely new tables), the best of which caused a small gap to appear between every single blasted image on the page, and I haven't the faintest idea why. And the worst made the page look as if someone had dropped a bomb in the midst of the graphics.

I'm currently in the midst of creating another site (the previous one is on pause until I can solve the aforementioned problem), and I've been asked to make the navigation bar look like the tabs of a folder, so that the active tab is always on top. The graphics aren't a problem, but is there an easy way to do this from the HTML point of view , or will I have to make each page seperately? And from the ImageReady point of view, how can I move the active tab image (contained in a layer) to the top without affecting the rest of the rollover states?

Hornet · 03-03-2004

Is there any danger of getting a reply?

ConceptualMind · 03-10-2004

About making the tabs colored you can probably use CSS. You could do something like http://www.evdawg.com but on a smaller scale. It won't change the color of the entire layout.

Sorry for the lack of replies. This is an older thread and I thought the question was solved.

Hornet · 03-10-2004

Yay - a reply! Thanks for the link, but it doesn't quite solve the problem, although that's the only decent page I've ever seen that doesn't use images.

I need to make the graphics change so that the tab for the active page is on the top of the others, which means changing the graphics around, as the tabs overlap slightly. I could do it by saving the page multiple times, tweaking them as required and then hybridising them, but I'm certain there must be a better way to do it.

I still need to solve the tables problem that I had to start with (see the first post), and that's becoming fairly urgent now.

Evdawg · 03-13-2004

Dude, i wish so much I could help, but i can't.

neglected thread of the month, indeed!