Download Chapter 6

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project

page
1
page
2
page
3
page
4
page
5
page
6
page
7
page
8
page
9
page
10
page
11
page
12
page
13
page
14
Document related concepts
no text concepts found
Transcript 
WEB DEVELOPMENT & DESIGN
FOUNDATIONS WITH HTML5
Chapter 6
Key Concepts
Copyright © Terry Felke-Morris
1
 Content
 Text & web page
elements in the
container
 Padding
 Area between the
content and the border
 Border
 Between the padding
and the margin
 Margin
 Determines the empty
space between the
element and adjacent
elements
Copyright © Terry Felke-Morris
THE BOX MODEL
2
CONFIGURE MARGIN WITH CSS
 The margin property
 Related properties:
 margin-top, margin-right, margin-left, margin-bottom
 Configures empty space between the element and adjacent
elements
 Syntax examples
h1 { margin: 0; }
h1 { margin: 20px 10px; }
h1 { margin: 10px 30px 20px; }
h1 { margin: 20px 30px 0 30px; }
Copyright © Terry Felke-Morris
CONFIGURE PADDING WITH CSS
 The padding property
 Related properties:
 padding-top, padding-right, padding-left,
padding-bottom
 Configures empty space between the content of the HTML
element (such as text) and the border
 Syntax examples
h1 { padding: 0; }
h1 { padding : 20px 10px; }
h1 { padding : 10px 30px 20px; }
h1 { padding : 20px 30px 0 30px; }
Copyright © Terry Felke-Morris
BOX MODEL IN ACTION
Copyright © Terry Felke-Morris
5
BOX MODEL IN ACTION
 file:///J:/INF286/chapter6/box.html
Copyright © Terry Felke-Morris
6
NORMAL FLOW
Browser display of elements in the order they are
coded in the Web page document
Copyright © Terry Felke-Morris
HANDS-ON PRACTICE 6.1
 file:///J:/INF286/chapter6/box1.html
 file:///J:/INF286/chapter6/box2.html
Copyright © Terry Felke-Morris
8
RELATIVE POSITIONING
h1 { background-color:#cccccc;
padding: 5px;
color: #000000; }
#myContent { position: relative;
left: 30px;
font-family: Arial,sans-serif; }
Copyright © Terry Felke-Morris
Changes the location of
an element in relation to
where it would otherwise
appear
9
RELATIVE POSITIONING
 file:///J:/INF286/chapter6/relative.html
Copyright © Terry Felke-Morris
10
ABSOLUTE POSITIONING
Precisely specifies the location of an
element in the browser window
h1 { background-color: #cccccc;
padding: 5px;
color: #000000; }
#content {position: absolute;
left: 200;
top: 100;
font-family: Arial,sans-serif;
width: 300; }
Copyright © Terry Felke-Morris
11
ABSOLUTE POSITIONING
 file:///J:/INF286/chapter6/absolute.html
Copyright © Terry Felke-Morris
12
ABSOLUTE POSITIONING EXAMPLE
Copyright © Terry Felke-Morris
HANDS-ON PRACTICE 6.1
 file:///J:/INF286/chapter6/starter2.html
 file:///J:/INF286/chapter6/trillium.html
Copyright © Terry Felke-Morris
14
Related documents