How to add full width header and footer to your pages?

Frequently Asked Questions about Quick 'n Easy Web Builder
Locked
User avatar
pablo
Site Admin
Posts: 3976
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

How to add full width header and footer to your pages?

Post by pablo »

Often users want to have a header and footer that uses the entire width of the screen while the rest of the content is centered within the browser window. Since Quick 'n Easy Web Builder creates a fixed width container for your layout, you will have to do a little bit of extra work to achieve this.

Using layers
The first trick is to use stretchable layers for the header/footer.

Step 1
Let's assume the width of your layout is 900 pixels (the page width is also set the 900 pixels) and that you have selected 'Center this page in the browser window horizontally' (in Page Properties).

Step 2
Insert a layer and set the width to 900 pixels, the same width as the page (the height doesn't really matter).
In the Layer's properties enable 'Relative horizontal resizing' and if you plan to add other objects (like text, images) to the header then you probably also want to set the alignment to 'Center'.

Step 3
Insert another layer for the footer with the same properties.

The Header/Footer mode (Mode property) of the layer can be useful if you are using the layer as a header or footer for your page usually in combination with the 'relative horizontal resizing' option.
Normally the 'relative horizontal resizing' (and the other relative options) will add the code after the <body> container resulting in a higher z-index.
Selecting 'Header/Footer' mode will insert the code before the <body> container, so the layer will be behind all other content.

Step 4
Preview the page to see the results. Notice that both the header and footer will stretch over the full width of the browser window, while the rest of the page centers.


Using a background image
Another method to achieve the same effect is by using a background image with the repeat property set to 'Repeat in horizontal direction' (Horizontal align: Center/Vertical Align: Top)
This way you can design more advanced headers in your favorite image editor.

You can download an example project which demonstrates both methods here:
http://www.quickandeasywebbuilder.com/s ... uttest.zip
User avatar
pablo
Site Admin
Posts: 3976
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: How to add full width header and footer to your pages?

Post by pablo »

For footers you can also use a layer and set it to 'docking layer' mode.
This will keep the layer on the bottom of the browser window all the time.
Locked