Monday, February 26, 2007

Making a Dynamically resizable Form - secrets


Let's say you have a form like the one in the image on the left. You've just created this form in your favorite picture editor and you wish to add content in it. But, you find that you have more than 1 problem: the picture you've created is too little or too big for the place you want to add it into your web page, and the content is going to change so if you have more content, you will be forced to make the font smaller so the picture will be just 1 and not 1 and 1/2 :).

So, what do you do?

You cut your picture into small parts. so that it will dynamically change according to the content. So..if you have 3 pages of content, your "picture" will be 3 pages in height and if you want to make the picture wider, no problem, same thing :).
In order to better understand how the above picture is supposed to be cut, I will show you another picture:
The areas marked with green are the areas that are supposed to be cut and transformed into separate pictures. You have to use tables for this procedure. each picture will be a new table. the margins(corners) on the left, right(both up and down margins) are supposed to be fixed in size.(fixed width and height) the middle left, right, up and down are supposed to be 1 pixel wide(for up and down) and 1 pixel in height (for left and right). If you do this, you will have great borders, exactly like your picture.

Why?

Because the left, right, up and down bars are made out of 1 small picture. if you set that picture the sizes mentioned above, if you add content, no matter how much, the picture will automatically resize...... the picture repeats itself.

You still haven't finished. The center must be a picture 1 pixel in width and height that is created from the middle of the original picture.

If it's still not clear, comment and I will answer your questions.
In a later post, I promise a PHP function that automatically does everything needed to be done in HTML coding.... that's mentioned above. You will still have to cut your picture :).

Cy21

1 comment:

sogard, the guardian between the relams said...

Your blog is very interested, right now I am learning PHP and this blog may prove to be really usefully.
Also I have some big plans to make a tweaked website based on drupal and I am still working on some stuff.
Maybe if I will have trouble you can give me some advice.