What's new
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

creating 1st inferface - advice pls on page length compatibi


kevinb52

Member
Messages
12
Likes
0
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
 

dv8_fx

Retired Administrator
Messages
13,761
Likes
4,789
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
 
G

Guest

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

vogonpoet

Well-Known Member
Messages
98
Likes
0
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

Guru
Messages
2,313
Likes
7
Welcome Kevin! You're sure to get your problem solved with the guidance of the web experts here. :)
 

AppleCider

Power User
Messages
400
Likes
2
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

Member
Messages
12
Likes
0
more detail to question above

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

Member
Messages
12
Likes
0
here's the problem

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

Well-Known Member
Messages
98
Likes
0
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

Member
Messages
12
Likes
0
thanks for the frames idea

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
 

sfm

Guru
Messages
1,163
Likes
4
Hi ya Kevinb52
I deal with this same problem every day of my life and know what you are going through I will do some screen shots for you of how I work around this problem as I never ever ever ever use frames :rofl: :rofl: :rofl: not even when I have to - I would rather spend days of pulling out my hair than resort to frames.

The answer is tables as someone said (AppleCider) but not as backgrounds as you found out very quickly that it tiles.......... now if you do want it as a background you will have to tell the background no tile in your code if you need the codes on anything let me know

this would certainly be the fast and easy answer but what if you wanted the side image to be buttons and have some sort of effect?

then this would be tables and I will in a minute do some screen shots for you.

the next option is to have the image is as - say your metal template but where you have the text make that section only scroll......... this can be done in tables too ......... I have a page up that I was messing around with that shows this and if you save the page and look at the html in there it will give you the code for it, this will mean the viewers will scroll the text take a look at it to see what I mean......... http://mystyles.topcities.com/trees.html

I will do the screen shots in a mo just need more coffee first to wake up :rofl: :rofl:
I hope some of this makes sence and helps
sfm
 

sfm

Guru
Messages
1,163
Likes
4
I saved your metal page so that I could see what you had done.........

this is an easy one to fix............. as you have nothing going across in the text area (it is just white) you only need to set the side image put this code in next to your image and it will stay to the left of the table and to the top of the table ..............
<TD align="left" valign="top">

that is step 1.......... step 2 is coming up
sfm
 

sfm

Guru
Messages
1,163
Likes
4
step 2 is to make the image on the side to the end as I have shown below so that you have the whole side until it changes to the thin bar
step 3 next.......
sfm
 

sfm

Guru
Messages
1,163
Likes
4
step 3 is to change the metal_07 image to a "tileable" image so you have to chop it as I have shown

with step 4 to change the metal_08 image as one long thin image at the bottom with the <TD align="left" valign="top"> before the image in your html code

what this will do is keep the side image up the top to join the top image with out any splitting apart then the small thin bar will tile as a background so that you can type away and have the bottom image joined to the side image
problem solved! whew he he he
sfm
 

sfm

Guru
Messages
1,163
Likes
4
VP if the reason you are sad (and don't be - please [oops] ) is because I don't use frames then I will tell you why.......... I don't use them as they inhibit the search engines, pages are spidered and for some reason they don't get on well with frames (perhaps it confuses them? [stuned] )
frames have just, well, caused me a lot of problems and it has just become one of those things that turned into a .............. I'm never going to drink again except I changed drink for use kind of situation, they have caused me more grief than I can cope with [confused]
sorry if I upset you didn't mean to and I wont do it again promise [sleepy]
sfm
 

sfm

Guru
Messages
1,163
Likes
4
Sorry I should have added that not using frames is a personal choice that is all.

I feel terrible now :(

Sorry
sfm
 

sfm

Guru
Messages
1,163
Likes
4
thanks VP and I am truly with sugar on top sorry he he he
sfm
 

Top