today’s objectives assignment 1 padding, margins, borders fluid layout page building...

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<table></table> should be used for tabular data

Tables commonly used for page layout – not recommended

Should not uses tables for layout.

<!doctype html><html><head><meta charset="utf-8"><title>Document structure</title></head>

<body></body></html>

BASIC DOCUMENT STRUCTURE

<!doctype html><html><head><meta charset="utf-8"><title>Document structure</title>

</head>

<body>

<header id="main-header"> <h1>Mount Olympus News</h1></header>

</body></html>

<style type="text/css">body, ul, li { margin:0; padding:0;}</style

HTML goes here

CSS goes here


<!doctype html><html><head><meta charset="utf-8"><title>Document structure</title>

</head>

<body><h2>Prometheus Heats Things Up</h2>

</body></html>

<style type="text/css">body, ul, li { margin:0; padding:0;}</style><header id="main-header"> <h1>Mount Olympus News</h1></header>

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

<section>

</section>

<section>

</section>

Main news itemsOpinion items

<section id=“IXD”>

</section>

<section id=“install”>

</section>

Section by content.

PADDING, MARGINS, ANDBORDERS

CSS

Padding, Margins, andBorders Web browsers treat all html elements as

boxes.

A tag is a box with content inside (text, graphic or other html element).

Padding, Margins, andBorders

HELLO WORLD!

TOP PADDING

RIGHT PADDING

LEFT PADDING

BOTTOM PADDING

TOP MARGIN

BOTTOM MARGIN

LEF

T M

AR

GIN

RIG

HT

MA

RG

IN

RIG

HT

BO

RD

ER

LEF

T B

OR

DE

R

TOP BORDER

BOTTOM BORDER

Other Element

Other Element

Oth

er E

lem

ent

Oth

er E

lem

ent

Padding, Margins, andBorders Padding: space between the content and

the content’s border. Separates content from its border.

HELLO WORLD!

TOP BORDER

PADDING

PADDING

PA

DD

ING

PA

DD

ING

Padding, Margins, andBorders 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, andBordersBorder 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 WORL

D!

Padding, Margins, andBorders Background-color: fills space inside

border, including padding area. Margin separates one element from

another.

Hello How are you?

Padding Padding

Margin

Margin

Margins

HELLO WORLD!

TOP MARGIN

LE

FT

MA

RG

IN

RIG

HT

MA

RG

IN

Other Element

Other Element

Oth

er E

lem

ent

Oth

er E

lem

ent

BOTTOM MARGIN

Padding, Margins, andBorders 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, andBorders 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, andBorders

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, andBorders 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, andBorders 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 marginsactually 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 marginsactually 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. <p> <h>,<div>, <section> <ul>, <ol>, etc.

Inline tags don’t create a break before or after them.<span>, <em>, <strong>, <a>

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;

}


Make a block-level element act like an inline element: display: inline;

ul li {

display: inline;}

This is useful for setting navigation items

Home AboutProduc

ts

Home

AboutProduc

ts



Must use display : block;ul li a {display: inline;

}

Home AboutProduc

ts



Must use display : block;ul li a {display: inline-block;

}

Home About Products

today’s objectives assignment 1 padding, margins, borders fluid layout page building...

Documents