Stretch your pages now!

How to design stretchy pages?

Stretchy pages do have a leaner and less complex design than non stretchy ones. If you need to put a gap between copy and a graphic you use a percentage of 1 in this table cell. Depending on the resolution and the size of the window , this can be from 6 up to 20 pixels.

Consider a design now, that has vertical black lines in it. Without using browser-custom cascading stylesheets, you'll have to add a 1 percent table cell with an embedded table, that has a defined width of 1 pixel and background color. Stretching a 1 pixel graphic will not do.

Some things in the design should be avoided

• Using 1 pixel lines around tables that need to stretch the whole document.
• Using sliced graphics that have to be next to another without any gap in between, unless the whole row is graphics.

Let's consider the following:

You have a logo and five buttons to display. on a stretchy page, you have the following options:

1. Make a table where the logo is to the left and the buttons are in a fixed table to the right of the screen.
2. Put the logo and the buttons in a fixed table and center that one.
3. Put the 6 elements in cells with gaps in between, so that the gaps spread out according to the window size.

All in all layouts should be a lot more flexible than fixed ones. Define parts of the page that can be covered only by using background colour, these will be the stretchy ones.

Now, what about the HTML?

Table of contents:

What are "stretchy" pages?
The advantages of stretchy pages
Problems with stretchy pages
How to make stretchy pages
How to design stretchy pages?
What does it mean for HTML Programming?
Are stretchy pages heavier than non stretchy ones?

Powered by EasyCMS

All content © onlinetools.org, see disclaimer for details.