Liquid CSS Layouts - Design Alternative to Table Based Websites

Step 6 - Let's apply liquid design

The only truly fixed element in the layout is the header image. What we will do is create the illusion that it stretches. Take a look at the picture below

Image segment to be used for liquidity

The area selected with a marquee at the extreme right of the image could very well repeat itself to infinity and you wouldn't even know. We will crop that area and save it as a separate image called headerbg.jpg.

Variations

This process differs from case to case. It all depends on the image you work with. Not all images can create the illusion of repetition.

The above method will lead to 'expansion' of the layout for higher resolutions but what about lower resolutions? In our case the picture is 520px wide (short enough for 640x480 resolutions). Should the image be wider, at 640x480 a scrollbar will appear and part of layout will be compromised. A div box can shrink but an image cannot. So what do we do? Read on.

Shrinking an image to fit the resolution

Although this doesn't apply to our specific case there are workarounds to make an image 'shrink' and fit to lower resolutions. In order to make the image appear to be shrinking we will use it as a background of a div box instead of inserting it as a regular image. This box will thus have the ability to shrink and expand at any time. Bear in mind a box can shrink, an image can't. When the box shrinks, part of the image (the one on the right) will be hidden thus avoiding the appearance of a horizontal scroll bar. See how the image behaves when the box has shrunken.

Liquid background image

In light of what we said above we can say that we need to apply both headerbg.jpg as well as the Header image as backgrounds.

Variations

If your header image is not wide enough to compromise the layout at lower resolutions you can simply insert it as normal in the Header div and only work on expanding the box to achieve liquidity.

Both images are required in order to create the proper liquidity. How do we do that? We know that we can't specify two background images for a single box. But what we can do is add an additional box to take one of the backgrounds. Before proceeding we will expand the boxes we have already created.

Liquid CSS layouts tutorial structure





Back to Website Builder Tips: Making A Web Site Accessible


Other Accessible Web Design articles