1. >> Navigation and Layouts in CSS

2. Web-based Systems | Misbhauddin
Using lists
Navigation Links
Web-based Systems | Misbhauddin

3. Web-Based Systems - Misbhauddin
Step 1: Add Links
Use <a> tag
For href value, use #
Change Color: LOVE-HATE
Try Now:
Links
Home
About
Attendees
Agenda
Alumni Directory
Survey
Contact
Web-Based Systems - Misbhauddin

4. Step 2: “Div-ify” Components
Put Logo in its own div with id=“logo”
Put Links in its own div called “nav”
Try Now:
Web-Based Systems - Misbhauddin

5. Step 3: Use Lists to organize
Use an unordered list to organize all the navigation links.
Try Now:
Web-Based Systems - Misbhauddin

6. Web-Based Systems - Misbhauddin
Step 4: Remove Bullets
Use property
list-style:none;
Try Now:
Web-Based Systems - Misbhauddin

7. Step 5: Display Items Inline
Use property
display:inline;
Try Now:
Adjust margins
margin-right
Web-Based Systems - Misbhauddin

8. Web-based Systems | Misbhauddin
Laying out content in HTML using CSS
Content Layout
Web-based Systems | Misbhauddin

9. Web-Based Systems - Misbhauddin
Layout Types in CSS
Fixed-Width Layouts
Main Wrapper is set to a specific immovable width
Common width: 760px
The “Good”
Easier to Style
Optimal for readability
The “Bad”
Line-width-to-text-size ratio does not increase with text sizing
Small monitor people (640x480) will have a scrollbar
Too narrow on large screen displays
VISIT
Web-Based Systems - Misbhauddin

10. Web-Based Systems - Misbhauddin
Layout Types in CSS
Fluid Layouts
Main Wrapper is not specified or only with a % value
The “Good”
Can be used with any viewing device (in theory)
Makes most use of the screen
The “Bad”
Too much content and clutter the screen
CSS property max-width is not supported in IE. So? Try reading a line of text on a screen size with more than 1000 pixels.
VISIT
Web-Based Systems - Misbhauddin

11. Web-Based Systems - Misbhauddin
Layout Types in CSS
Elastic Layouts
Main Wrapper & other elements are measured in ems
ems: unit of measure proportional to text/font size
The “Good”
Resizes at the same rate – no disproportionality
The “Bad”
Not much benefit – Only Cool
VISIT
Web-Based Systems - Misbhauddin

12. Web-Based Systems - Misbhauddin
Layout for the Course
Fixed Layout with centered version
Wrapper is fixed using the width property
Margin is set to 0 auto; which means the top and bottom margin in zero and the left and right margin is automatic (hence centered based on the width)
Web-Based Systems - Misbhauddin

13. Web-Based Systems - Misbhauddin
Responsive Design
Strategy of making a site that "responds" to the browser and device that it is being shown on
Done using media queries
@media screen and (min-width:600px) {
nav {
float: left;
width: 25%; }
section {
margin-left: 25%;
Web-Based Systems - Misbhauddin

14. Web-Based Systems - Misbhauddin
Text Columns – Easy Way
New set of CSS properties that let you easily make multi-column text
Properties
column-count
column-gap
Not supported by all browsers
Use –moz- and -webkit- vendor prefixes
Web-Based Systems - Misbhauddin

15. Do this for the Join Button in the exercise
Custom Buttons in CSS
Steps [using <BUTTON> tag]
Make the appropriate selector in CSS
Set an appropriate width and height
Set the background color
Text align to center
Remove the border
Steps [using <a> tag]
Do all the above
Vertical Alignment
Set display to table-cell
Set vertical-align to middle
Works for centering in any div tag
Do this for the Join Button in the exercise
Web-Based Systems - Misbhauddin