Responsive Website Design
Week 5
Multi-Column Layout
Learning Outcomes
Manipulate CSS box model
Configure CSS float property
Create two-column page layouts using float property
Configure navigation using unordered lists
Add interactivity to hyperlinks with pseudo-classes
Configure web pages using HTML5 elements, including <section>, <article>
& <aside>
2
display Property
display: block;
Element rendered as a block element (line break) added before & after
display: inline;
Element rendered as an inline element
display: inline-block;
An inline display with adjustable width and height
display: none
Element not showing (not involved in the layout calculation)
Different from “visibility: hidden”
3
CSS Box Model
Content
Text & child elements in the
container
Padding
Area between the content and the
border
Border
Between the padding
and the margin
Margin
Empty space between adjacent
elements
4
Box model - margin
empty space between the adjacent
elements
Related properties:
margin-top, margin-right, margin-
left, margin-bottom
Examples
h1 { margin: 0; }
h1 { margin: 20px 10px; }
h1 { margin: 10px 30px 20px; }
h1 { margin: 20px 30px 0 30px; }
5
Box model - padding
empty space between the content of the
HTML element (such as text) and the
border
Related properties:
padding-top, padding-right, padding-
left,
padding-bottom
examples
h1 { padding: 0; }
h1 { padding : 20px 10px; }
h1 { padding : 10px 30px 20px; }
h1 { padding : 20px 30px 0 30px; }
6
Box model in Action
7
box-sizing Property
Determine the size calculation of elements
box-sizing: content-box vs. border-box
#ex1 { <body>
box-sizing: content-box; <div id="ex1">
width: 500px; <h2>box-sizing: content-box
height: 150px; (default)</h2>
padding: 10px; Size arrangement refers to
the size of content
border: 10px solid blue;
</div>
}
<div id="ex2">
#ex2 {
<h2>box-sizing: border-
box-sizing: border-box;
box</h2>
width: 500px;
Size arrangement refers to
height: 150px; the size of block (or box)
padding: 10px; </div>
border: 10px solid blue; </body>
}
8
float Property
Allows HTML elements to “float” on one side of its container
img {float:right;}
…
<h1>Wildflowers</h1>
<img src=“…” alt=“”>
<p>…</p>
9
Clear Property
before after
X
10
<h2> location
Clear Property
due to normal
flow
Useful to “clear” a float
values: left, right, and both
h2{clear: left;}
11
The Overflow Property
background
does not • <div>
extend as far • <img….>
as you’d • <p>…</p>
expect. • </div>
• <h2>…</h2>
• …
• div:{overflow:auto}
“overflow: auto”
resizes <div> to
solve overflow
phenomena
12
Two-column page layout
Single Column Wireframe Two Column Wireframe
13
Two-column in practice
#wrapper { width: 80%;
margin-left: auto;
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; }
14
Vertical 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>
15
Horizontal 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>
nav li { display: inline; } /*or inline-block*/
16
CSS Pseudo-classes
Refer to selected element of special state(s)
selector:pseudo-class {property:value;}
link – default state of <a> a:link {color:#000066;}
visited – a visited hyperlink a:visited {color:#003366;}
hover – <a> that mouse curser is moving over
a:hover {color:#0099CC;}
active – <a> that is currently activated
a:active {color:#FF0000;}
17
CSS pseudo-classes example
a:link { color: #ff0000; }
a:hover { text-decoration: none;
color: #000066; }
18
Three-column page layout
<header> <header>header</header>
<nav>nav</nav>
<aside>aside</aside>
<main>main</main>
<footer>footer</footer>
<nav> <main> <aside>
nav{ float:left;
width:150px;}
aside{ float:left;
width: 250px;}
<footer> main{ overflow:auto;}
19
Three-column layout example
20
Position Property
21
Fixed & Sticky Positioning
nav { position: fixed |
Sticky; }
22
Relative Positioning
p { position: relative;
left: 30px;
}
p { position: relative;
left: 30px;
}
23
Absolute Positioning
p { position: absolute;
left: 200px;
top: 100px;
width: 300px;
}
p { position: absolute;
left: 200px;
top: 100px;
width: 300px;
}
24
HTML.5 elements
Header Element
contains the headings of either a web page document or an area in the
document such as a section or article
Nav Element
contains a section of navigation hyperlinks
Main Element
contains main page content
Footer Element
contains the footer content of a web page or specific area (such as a
section or article) on a web page
25
HTML.5 elements (cont’d)
Aside Element
contains a sidebar, a note, or other tangential content
Section Element
contains a “section” of a document, such as a chapter or topic
Article Element
contains an independent entry, such as a blog posting, comment, or e-zine
article that could stand on its own
26
Class selector or ID selector
Configure a class for :
more than one element on a page
elements of different types
a subset of elements of the same type
Configure an id for:
only one element on a page
a specific segment of a document
27
Summary
Box model
CSS pseudo-classes
Two-column page layouts
HTML5 structural elements.
28
This Week’s Lab
Quiz on this week’s content
In-Lab Assignment 2.1
29
