Today’s objectives  Assignment 1  Padding, Margins, Borders  Fluid Layout page  Building accessible Table  Element size with padding and border  Sprites

ASSIGNMENT 1 NOTES

Tables commonly used for page layout – not recommended Proper use of table should be used for tabular data

Tables commonly used for page layout – not recommended Should not uses tables for layout.

Document structure BASIC DOCUMENT STRUCTURE

BASIC DOCUMENT STRUCTURE

Document structure Mount Olympus News body, ul, li { margin:0; padding:0;} </style HTML goes here CSS goes here BASIC DOCUMENT STRUCTURE

Document structure Prometheus Heats Things Up body, ul, li { margin:0; padding:0;} Mount Olympus News HTML does not go here

SECTION element  A general rule - SECTION appropriate if element's contents listed in the doc outline.  It’s a chunk of related content

Main news items Opinion items

Section by content.

PADDING, MARGINS, AND BORDERS CSS

Padding, Margins, and Borders  Web browsers treat all html elements as boxes.  A tag is a box with content inside (text, graphic or other html element).

Padding, Margins, and Borders HELLO WORLD! TOP PADDING RIGHT PADDING LEFT PADDING BOTTOM PADDING TOP MARGIN BOTTOM MARGIN LEFT MARGIN RIGHT MARGIN RIGHT BORDER LEFT BORDER TOP BORDER BOTTOM BORDER Other Element

Padding, Margins, and Borders  Padding: space between the content and the content’s border.  Separates content from its border. HELLO WORLD! TOP BORDER PADDING

Padding, Margins, and Borders  Border: line drawn around each edge of the box.  Can be four sides, on any single side, or any combination of sides. HELLO WORLD!

Padding, Margins, and Borders Border style values:  none: Defines no border  dotted: Defines a dotted border  dashed: Defines a dashed border  solid: Defines a solid border  double: Defines two borders.  groove: Defines a 3D grooved border.  ridge: Defines a 3D ridged border.  inset: Defines a 3D inset border.  outset: Defines a 3D outset border. HELLO WORLD!

Padding, Margins, and Borders  Background-color: fills space inside border, including padding area.  Margin separates one element from another. HelloHow are you? Padding Margin

Margins HELLO WORLD! TOP MARGIN LEFT MARGIN RIGHT MARGIN Other Element BOTTOM MARGIN

Padding, Margins, and Borders  Padding adds space between the content, and the border and keeps the content from appearing cramped inside the box.  Margins add white space (gutter) between elements giving the overall look of the page a lighter appearance.

Padding, Margins, and Borders  Four properties control padding: padding-top, padding-right, padding-bottom, and padding-left.  Four properties control margin edges: margin-top, margin-right, margin-bottom, and margin-left. margin-top : 5px; margin-right : 5px; margin-bottom : 5px; margin-left : 5px; padding-top : 5px; padding-right : 5px; padding-bottom : 5px; padding-left : 5px; padding: 10px 5px 5px 10px; margin: 0 10px 10px 20px;

Padding, Margins, and Borders margin-top : 5px; margin-right : 5px; margin-bottom : 5px; margin-left : 5px; padding-top : 5px; padding-right : 5px; padding-bottom : 5px; padding-left : 5px; padding: 10px 5px 5px 10px; margin: 0 10px 10px 20px; The order of the four values is: top, right, bottom, and left. TRouBLe - Top, Right, Bottom, and Left. Shortcut

Padding, Margins, and Borders  When value is 0, don’t need measurement unit (e.g., em, px).  Use margin: 0; instead of margin: 0px;.  When same value for all four sides, use a single value margin: 5px;

Padding, Margins, and Borders  When same value for both top and bottom and another value for left and right, use two values: margin : 0 2em;  Sets top and bottom margins to 0 ; left and right margins to 2ems.

Collapsing margins - two margins actually become one.  Bottom margin of unordered list = 30 pixels.  Top margin of a following paragraph = 20 pixels. You think: 30px + 20px = 50px spacing  BUT browser uses the largest margin (30px)  You can use padding to get around this issue.

Collapsing margins - two margins actually become one.  Browser does NOT add two vertical margins values but applies larger of the two margins. Item1 Item2 Items 3 – margin bottom 30px Paragraph – margin top 20 px 30px not 50px

Block boxes and inline boxes  Although web browsers treat every tag as a kind of box, not all boxes are alike.  Block boxes and inline boxes—that correspond to the two types of tags—block-level and inline tags.

Block boxes and inline boxes  A block-level tag creates a break before and after it.,,,, etc.  Inline tags don’t create a break before or after them.,,,

Block and inline elements  Top or bottom margins and padding do NOT increased or decrease height of inline elements.  Must use display : block; em { padding-top: 20px; padding-bottom: 20px; display: block; }

Block and inline elements  Make a block-level element act like an inline element: display: inline; ul li { display: inline; }  This is useful for setting navigation items HomeAboutProducts Home About Products

Block and inline elements  Top or bottom margins and padding do NOT increased or decrease height of inline elements.  Must use display : block; ul li a { display: inline; } HomeAboutProducts

Block and inline elements  Top or bottom margins and padding do NOT increased or decrease height of inline elements.  Must use display : block; ul li a { display: inline-block; } HomeAboutProducts