Ch. 11: Layout and Positioning: Arranging Elements
***Remember that you can view the source code (html) and css of each layout that is linked below. Right-click, “View source” or “View page source”, and see the html. To view the css, click the css linked on the html code (code reads href = “starbuzz.css” or some version of that). ***
***It is fine for you to mimic and copy the layout strategies below.***
Understanding the “flow” of elements — pp. 472-478
Floating elements as a layout strategy — pp. 479-482.
1. Reformatting the Starbuzz web page to a two-column web page using the floating strategy — pp. 483-500.
- See the example when we floated the sidebar to the right.
- See the example when we floated the main content to the left.
2. The jello layout — pp. 500-503.
3. Absolute positioning — pp. 503-509.
4. CSS table display layout — pp. 510-520.
Review of CSS layout strategies — pp. 521-522
Floating images in a header — pp. 523-527.
Using absolute positioning for an image — pp. 527-529.
Fixed positioning — pp. 530-536.
- See the final Starbuzz website: three columns, absolute positioned award, and fixed positioned ticket.
Relative positioning — p. 536