1. Invincible Header Picture

Do you want your header picture span up filling the entire top space when the webpage was viewed in a 1680*1050 resolution monitor, and generate no scroll bar as we resize it into a mobile phone monitor size? If yes, note the following 2 methods.

1) Long long header picture

We can simply generate a long, long picture, as long as you wish. Then put it in the header space of your webpage. You can see, it easily fills up the whole length. But wait, down the windows there is something you'll never want to see: horizontal scrollbar. How to eliminate it?

After hours searching, I discovered the trick: please the header picture in a division, then put script style="width=100%; overflow:hidden". Then you'll find the horizontal scrollbar has disappeared!

See here for example.

2)Background picture
Add an division on the header, then set the background-image the image you want to place. Remember, background image always repeats if you don't set the attribute. If it's a big image which should be shown only once, set the background-repeat:no-repeat. If your only want your picture to repeat vertically or horizontally, set the background-repeat repeat-y or repeat-x.

See here for example.

2. A footer is a footer, is a footer, is a footer......

I guess many designers are complaining about the footers -- the division that should always stay at the bottom. However, thousands of people are trying to achieve this by adding the attribute "bottom:0px" to the footer, which turns out to be never working. But we can never assign the footer with a "top" attribute, since we never know how long our content will be. Then what to do?

The solution is to layout the major divisions in the way of "flow" as we've discussed in the last tutorial. Take a 3-column layout with a header and a footer for example, we place the header at top, style="width:100%; clear:both". Then we assign the medium level "float" attribue. Remember, do not assign any length for the middle column if you want it to be scalable. The last thing, assign "clear:both" to the footer.

See here for the solution.