This is a liquid page

This is an example of a liquid page made from a Dreamweaver ready-made page. This is the most basic liquid page offered. You can also have liquid pages with header and footer and left or right side bars.

To get a simple liquid page:

File → new → blank page → 1 column liquid, centered

This is what liquid does:

When the site visitor resizes the page the text line length changes to fit the width.

The width here is set to 80% (of browser width, in CSS, div#container → box, and also positioning)

I have made these changes to the layout:

added * formatting before body and, in Box, set padding and margins to 0. This also sets paragraphs on the next line, i.e without double-spacing the line.

Below are some examples of adding div tags, AP tags and tables to a liquid page. Scroll down to see the different examples.

This is an added Div Tag with a border so you can see it. Notice how it changes as you re-size the page

Div tag with an image in it.

The image does not resize with the page

lion photograph

This is an AP Div Tag with a blue background, width 600 pixels

It does not re-size with the page

This is an AP Div Tag formatted in Positioning as absolute, with width 75%. It re-sizes with the page.

this is a table	A table does not resize with the page unless you set its width to a % as I have done here. You can do this in the Properties Inspector bar.
cell in table <td>	cell
across is a row <tr>	part of same row

home | dictionary | instructions pages | back to top