This week's lectures have focused on CSS positioning. In concert with exploring these style properties, the Web Developer Toolbar provides tool that will automatically outline all positioned elements on a web page. This can be very useful for deciphering how sophisticated web sites, such as the Zen Garden designs, were put together.
From the Outline menu, choose Outline Positioned Elements and select one of the four options presented:
- Absolute
- Fixed
- Float
- Relative
Absolute position and Floated elements are outlined on the web page in red. Fixed position elements are outlined in green. Relative position elements are outlined in blue.
To turn off the Outline Positioned Elements tool either select each option manually from the menu, or use the browser's Screen Refresh function to turn all options off at the same time.