Details in the Textbook
Differences with prior material?
Replaced inline elements
Non-replaced inline elements
Block-level: flow top to bottom
Inline: flow left to right
See Figure 7.3 for an example
Why is height less important?
Let's cause web sites to "flow"!
Change the viewport width of your browser
Complete this task for multiple sites
There are extensions to support this process!
Positioning HTML Elements
Can you "opt out" of the flow?
Overlaying and hiding elements
See Section 7.3.4 for more details
Now, for the really fun content!
Constructing multiple column layouts
Two-column layouts with floats
What about absolute positioning?
Elements can 🏃 over other elements!
Can be too low or too high!
See Figure 7.28 for an example
Wow, this is really hard!
Is there a better solution?
Gee, I am glad that you asked! 😼
Flexible box (flexbox) layout in CSS3
Generalized and reusable layouts
But, consider browser support
Let's take a step back ...
Layout with CSS
Fixed layout: width set by designer
Fluid layout: width set with percentages
Responsive layout: respond to changes
How can a page sense viewport width?
Scale down images
Replace navigation elements
Abbreviate page contents
Respond to viewport width!
Need to program "conditional logic"
How do you implement conditional logic?
Responsive CSS frameworks?
What does a framework provide?
Responsive Design Frameworks
Pre-defined media queries
Styled HTML elements
We will try some of this in lab and practical!
Any questions about web page layout?