>> Navigation and Layouts in CSS

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

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

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

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

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

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

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

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 http://green-beast.com/ Web-Based Systems - Misbhauddin

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 http://graybit.com/main.php Web-Based Systems - Misbhauddin

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 http://www.csszengarden.com/?cssfile=http://green-beast.com/portfolio/zen/css/zen.css Web-Based Systems - Misbhauddin

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

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

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

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