Fixed Positioning
Web sites with fixed elements Top navigation on http://www.thelounge.fi/ Sidebar on http://girlwithacamera.co.uk/
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
Multisite Page Styles
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?
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
Next - Previous Consistent placement Top, bottom, both Often at the left and right edges Structurally keep them together NAV Text Images
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
Combination
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
Page Layout
Should you distinguish? Two different bars Page / Site Links Should you distinguish? Two different bars Horizontal (site) and vertical (page) Color, size, font differentiation
How to Tailor Layout Margins Positions Heights
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
Challenge
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