- Expression web tabbed menus
- Expression Web Forum
- Expression web resources
- CSS Intro
- Build Expression Web Template 1
- Build Expression Web template 2
- Build Expression Web Template 3
- Style horizontal Navigation with CSS
- Style vertical menu with CSS
- Style the main content area
- Style the footer
- Centre a page
- Build Expression Web DWT Tutorial
- Graphic Template example
- Free Expression Web Templates
- Add RSS to Expression Web
- Expression web forms
- RSS feeds
- 10 Tips
- Page includes
- Insert flash in expression web
- Expression web dropdown menu
- Use XML with Expression Web
- Point and click easy drop-down menu's
- Table Based Layouts
- ASP.NET Ad Rotator
- Display Data
- Search database using a text box
- Transparent Text
- Bold text - Formatting
- Date and time
- Who are you
Styling the footer
The footer is usually used for a back to the top link and or web site/company details.
On this occasion, we will use it as an introduction to using graphics in your styling. First we need a background tile. It just so happens that i have one here.
Right click the image and save to your web site files. Remember where you put the image but anywhere in your web files will do.
Click inside the #footer <div>
It will now be highlighted in the Manage styles task pane
Select modify style
From the category list select background
Browse to the image that you have saved
You will no doubt see the preview!
This is not how it is supposed to look so we need to tame the style a little
Click on the Background repeat drop down
Select repeat x
Select Position from the Category list
For the height type
make sure px is selected
You can see now we have controlled the style.
If you want, you can type a back to the top link or add company details.
Expression Web tutorial - Styling the Footer. A short flash tutorial explaining how to use graphics with CSS to style the footer of a page.
Our next tutorial will show you how using your template as a DWT, you can create fast loading and extremely easy to update web sites.