kevinb52

Hi Everyone,

I've read through many tutorials that do not explain the info I need.
I've also scanned many forums, and nobody is asking my question.

The ONLY good news about this situation is that since I'm the only one with the question, hopefully everyone else knows the answer and will be so kind as to fill me in.

I'm building a site with a simple layout.
Across the top is an image containing a logo. 800x200
Below it and down the left side is my menu. 250x400
In the 550 remaining pixels to the right, my text.
Very simple.

The issue:
Starting below my menu, going down to the bottom of the page, across to the right side of the text and up to the top image, I'd like to put in a simple shape for artistic value. This simple shape could be anything.
For example, let's say it's a simple 3d pipe.

Using the image slicer for the first time, this is really easy except for one head pounding problem:
How do I make it so the pipe expands and contracts in vertical direction in order to fit pages of varying length?
In my searching nobody has addressed this. My only guess solution is to separate the bottom (horizontal) pipe section from the two vertical sections on each side of the text using the image slicer. From one should make the two vertical sections [backgrounds], so that they will be longer or shorter when need be.

Is there a way to make this happen in photoshop 7 or imageready?
The only possible solution I've been able to dream up is to save the two vertical pipes as "NO IMAGE" on my image slicing, then output to html.
Then I can save those images and manually go into the html and make them the background images for those two sections (again, the areas to the left and right of my main body text, text that varies in length from page to page). That's all I can come up with, but I fear that there is a much easier and professional way to do this that will give me greater power and control when it is needed in the future. Is this the right step?

Please give instruction on how I can make a background image (not color) expand vertically in a photoshop image map to fit around a varying amount of main body text on a web page. If there is a tutorial on this, please tell me where b/c I'm searching even now.

Thanks
Kevin B

aironite

Welcome to the boards Kevin. Can't help with this one. But hang on, there are webmasters in here who would love to help you with this. Me? I.m a pixel pushernot a webman. Still learning the web myself.

For the mean time, enjoy your stay. You'll find the community in here very helpful.

vee

Just wanted to say welcome kevinb52, although I don't have an answer for you problem.

vogonpoet

Hi and welcome

is it poss for you to post a screen shot of your layout? Would make it easier to see what we are dealing with here

cheers

wbiss

Welcome Kevin! You're sure to get your problem solved with the guidance of the web experts here.

gymmie

Welcome, Kevin!

Actually, you're well on your way to solving your problem The key is "table backgrounds." It's actually easy to do, although ImageReady can't do this for you...you need to do it in an html editor to set the image slice as a background. Yes, it would help to see a shot of your layout to get more specific.

BTW, a great tutorial on this is
here. It can be adapted to fit what you're trying to do. It doesn't cover ImageReady slicing, but apparently you already know how to do that [slick]

kevinb52

As requested, I've thrown together a very simple demo of my question.

Using the image slicing in imageready & photoshop, I've created the basic interface as seen at http://www.legaljustice.net/testinterface/index.html

Not much to see graphically, but it will work for my question.

When I add more text to my main area, the borders cannot "grow" to fit the new length requirement:
http://www.legaljustice.net/testinterface/index1.html
As you can see, the interface "blows up"

The only solution I can come up with is to manually change the code to make the left and right bars the needed length, seen at
http://www.legaljustice.net/testinterface/index2.html

At least 2 problems with this "fix":
1. You have to do this for every page, every update - and no chance of any dynamic site content with my method as you have to manually guess the length required.

2. If my "bars" have a texture (like metal gradient for example), the image will be "stretched to fit" and will no longer have the same look as the rest of the static images with the same metal gradient.

How can I set up my interface to expand and contract as needed to fit text of any length? Is there a way to declare an image as a background when using the slicing tools in photoshop? Does this make any sense?

If I'm lacking the code dept, please post the correct code.
I tried using percentages, but have been unsuccessful so far.

Thanks

kevinb52

The limitations in this method deeply conflicts with the layout of the site I want to build.

Here's an illustration with the main problem:

If the box is standard length, shading, gradients, and so on look great:
http://www.legaljustice.net/testinterface/metal.html

Recoding and making it a background is perfect:
http://www.legaljustice.net/testinterface/metal1.html


But: If the box is short, you can see where it is "squashed" - looks bad:
http://www.legaljustice.net/testinterface/metal2.html

And, if hte box is long, it really really looks bad:
http://www.legaljustice.net/testinterface/metal3.html

This means to me that I can't have a cool metal effect down the sides of my pages... at least not with any lighting effects. Is this correct?
There is no way to do this using better code or a different photoshop method?

Thanks

vogonpoet

ok, based on what I see, I would make this particular layout using frames.

I would make the left,top, bottom frame locked (as in non resizable, non scrollable) and let the middle right frame be scrollable for content.

IR doesnt do frames so you will have to achieve those using a notepad or a html editor.

Thats the way I would tackle this layout.

kevinb52

You're right - frames would allow the image to stay static - then just scroll down the page. Good idea!

I personally am trying to get way from using frames except when there is no alternative.
It has given me problems with people trying to bookmark my pages, plus it makes it more difficult to be listed properly in search engines.

Does anyone have other input?

Thanks