Creating a Liquid Design

[FatalDesign]

Hey everyone,


I have been using Fireworks to fiddle around with creating wireframes for a while, and I just got my first opportunity to create a website for free for a friend, just to practice making an actual website. I exported it to Dreamweaver, created my hotspots and links and linked the whole page, and then realized that the site did not fit to browser, and was stuck with fixed lengths and widths and could not figure out how to convert it into a liquid design. My question is how I would go about converting my code so that it will expand and contract to the size of any users browser?

Thanks!

[Wickham]

Creating a fluid design that will fit any window resolution can be difficult unless the page doesn't have much content. It will look very squashed up in a small width window like 320px on a hand-held device or very spaced out in a 1920px window. The alternative is to use fixed widths, but using min-width and max-width for the page container which limits the expanding and contracting. Divs inside can have no width and should create their own width for text.

If you want to make a totally fluid page, code all element widths (divs, ul tags, forms, tables, etc.), side margins, side padding and images in % widths totalling 100%. Images coded


<img style="width: 35%;" src="image.jpg" alt="description" />
without a height will have the height adjust in proportion to the width.

Side borders cannot be sized in % so if you have these, make the total of other items 97% or 98% to allow for the side borders in px.

In your case remember that the hot spots will need to be fluid as well to remain in the correct place on a background that is stretching.

When you code a fluid width page, start without any heights as elements will have to expand vertically.