Hi. I have created a 3 column liquid layout which works brilliantly. So, for instance, my header spreads across the entire width of my browser. Now in the header, I want to place a header image. Normally, this image would spread across the entire width. What do I do with this image in the liquid layout? Do I spread it across the entire width, but that would make a possibility of pixelation. Do I center it? What do people normally do when they are using a liquid layout, and their header is made up from an image?
Depends on the image. Ideally it would be a repeatable background image. If it’s one big non-repeatable image, it might be best to have a background color into which this image merges. Perhaps give more details about what you are dealing with, or show a screen shot.
I actually just set the width of the image to 100%, and on my browser it doesnt look different at all.
I do have another enquiry though. Say I have a three column liquid layout; left, center and right. In the center column I place a table. Now if I want to move the table down a bit, I would using margin-top and give it the amount of pixels. Will this remain the same, or do I need to give it a percentage instead to keep it liquid?
e.g.
margin-top: 5px;
or
margin-top:1%;
Keeping it as pixels would not have any bearing on the positioning of the element would it, because I would imagine a liquid layout uses a percentage for the width (horizontal), but for the height (vertical) it can use pixels?
Yes, if the image is in the html that is an option. It doesn’t work too well in some browsers, like IE7 and under, so be warned. Also, the image will scale vertically as well as horizontally, unless there is a fixed height on the header, which then will cut off the bottom of the image. All things to consider.
I would using margin-top and give it the amount of pixels. Will this remain the same, or do I need to give it a percentage instead to keep it liquid?..
Keeping it as pixels would not have any bearing on the positioning of the element would it…
No, liquidity is horizontal, not vertical, so it doesn’t matter which you use. The difference would be seen if you zoom up the page. A pixel margin will stay the same, while an em margin will scale with other dimensions.
Also remember that percentage margins refer to the width of the containing block even when used for top and bottom margins. The percentage does not refer to the height of the element.