Use Microsoft Expression Web to fix your Page Footer at the bottom January 10, 2009
Posted by minals in Expression Web Tips and Tricks.trackback
If you want the footer to be positioned to the bottom of your page, even while you scroll up and down the page, here is how you can do that in Expression Web 2.
1. Add the footer div after your main container div. See example below:
<body>
<!–Main container for the page begins here–>
<div id=”master_container”>
</div>
<!–Main container for the page ends here–>
<!–Footer begins here–>
<div id=”footer”>
</div>
<!–Footer ends here–>
</body>
2. Now go to the Apply Styles task pane and choose to create New Style.
3. Click on the Selector drop down. Since we have already set id ‘footer’ to the footer div (see the code given above), #footer is automatically listed in the Selector drop down. Choose #footer. Choose to define the style in a new style sheet, or your existing style sheet or in the current page.
4. In the Category list select Position. Set the position to ‘fixed’, width to ‘100%’, height as per your requirements (in this example I would set the height to ‘50px’) bottom to ‘0px’ and left to ‘0px’.
The footer has now been positioned to the bottom.
5. Now you can proceed with setting a background color, font, and such other properties. When saved and previewed the page should look like this:
Comments»
No comments yet — be the first.