1

Dear Students:

In order to study for the midterm assessment, I recommend that you complete the review
questions at the end of each chapter. Answers to these are available in the back of the book
online. If you go to the website for the textbook, each chapter also has study guides
available and learning tools such as flashcards.

You will have up to 2 hours (120 minutes) to take the exam. It is worth up to 100 points.
Answer each of the questions to the best of your ability by typing the answer in the box
provided or by selecting the best choice in the drop down or option offered, leaving nothing
blank (no credit can be given unless something is entered).

There are 45 questions on the exam. There are 35 multiple choice questions worth 2 points
each and 10 essay/short answer questions worth up to 3 points each. Once you click Next
Page to go to the next question, you will not be able to go backwards to review or make
changes to previous questions.

Professor Crawford

2
 Web Development & Design
Foundations with HTML5

CHAPTER 6
PAGE LAYOUT

Copyright © Terry Felke-Morris http://terrymorris.net 3

 Learning Outcomes
In this chapter, you will learn how to ...
◦ Describe and apply the CSS Box Model
◦ Configure margin with CSS
◦ Configure float with CSS
◦ Configure fixed, relative, and absolute positioning with CSS
◦ Create two-column page layouts using CSS
◦ Configure navigation in unordered lists and style with CSS
◦ Add interactivity to hyperlinks with CSS pseudo-classes
◦ Configure web pages with HTML5 structural elements, including
section, article, and aside

4
Copyright © Terry Felke-Morris http://terrymorris.net
Content
◦ Text & web page elements The Box Model
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

5
Copyright © Terry Felke-Morris http://terrymorris.net
 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; } Demo

Copyright © Terry Felke-Morris http://terrymorris.net

 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 http://terrymorris.net
 Box model in Action

Copyright © Terry Felke-Morris http://terrymorris.net 8

 Normal Flow
Browser display of elements in the order they are
coded in the web page document

Copyright © Terry Felke-Morris http://terrymorris.net

 float Property

h1 { background-color:#cccccc; Elements that seem to

padding:5px; “float" on the right or left
color: #000000; side of either the browser
} window or another
p { font-family:Arial,sans-serif; element are often
} configured using the float
#yls {float:right; property.
margin: 0 0 5px 5px;
border: 1px solid #000000;
} Demo
10
Copyright © Terry Felke-Morris http://terrymorris.net
 The h2 text is
displayed in
clear Property
normal flow. Useful to “clear” or
terminate a float
Values are left, right, and
both

Demo

clear: left;
was applied to the h2.
Now the h2 text
displays AFTER the
floated image.

Copyright © Terry Felke-Morris http://terrymorris.net

 The
background overflow Property
does not
Intended to configure the display
extend as far of elements on a Web page.
as you’d
expect. However, it is useful to “clear” or
terminate a float before the end
of a container element
Values are auto, hidden, and
scroll

Demo

overflow: auto;
was applied to the div
that contains the image
and paragraph.
Now the background
extends and the h2 text
displays AFTER the
Copyright © Terry Felke-Morris http://terrymorris.net
floated image.
 CSS display Property
Configures how and if an element is displayed
◦ display: none;
◦ The element will not be displayed.

◦ display: block;
◦ The element is rendered as a block element – even if it is actually an
inline element, such as a hyperlink.

◦ display: inline;
◦ The element will be rendered as an inline element – even if it is
actually a block element – such as a <li>.

o display: inline-block;
o The element will display as an inline display element adjacent to other
inline display elements but also can be configured with properties of
block display elements including width and height.
Demo
13
Copyright © Terry Felke-Morris http://terrymorris.net
 Page Layout
Single Column -> Two Column
Single Column Two Column
Wireframe Wireframe

Copyright © Terry Felke-Morris http://terrymorris.net 14

 Basic Two-Column Layout
Demo

<body>
<div id="wrapper">
<header> <header>
<nav> </nav>
<main> </main>
<footer> </footer>
</div>
</body>

