Colored boxes - Step 6. Colored boxes
These main containers must now be styled with a positioning method. To make it easier to see how the containers interact, each of them will be given a height and unique background color - made into a colored box. It is important, particularly when you are trying a new layout, that you do a single step then test across the target browsers before moving on. This saves backtracking if problems occur.
The behavior of the containers may change to some degree when real content is placed inside them. However, this coloring method allows you to deal with basic positioning issues first, then content issues once the containers are established.
- Positioning the container
- Positioning the header
- Positioning the mainnav
- Positioning the menu
- Positioning the contents
- Positioning the footer
- Browser Cam results
Positioning methods may need to be adjusted if there are problems. However, it is easy to experiment with a range of methods, before any content is in place.
This technique (coloring, positioning and testing) can be used throughout the layout process to position elements within the page.
