1. Fixed Positioning

2. Web sites with fixed elements
Top navigation on
Sidebar on

3. Then identify the position
Simple CSS to do it
position: fixed;
Then identify the position
top, bottom
left, right
Use px or %
Places THAT edge

4. Multisite Page Styles

5. Structuring Site Navigation
Three possible models
NEXT and PREV (when fixed order)
Navigation bar to the parts
Single page with links (hub & spokes)
Splash pages
When use?
Mix and match? Multiple ways?

6. Guidelines Link to the exact spot
Heading, not paragraph
Top of the page
Make it easy to get to the navigation
TOO MUCH NAVIGATION IS AS BAD AS NONE!
NEVER DEPEND ON BROWSER BACK BUTTON

7. Next - Previous Consistent placement Top, bottom, both
Often at the left and right edges
Structurally keep them together NAV
Text
Images

8. Navigation Bar IDENTICAL CONTENT ON ALL PAGES Horizontal
May want to distinguish current page visually
Do not use #, use page name
Horizontal
separate section: nav
inline list
Bottom
Vertical two styles
Table of contents
Side bar (Better for long lists)
Takes width

9. Combination

10. Navigation bars Make the list horizontal, remove bullets
Position <ul> where you want it
(left, right, center, top, bottom)
Format the individual link boxes
Size of box
Vertical: line-height
Horizontal: based on text or define width
Make the link fill the item space

11. Page Layout

12. Should you distinguish? Two different bars
Page / Site Links
Should you distinguish?
Two different bars
Horizontal (site) and vertical (page)
Color, size, font differentiation

13. How to Tailor Layout
Margins
Positions
Heights

14. Useful Layout Model: Grid
How wide should your elements be?
Consistency
Enough white space
People have spent time working on it
978 model
Example
What is it?
A tool which is useful for planning the layout of your website

15. Challenge

16. Problem Use the SAME header HTML on every page of a 3-page website
Use a single CSS
Change the link for the current page to have a different background color
That is P1 P2 P3
On P1 P1 P2 P3
On P2 P1 P2 P3
On P3