TUTORIAL 4: CREATING
PAGE LAYOUT WITH CSS
Session 4.3
Objectives





Designing the Background
Positioning Objects
Working with Overflow
Clipping an Element
Stacking Elements
Practice: margins, float, and width

For the horizontal navigation list items:
 Display
each list item as a block
 Set the width to 19.8%
 Make the items float to the left
 Set the background color to (49, 38, 31)

For the main section:
 Set
the margin of the paragraphs to 15px
 Set the margin of the unordered list to 25px
Practice: margins, float, and width

For the aside element



Set the margin to 10px
Set the width to 50%
Make the aside float to the right
Designing the Background

CSS also supports background images using
background-image: url(url);
Example:
body {
background-image: url(marble.png);
}

Background Image Properties
Properties
Meanings
Values
background-repeat
Set how a background image
would be repeated
repeat, repeat-x, repeat-y, norepeat, inherit
background-position
Set the starting position of a
background image
left top, left center, left bottom,
right top, right center, right
bottom, center top, center
center, center bottom
background-size
Specify the size of the
background image.
length, percentage, cover,
contain
background-attachment
Set whether a background
image is fixed or scrolls with
the rest of the page
scroll (default), fixed, or inherit
Designing the Background

You can combine the various background properties
into the shorthand property
background: color url(url) attachment position repeat;

Example:
background: black url(backdrop.png) fixed center center
no-repeat;
Practice - Designing the Background
1.
For the header group within the article element,
create a style rule to:
a. Display a background color with value (189, 131,
82) with the background image alisha.png
displayed in the bottom-right corner with no tiling.
b. Set the text color to the value (215, 181, 151)
Positioning Objects

To position an object at a specific coordinate, use the style
properties
position: type;
top: value;
right: value;
bottom: value;
left: value;
where type indicates the type of positioning applied to the
object (absolute, relative, static, fixed, or inherit), and the top,
right, bottom, and left properties indicate the coordinates of the
object
Positioning Objects

Static positioning renders an element in order, as they appear
in the document flow. This is default.

Example
http://euler.gcsu.edu/ccollier/positioning/

Absolute positioning places an element at specific
coordinates either in the page or within a container element.

Examples
http://euler.gcsu.edu/ccollier/positioning/
Positioning Objects

Relative positioning is used to move an element relative to
where the browser would have placed it if no positioning had
been applied

Example
http://euler.gcsu.edu/ccollier/positioning/
Positioning Objects
1.
2.
For the page body, position the page using
relative positioning.
For the header element, place the header at the
coordinates (0, 0) using absolute positioning.
Working with Overflow

When you force an element into a specified height and
width, you can define how browsers should handle content
that overflows allotted space using the style
overflow: type;
Working with Overflow


To specify how browsers should handle content that
overflows in the horizontal direction, use the
following style:
overflow-x: type;
To specify how browsers should handle content that
overflows in the vertical direction, use the following
style:
overflow-y: type;
Working with Overflow
1.
For the div element within the slideshow figure box,
set the browser to display scroll bars automatically
if the content overflows the assigned space, and
use the white-space property to prevent the
content from wrapping to a new line.
 For the figure box, add a 21% left margin and set
the background color to the value (149, 91, 42).
Clipping an Element
To clip an element’s content, use the style
clip: rect(top, right, bottom,
left);

where top, right, bottom, and left define the
boundaries of the clipping rectangle
Clipping an Element
Stacking Elements
Positioning elements can sometimes lead to
objects that overlap each other
 By default, elements that are loaded later by
the browser are displayed on top of elements
that are loaded earlier
 To specify a different stacking order, use the
style property
z-index: value;

Stacking Elements
Stacking Elements
1.
For the three images involved in the collage
division, create a collage where the three images
are overlapping each other in a pleasant display.