Notes for Lecture 3
advertisement
Positioning Elements
CHAPTER 3
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
1
The Box Model
The Box Model describes the rectangular boxes generated for each and every HTML element
Boxes are laid out on the page according to the Visual Formatting Model (VFM)
VFM is primarily controlled by three properties:
position: defines the positional relationship between elements on the page
display: determines whether elements stack on top of each other, sit side by side, and even if they are
actually shown or not on the page
float: provides additional positioning options, and can be used to organize elements into multi-column
layouts
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
2
How Does a Box Look Like?
Using the developer toolbox, we saw how HTML elements occupy a rectangular space on the page,
but we needed the toolbox to get any visual sense of the box, because:
The background was transparent
There were no borders to the box
The main properties of the boxes are:
border: is the “marker” of the edges of a box
You can set the thickness, style, and color of a border
padding: is the space between the border and the content of the box
margin: is the space outside the box, separating this box from the other adjacent elements (boxes)
Because a box has four sides, properties associated with borders, padding, and margin have four
settings: top, bottom, right, and left
E.g., margin-top, border-right, etc.
You can set borders, margins, and padding, separately and differently for the four sides of the box
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
3
Border properties
Borders have three properties:
width: values can be: thin, medium, thick, or any non-negative width unit (except %)
style: values can be: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, or outset
color: values can be any legal construct for a color (see last chapter)
To avoid having to write 12 rules for every box, we have shorthad:
Use the main property with one, two, or four values (order is top, right, bottom, left – i.e., clockwise from
top)
E.g., {border: 1px 2px 3px 4px} – to set 4 different values for the for sides of the border
E.g., {border: 1px 2px} – when a value is missing, the value for the opposite side is assumed (top and bottom 1px, right and left 2 px)
E.g., {border: 4px} – when only one value is specified, it applies to all sides
You can specify all three properties for all four sides (most common case) like this:
E.g., {border: 2px dashed red}
Lastly, more specific rules have priority, so you can set 3 sides of a box like this:
{border: 2px dashed red}
And: {border-right: 0}
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
4
Default Border Properties
{border-style: none} – that’s why borders don’t show by
default
{border-width:medium} – the meaning of values like
medium, thin, thick are browser dependent
{border-color:black}
So the simplest way to show a border is to add a rule that
changes the style to something other than none
E.g., say you wish to put a red border around special
paragraphs containing a warning;
Code p.warning {border:3px ridge red;} in the style section
… and <p class="warning">Important Warning!</p> to insert
such a warning
Notice the box extending to the full width of the window
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
5
Padding
Unless you specify padding, content always touches the border (padding is set to 0 by default)
When the border does not show, reasonable spacing does still appear, because of margins
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Padding Example</title>
<style>
p.nopad {border:3px solid red; width:220px;}
p.pad {border:3px solid red; padding:5px; width:220px;}
</style>
</head>
<body>
<p class="nopad">Without any padding, the text touches the border.</p>
<p class="pad">With padding, the text looks much nicer.</p>
</body>
</html>
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
6
Margins
As opposed to padding, margins
default to non-zero values
The easiest way to understand them
is to look at the example to the right:
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
7
Margin Collapse
Vertical margins collapse:
Margins overlap until one of the margins touches the border of the other element
In other words, between two adjacent margins of different sizes, the smaller one disappears
This happens so that a succession of boxes with the same margins, space the same with the first and
last element
Horizontal margins do not collapse
The space between two adjacent horizontal boxes equals the sum of their respective margins
“Neutralize” margins and padding by having this line at
the top of your style sheet (or section):
* {margin:0; padding:0;}
Then set padding and margins for different elements as
you wish to see them.
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
8
How Big Is a Box?
If the width of an element is not
specified, its box will expand to fill the
widths of the containing element.
Of course, the width property always
exists, but it is set to the default value
auto (for automatic) which gives us the
default behaviour shown
Adding borders, margins and padding,
reduces the width for the element
content correspondingly, possibly
increasing the height
Note: the style was completed with
adding a background color, so that we
can see the box even without a border
p {margin:0; background-color:white;}
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
9
Setting the Width of a Box
If the width of an element is
specified, its content will always
occupy the stated width
{width:400px;}
Adding borders, margins and
padding, will increase the overall
width of the element
correspondingly
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
10
Document Flow
So far, we learned that:
All elements are rendered in a box
Boxes can stack on top of each other, or go side by side
This is known as the document flow
Think of it as a conveyor belt delivering box after box the page creator, who simply places them in the space available according to
the default rules for the type of box
Clearly we need some ways to arrange boxes in more flexible ways
Three ways to achieve that:
Floating
Positioning
The display property
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
11
Floating
Floating is a mechanism to remove a box from the document flow, and “float” it as if it would
be located on a separate layer (imagine it like rendering on separate transparent sheets layered
on top of each other).
Essentially, floating “pushes” a box as far as possible to one side of its parent’s box (specified as
we have seen earlier by the word values left and right)
Floating also changes the behaviour of other elements:
Elements following a floated element will move up right next to the floated element
E.g., If you float an image, a paragraph following it will not stack below (as usual) but will go to the right
of the image; if the text is long enough, once it exceeds the lower edge of the picture, it will again start
from the left edge, creating the effect of a text floating around an image, hence the name of this
technique
You can revert elements to standard document flow placement by setting the clear property of the
element
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
12
A Floating Example
Styling an image element with:
img {float:left; margin:0 4px 4px 0;}
… and a paragraph element with:
p {margin:0; border:1px solid red}
… yields the image on the right
In this case the parent is body
The paragraph no longer succeeds the
image, but it rather takes up the same
position as the image (top left corner of the
window), but it “makes room” for the image
When you float a box, you must set up its widths.
Of course, images have a default width, so that’s OK.
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
13
Setting Up Columns
If you float a paragraph following a floated element, it
will not wrap around the image, but instead it will keep
its defined width
This creates a column structure to the page
Style like this to create the image on the right:
img {float:left; margin:0 4px 0 0;}
p {float:left; width:200px; margin:0; border:1px solid red}
Columnar layout: if a set of sibling elements:
Are floated
Have their width property set
There is enough room
… they line up besides each other forming columns
You can use sibling sections to create columns, which
you can then fill with whatever you want
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
14
Side-effects of floating
Floated elements are no longer contained in the box of their parent
That can lead to unexpected (and unwanted) consequences
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Three Ways to Enclose Floated Elements</title>
<style>
section {border:1px solid blue; margin:0 0 10px 0;}
footer {border:1px solid red;}
p {margin:0;}
img {float:left;}
</style>
</head>
<body>
<section>
<img src="images/rubber_duck.jpg">
<p>It's fun to float.</p>
</section>
<footer>Here is the footer element that runs across the bottom of the page.
</footer>
</body>
</html>
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
15
Enclosing a floated element
To avoid the unwanted side-effects we need to force the enclosure of a floated element into his
parent’s box
Three ways to do it:
Specify {overflow:hidden;} in the parent’s style
Float the parent too
Add a non-floated, empty element as the last child, and set it’s clear property
E.g., add an empty division like <div class="clear-me"></div>
… and set it’s style like .clear-me {clear:left;}
There are other ways too, but we’ll leave it at that (in the textbook, you can skip to the position property section)
You need all three techniques, because all have their own side-effects
If one technique does not work, try the others
The last technique usually works best
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
16
Static Positioning
The position property determines where a box is displayed relative to where it would normally appear in the
document flow
It has four values: static (default), relative, absolute, and fixed
To illustrate, we will use a four paragraph page; default positioning is where the normal document flow dictates
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Static Positioning </title>
<style>
p {font-size:24px; color:#555; font-family:Helvetica, Arial, sans-serif; background-color:#ccc; margin:10px 0;}
body {background-color:#caebff;}
p#special-para {color: red; background:#fff;}
</style>
</head>
<body>
<p>First paragraph<p>
<p>Second paragraph<p>
<p id="special-para">Third paragraph (with ID)<p>
<p>Fourth paragraph<p>
</body>
</html>
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
17
Positioning Context
If you change the position property to anything other than the default value static, you are
positioning the element relative to another element; this other element is known as positioning
context.
By default, the positioning context is the whole page (i.e., the body)
The new position can also be adjusted using four position modifiers:
top specifies an offset measured downwards from the top edge of the relevant enclosing box
right specifies an offset measured to the right from the left edge of the relevant enclosing box
bottom specifies an offset measured upwards from the bottom edge of the relevant enclosing box
left specifies an offset measured to the left from the right edge of the relevant enclosing box
Negative values do the same in the opposite direction
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
18
Relative Positioning
Setting the position property to relative moves the box the specified amount(s), relative to
where it would have gone with a default static positioning
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Relative Positioning </title>
<style>
p {font-size:24px; color:#555; font-family:Helvetica, Arial, sans-serif; background-color:#ccc; margin:10px 0;}
body {background-color:#caebff;}
p#special-para {color: red; background:#fff; position:relative; top:25px; left:30px}
</style>
</head>
<body>
<p>First paragraph<p>
<p>Second paragraph<p>
<p id="special-para">Third paragraph (with ID)<p>
<p>Fourth paragraph<p>
</body>
</html>
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
19
Absolute Positioning
Setting the position property to absolute moves the box the specified amount(s), relative to its
positioning context
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Absolute Positioning </title>
<style>
p {font-size:24px; color:#555; font-family:Helvetica, Arial, sans-serif; background-color:#ccc; margin:10px 0;}
body {background-color:#caebff;}
p#special-para {color: red; background:#fff; position:absolute; top:25px; left:30px}
</style>
</head>
<body>
<p>First paragraph<p>
<p>Second paragraph<p>
<p id="special-para">Third paragraph (with ID)<p>
<p>Fourth paragraph<p>
</body>
</html>
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
20
Fixed Positioning
Setting the position property to fixed is the same as setting it to absolute, except:
Fixed positioning is always relative to the whole page (i.e., body)
Fixed positioning does not scroll the element off the page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Fixed Positioning </title>
<style>
p {font-size:24px; color:#555; font-family:Helvetica, Arial, sans-serif; background-color:#ccc; margin:10px 0;}
body {background-color:#caebff;}
p#special-para {color: red; background:#fff; position:fixed; top:25px; left:30px}
</style>
</head>
<body>
<p>First paragraph<p>
<p>Second paragraph<p>
<p id="special-para">Third paragraph (with ID)<p>
<p>Fourth paragraph<p> (add a few more paragraphs like these…)
</body>
</html>
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
21
The display Property
In the first class we stated that elements can be classified as:
Block elements, which stack on top of each other vertically and use up the entire width of their parent
Inline elements, which line up horizontally one after the other as long as there is space on the current
“line” of elements
This is known as the display property
Default values depend on the element:
p, blockquote, section, etc. have the default display property value of block
img, a, span, etc. have the default display property value of inline
You can change the value of the display property
Another value you can use is none – making this element, and all its children to be removed from the
display, together with the space they occupy (as if they never existed in the HTML).
Another property, {visibility:hidden;} achieves a similar outcome, except that in this case the space is
maintained
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
22
Backgrounds
Every element’s box has two layers:
Foreground, which is taken up by the
actual contents of the element
Background, which can be set to a color
and an image
Here is a tri-dimensional model of how
this works
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
23
Background styling
{background-color:red;} – sets the background of the box to the specified color
{background-image:url(photo.jpg);} – lays the photo specified on top of the background color
If the photo is smaller than the box, the image is repeated left to right, then down, to fill the box, very
much like tiling a wall
On the right and bottom edges, the image may be truncated
You can change that by setting:
{background-repeat:repeat-x;} to repeat the image only horizontally (in effect creating a fancy top border)
{background-repeat:repeat-y;} to repeat the image only vertically (in effect creating a fancy left border)
{background-repeat:norepeat;} to not repeat the image at all (in effect creating a corner image)
{background-repeat:round;} to resize the image such that it will fill the box in complete rows and columns of the image
{background-repeat:space;} to space the repeated images such that they distribute evenly across both dimensions of the box
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
24
Background Position
The background-position property defines the origin point of the image used as background,
relative to the element, using two properties
For horizontal positioning, use right, left, or center
For vertical positioning, use top, bottom, or center
By default, the element and the image are aligned top left (i.e., the tiling begins from the top
left corner, and continues right and down)
The order of the words is interchangeable (top left is the same as left top)
center center can be abbreviated as center
You can also use numbers to place the first tile at the given offset from the top left corner
You can also use % values (too complicate to make it worthwhile)
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
25
Background Position Examples
Here is the outcome of different background-position values using a blue circle as the
background image.
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
26
Background Size
When you use an image as a background, the image file
has an implicit size in pixels, and that is the size used for
tiling the box.
You can also specify different values for image size:
{background-size: 50%;} – sets the size to fill 50% of the box
{background-size: 100px 50px;} – sets the size as specified
{background-size: cover;} – sets the size to fill the box
{background-size: contain;} – sets the size so that the image
fits inside the box
Obviously, some of these values make more sense for
no repeat backgrounds
The image to the right shows the effect of these size
settings on a no repeat centered background image
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
27
Background Attachment
By default, when you scroll a browser window, any backgrounds move with the scroll
You can change that by setting the background-attachment property to fixed
{background-attachment;fixed;} will keep the image in place while you are scrolling the contents
It probably makes sense for the background of the entire body (it may look funny for a smaller box)
All background properties can be shorthanded in a single rule, like this:
body {background: url(watermark.jpg) center #fff no-repeat contain fixed;}
Unspecified properties obviously take the default value
There are a few other background related properties, but thay are relatively new, nor widely
supported, and somewhat complex, so we will skip over them
In the textbook you can skip the remainder of chapter 3 starting with the heading “Other CSS3
Background Properties”.
CHARLES WYKE-SMITH: STYLIN’ WITH CSS: A DESIGNER’S GUIDE (3ND EDITION)
28
