By Lee Sykes
October 2007
(Updated 18th October 2007)
This tutorial is part 2 of the Pure CSS Search Engine Optimized Skin Layouts tutorial. We previously demonstrated how to create a 3 pane skin using floats and absolute positioning. We are now going to demonstrate how to create multiple skin layouts using a skinname.css file.
Using the skinname.css file technique allows you to easily create variations of skins while also reducing the amount of code placed in the skin.css file.
In this tutorial we create a 2 pane version of the CSS skin using minimal code changes.
Video
- Introduction
- How to create a 2 pane version of the SEO CSS skin
- Visual Web Developer Express
- Creating a copy of the 3pane_main.htm skin file and renaming to 2pane.htm skin file
- Creating the doctype file for the 2 pane skin
- How to remove the right pane
- Creating a 2pane.css file (skinname.css file)
- How to reduce CSS code by specifying CSS stylings just for the current skin
- How to set the width of the mainbody id to 99%
- (How to fill the space after removing the right pane)
- Viewing the skin
- Viewing the CSS using the web developers toolbar
- Viewing the new 2pane.css file
- How to reduce the width of the footer pane for the 2 pane skin
- Viewing the skin
- IE hacks
Time Length: 13min 5secs