Copyright © Terry Felke-Morris http://terrymorris.net

 Basic Two-Column
#wrapper { width: 80%;
margin-left: auto;
Layout
margin-right: auto;
background-color: #EAEAEA; }
header { background-color: #CCCCFF; }
h1 { margin: 0; padding: 10px; }
nav { float: left;
width: 90px;
padding: 10px; }
main { margin-left: 100px;
padding: 10px;
background-color: #FFFFFF; }
footer { text-align: center;
font-style: italic;
background-color: #CCCCFF; }

Copyright © Terry Felke-Morris http://terrymorris.net

 CSS Page Layout
Two Columns (left nav)

Copyright © Terry Felke-Morris http://terrymorris.net

 <nav>
<ul>
Vertical
<li><a href="index.html">Home</a></li> navigation
<li><a href="menu.html">Menu</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>

CSS removes the list marker and underline:

nav ul { list-style-type: none; }
nav a { text-decoration: none; }

Copyright © Terry Felke-Morris http://terrymorris.net

18
 Horizontal
HTML:
Navigation
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
CSS removes the list marker, removes the underline,
adds padding, and configures the list items for inline display.
nav ul { list-style-type: none;}
nav a { text-decoration: none;
padding-right: 10px; }
nav li { display: inline; }

Copyright © Terry Felke-Morris http://terrymorris.net

19
 CSS Pseudo-classes
 Pseudo-classes and the anchor element
◦ link – default state
for a hyperlink

◦ visited – a hyperlink that a:link {color:#000066;}

has been visited a:visited {color:#003366;}
a:focus {color:#FF0000;}
◦ focus – triggered when a:hover {color:#0099CC;}
the hyperlink has focus
a:active {color:#FF0000;}
◦ hover – triggered when
the mouse moves over the hyperlink

◦ active – triggered when the hyperlink is being clicked

Demo

Copyright © Terry Felke-Morris http://terrymorris.net

 CSS
Pseudo-classes

a:link { color: #ff0000; }

a:hover { text-decoration: none;
color: #000066; }

Copyright © Terry Felke-Morris http://terrymorris.net

21
 Position Property

Copyright © Terry Felke-Morris http://terrymorris.net 22

 Fixed Positioning
nav { position: fixed; }

Demo Demo

Copyright © Terry Felke-Morris http://terrymorris.net 23

 Relative Positioning

Changes the location of

p { position: relative;
left: 30px; an element in relation to
font-family: Arial, sans-serif; } where it would
otherwise appear in
Demo normal flow
Copyright © Terry Felke-Morris http://terrymorris.net 24
 Absolute Positioning

Demo Z-Index Demo

Precisely specifies the

p { position: absolute; location of an element
left: 200px; outside of normal flow
top: 100px; in in relation to its first
font-family: Arial, sans-serif; parent non-static element
width: 300px; }

Copyright © Terry Felke-Morris http://terrymorris.net 25

 CSS Debugging Tips
Manually check syntax errors
Use W3C CSS Validator to check syntax errors
◦ http://jigsaw.w3.org/css-validator/
Configure temporary background colors
Configure temporary borders
Use CSS comments to find the unexpected
/* the browser ignores this code */

Don’t expect your pages to look exactly the same in all

browsers!
Be patient!

26
Copyright © Terry Felke-Morris http://terrymorris.net
 HTML5 Structural Elements REVIEW
Header Element
◦ block display; contains the headings of either a web page document or an
area in the document such as a section or article

Nav Element
◦ block display; contains a section
of navigation hyperlinks

Main Element
◦ block display; contains main page content

Footer Element
◦ block display; contains the footer
content of a web page or specific
area (such as a section or article) on a web page

Copyright © Terry Felke-Morris http://terrymorris.net

27
 More HTML5 Elements
Aside Element
◦ block display; contains a sidebar, a note, or other tangential content
Section Element
◦ contains a “section” of a document, such as a chapter or topic
◦ block display
Article Element
◦ contains an independent entry, such as a blog posting, comment, or e-zine
article that could stand on its own
◦ block display
Time Element
◦ represents a date or a time
◦ could be useful to date articles
or blog posts
◦ inline display

Copyright © Terry Felke-Morris http://terrymorris.net

28
 Deciding to Configure a class or id
Configure a class:
◦ If the style may apply to more than one element on a page
◦ Use the . (dot) notation in the style sheet.
◦ Use the class attribute in the HTML.

Configure an id:
◦ If the style is specific to only one element on a page
◦ Use the # notation in the style sheet.
◦ Use the id attribute in the HTML.

29
Copyright © Terry Felke-Morris http://terrymorris.net
 Choosing a Name for a class or an id
 A class or id name should be descriptive of the
purpose:
◦ such as nav, news, footer, etc.

◦ Bad choice for a name: redText, bolded, blueborder, etc.

 The the 10 most commonly used class names are:

footer, menu, title, small, text, content,
header, nav, copyright, and button

 Source: http://code.google.com/webstats

30
Copyright © Terry Felke-Morris http://terrymorris.net
• To place an element at a specific position on
a page use:

position: type; top: value; right: value;

bottom: value; left: value;

Where type can be: absolute, relative, fixed

(also static [default] and inherit)

REMEMBER TRBL (top-right-bottom-left)

31
 Absolute Positioning
 Enables you to place an element at specific coordinates
 Takes element out of normal flow of document
 Any subsequent content flows into space previously
occupied by element

position: absolute; left: 15px; top: 10px;

Absolute positioning is positioning that has an absolute

position on a page. For example, an element may sit on
the absolute position of 10 px from the top of the page
and 15px from the left of the page. In other words, it
has an absolute position on the page and does not
change. It is not relative.

32
 Move an element relative to its default position on the
page, where browser would have place the element if style
was not applied to it

position: relative;

Relative positioning is positioning that is relative to another

element on a web page. It is not absolute, meaning in relation to
the entire page, but is relative to another HTML element. For
example, if a absolute positioned div tag is placed inside of a
another div tag which is declared with relative positioning, the
inner div's tag will not be positioned according to the entire page
but according to the boundaries of the outer div tag.

33
 Fix an element in a precise spot in document window
so that while rest of page scrolls, it does not

position: fixed;

Fixed positioning is positioning which is fixed on a page.

This means that even if a user scrolls down a page, the
element will be fixed on the screen. It never disappears
from a user's view. In other words, it is fixed and
viewable always from a user's screen.

34
 Default – No Positioning Added Example
Now that we've basically gone over the above definitions, let's do an actual example, so that we can see for
ourselves how this works.

The best way to show this is to create 2 elements, 2 <div> tag elements. By viewing 2 <div> tags, in relation to each
other, we can see how absolute, relative, and fixed positioning works, from a visual point of view, which is most
likely the best way to learn this.

So we will create 2 <div> tags in HTML with the following coding:

<div id="outer">
<div id="inner">Some content</div>
</div>
This is the following CSS code which styles the two <div> tags:
#outer {
width:300px;
height:300px;
background:#777;
margin:50px;
}
You can see that the inner lighter gray area is the
#inner { inner div. And the larger, darker gray area is the
width:100px; outer div.

height:100px; This is how the 2 elements look when one is

background:#999; nested inside the other in its default state.
} (No positioning has been added to the CSS code.)
35
 Inner Element Has Absolute Positioning
Now we discuss how they will look if we now add absolute positioning to the CSS code of the inner div tag. This
means the following line of code is added to the inner div element:

position:absolute;

The full CSS code for the div tags will now be:
#outer { When one div tag is nested in
width:300px; another and the inner div tag is
height:300px; absolute positioned, it's no longer
relative according to the outer div
background:#777; element. It's absolute positioned
margin:50px; now according to the entire page.
} So, as in the example above, where
we add the line top:10px, the inner
#inner { div element, even though nested
width:100px; inside the outer div tag, will now be
height:100px; 10px from the top of the page. This
means it's no longer contained
background:#999; within the outer div element but is
position: absolute; absolute positioned to the page. This You can see that the inner lighter gray area is the
top:10px; inner div. And the larger, darker gray area is the
only happens when the inner div outer div.
} element is absolute positioned and
the outer div is not. This is how the 2 elements look when one is nested
inside the other
with the outer element having no positioning and
the inner element being absolute positioned
with a 10px margin from the top.
36
 Outer Div Has Relative Positioning and Inner Div Has
Absolute Positioning
Now let's go to the case where the outer div has relative positioning and the inner div has absolute positioning.
This is now more the desired effect that you're probably looking for.
When we declare the outer div tag to have relative positioning and the
inner div tag to have absolute positioning, we're saying that the inner tag
has absolute positioning relative, not to the page, but to the outer div tag.
Since the outer div element is declared to be relative, it functions as a
relative element to the inner. Thus, the inner tag does not function
absolute to the page but to the outer div element.
The full CSS code for the div tags will now be:
#outer {
width:300px;
height:300px;
background:#777;
margin:50px;
position: relative;
} You can see that the inner lighter gray area is the
inner div. And the larger, darker gray area is the
outer div.
#inner {
width:100px; This is how the 2 elements look when one is nested
height:100px; inside the other with the outer element having
relative positioning and the inner element being
background:#999; absolute positioned with a 10px margin from the
position: absolute; top.
top:10px;
} 37
 Both Inner and Outer Div Elements Have Absolute
Positioning
When both inner and outer div elements have absolute positioning, they produce an effect that is similar to the
previous slide (with the outer div having relative positioning and the inner
div having absolute positioning). They both are in the same place on the
page and have the inner div with a 10px margin from the top of the outer
div. However, there is one key difference. With the outer div having
absolute positioning, it is fixed on the page at that position. Being that it is
not relative and it's absolute, it will stay permanently at that position. If
there is any text on the page or any element on the page at that position,
it will block or overshadow the text.
The full CSS code for the div tags will now be:
#outer {
width:300px;
height:300px;
background:#777;
margin:50px;
position: absolute; You can see that the inner lighter gray area is the
} inner div. And the larger, darker gray area is the
outer div.

#inner { This is how the 2 elements look when one is nested

width:100px; inside the other with the outer element having
absolute positioning and the inner element being
height:100px;
absolute positioned with a 10px margin from the
background:#999; top.
position: absolute;
Unless you know what you are doing, this is
top:10px;
probably not what you want.
} 38
 Making the Outer Div Have Fixed Positioning

To make the div element fixed (both outer and inner div elements), all you have to do is set the outer div element to
a fixed position.

This would be the full lines of CSS code:

#outer {
position: fixed;
width:300px;
height:300px;
background:#777;
margin:50px;
}

#inner {
width:100px;
height:100px;
background:#999;
position: absolute; With this code, if you scroll down the page, you
top:10px; will see that the div elements always are
} displayed, even if you scroll down the page.
They are fixed and are always shown.
One trick to add so that you can scroll down the page and
see that is element is really fixed is to length your body
tag, by adding the following code:
body {
height:2000px;
}
39
• Specify stacking order with:
z-index: value z-index: 1

z-index: 3
z-index: 2

40
• Two different styles that allow you to hide
elements:
– Display style
– Visibility style

41
 <!DOCTYPE html>
<html>
<head>
<style>
h1.visible {visibility: visible}
h1.hidden {visibility: hidden}
</style>
</head>
<body>
<h1 class="visible">This is a visible heading</h1>
<h1 class="hidden">This is an invisible heading</h1>
<p>Notice that the invisible heading still takes up space.</p>
</body>
</html>

visibility: hidden display: none

Object is hidden but still Object is hidden and is
is part of the page flow removed from the page
flow

42
NO CSS
(commented out)

43
44
With CSS … next
page

45
46
47