Chapter 2 – Part II

Think of it like an egg:

The yolk is the content

The albumen is the padding

The shell is the border

The margin is how far the egg

is from anything else (another
tiny egg, perhaps)
  Content
 Text & web
page
elements in
the container
Margin Border  Padding
 Area
between the
content and
the border
Padding  Border
 Between the
padding and
Content the margin
 Margin
 Determines
the empty
space
between the
element and
adjacent
elements
 When using quirks
mode (pages with
no DOCTYPE or
with a HTML 4
Transitional
DOCTYPE), Internet
Explorer violates the
box model standard

4
 position: defines the positioning of the element in
the page content flow
 Positioning refers to the layout of the items on
your page.
 The value is one of:
 static (default)
 relative – relative position according to where
the element would appear with static position
 absolute – position according to the innermost
positioned parent element
 fixed – same as absolute, but ignores page
scrolling

5
Left to Right, Top to Bottom
Top left of the page = (0,0)

Left to Right, Top to Bottom

The pink box is the container (more on this)

This is a paragraph to If the next paragraph fits next

which I have set the width. to it on the right, it will line up.
This is a paragraph to However, if the second paragraph is
which I have set the width. too wide to fit the container, it will
shift down.
This is a paragraph to
which I have set the width.

However, if the second paragraph is

too wide to fit the container, it will
shift down.

This is the basic principle of Normal Flow

 Browser display of elements in the order they
are coded in the Web page document
All of the items in your webpage generate invisible “boxes” – you have to figure
out how all of those boxes will fit into your page, like a puzzle.

Image with
Small print
link Image
text, bullet list

Set of links
(navigation)

Regular text
 When you want to do fancier
 Absolute layout, you can position “boxes”
 Relative or “containers.” By doing this,
 Float you interrupt the normal (top to
bottom, left to right) flow. You
can do this in three ways; Float,
Absolute, and Relative.
HTML
<div>
<p> This is the This is the normal This text is floated
normal…</p> flow of a document; right.
<p class=“float”>This text from top to bottom,
is floated right.</p> left to right. When the floated text is added, it
moves to the top right corner of the containing
</div> element, in this case the <div>. Normal text
flows around the floated text.

CSS
.float {float:right;}
HTML
<div>
<p> This is the normal… This is the normal flow of a
<span class=“abs”> This text document; from top to bottom, left
is absolutely
positioned.</span>…top to
to right. When you add the
bottom… </p> absolutely positionedThis text
text, itis
absolutely
</div> moves to the coordinates you set
positioned.
based on the top left corner of the
containing element, in this case
the <div>. Normal text flows
over the absolutely positioned
CSS text. There is no gap where the
.abs {position: absolute; text is taken from.
top: 40px;
left: 80;}
 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;
}

16
 This text is relatively
positioned.

HTML
<div> This is the normal flow of a document; This
text is relatively positioned from top to
<p> This is the normal…
bottom, left to right. When you add the
<span class=“rel”> This text is
relatively positioned text, it moves to the
relatively positioned.
coordinates you set based on the top left
</span> … from top to
corner of the containing element, in this case
bottom…</p>
the <div>. Normal text flows as normal, but
</div> a gap is left where the relative text used to be,
and the text overlaps with the newly
positioned relative text if they are in the same
area.

CSS
.rel {position: relative;
top: -50px;
left: -150px}
 Changes the location of
h1 { background-color:#cccccc; an element in relation
padding:5px; to where it would
color: #000000; otherwise appear
}
#myContent { position: relative;
left:30px;
font-family:Arial,sans-serif;
}

19
 Margin VS relative positioning
 Fixed and absolutely positioned elements do
not influence the page normal flow and usually
stay on top of other elements
 Their position and size is ignored when calculating
the size of parent element or position of surrounding
elements
 Overlaid according to their z-index
 Inline fixed or absolutely positioned elements can
apply height like block-level elements

20
  Elements that seem
to “float" on the
h1 { background-color:#cccccc; right or left side of
padding:5px; either the browser
color: #000000; window or another
} element are often
p { font-family:Arial,sans-serif; configured using
} the float property.
#yls {float:right;
margin: 0 0 5px 5px;
border: solid;
} 21
 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>.

22
 Modifies the stacking
order of elements on
a Web page.

 The default z-index

value is “0".

 Elements with higher

z-index values will
appear stacked on top
of elements with
lower z-index values
rendered on the same
area of the page.

23
  top, left, bottom, right: specifies offset of
absolute/fixed/relative positioned element as
numerical values
 z-index : specifies the stack level of
positioned elements
 Understanding stacking context

Each positioned element creates a stacking

context.
Elements in different stacking contexts are
overlapped according to the stacking order
of their containers. For example, there is no
way for #A1 and #A2 (children of #A) to be
placed over #B without increasing the z-
index of #A. 24
 vertical-align: sets the vertical-alignment of
an inline element, according to the line height
 Values: baseline, sub, super, top, text-top,
middle, bottom, text-bottom or numeric
 Also used for content of table cells (which apply middle
alignment by default)

25
 Size properties (width, height, min-
width, etc.) are ignored for inline boxes
 margin-top and margin-bottom are
ignored,
 but margin-left and margin-right are not
ignored

26
 the containing block box's text-align
property controls horizontal position of inline
boxes within it
 text-align does not align block boxes within the
page
 each inline box's vertical-align property
aligns it vertically within its block box

27
property description
specifies where an inline element
should be aligned vertically, with
vertical-align respect to other content on the
same line within its block
element's box

 can be top, middle, bottom, baseline (default),

sub,
super, text-top, text-bottom, or a length value or
%
 baseline means aligned with bottom of non-hanging
letters
28
<p style="background-color: yellow;">
<span style="vertical-align: top; border: 1px solid
red;">
Don't be sad! Turn that frown
<img src="images/sad.jpg" alt="sad" /> upside down!
<img style="vertical-align: bottom“
src="images/smiley.jpg" alt="smile" />
Smiling burns calories, you know.
<img style="vertical-align: middle"
src="images/puppy.jpg" alt="puppy" /> Anyway, look at this
cute puppy; isn't he adorable! So cheer up, and have a
nice day. The End.
</span>
</p> HTML

29
30
 <p style="background-color: red; padding: 0px; margin: 0px">
<img src="images/smiley.png" alt="smile" />
</p> HTML

 red space under the image, despite padding and margin of 0

 this is because the image is vertically aligned to the baseline of
the paragraph (not the same as the bottom)
 setting vertical-align to bottom fixes the problem (so does
setting line-height to 0px) 31
 float: the element “floats” to one side
 left: places the element on the left and following
content on the right
 right: places the element on the right and following
content on the left
 floated elements should come before the content that
will wrap around them in the code
 margins of floated elements do not collapse
 floated inline elements can apply height

32
img.headericon {
float: right; width: 130px;
} CSS

Ghostbusters is a 1984 American science fiction comedy

film written by co-stars Dan Aykroyd and Harold Ramis
about three eccentric New York City
parapsychologists-turned-ghost capturers.

output

property description
side to hover on; can be left, right, or
float
none (default)

 removed from normal document flow; underlying text

wraps around as necessary
33
CS380 34
 often floating block elements must have a
width property value
 Let’s try “floating”
35
 clear
 Sets the sides of the element where other floating
elements are NOT allowed
 Used to "drop" elements below floated ones or
expand a container, which contains only floated
children
 Possible values: left, right, both
 Clearing floats
 additional element (<div>) with a clear style

36
p { background-color: fuchsia; }
h2 { clear: right; background-color: yellow; }
CSS

Mario
Mario isis aa fictional
fictional character
character in
in his
his video
video game
game series.
series.
Serving
Serving asas Nintendo's
Nintendo's mascot
mascot and
and the
the main
main protagonist
protagonist of
of
thethe series,
series, Mario
Mario hashas appeared
appeared in in over
over 200
200 video
video games
games since
since his his creation.
creation

Super Mario Fan Site!

CS380
output

37
property description
disallows floating elements
from overlapping this
clear element;
can be left, right, or none
(default)

38
div#sidebar { float: right; }
p { clear: right; } CSS

39
 Clearing floats (continued)
 :after { content: ""; display: block;
clear: both; height: 0; }
 Triggering hasLayout in IE expands a container of
floated elements
 display: inline-block;
 zoom: 1;

40
1. If possible, lay out an element by aligning its
content
 horizontal alignment: text-align
 set this on a block element; it aligns the content within it
(not the block element itself)
 vertical alignment: vertical-align
 set this on an inline element, and it aligns it vertically
within its containing element
2. If alignment won't work, try floating the element
3. If floating won't work, try positioning the element
 absolute/fixed positioning are a last resort and should
not be overused

41
 opacity: specifies the opacity of the element
 Floating point number from 0 to 1
 For old Mozilla browsers use –moz-opacity
 For IE use filter:alpha(opacity=value) where
value is from 0 to 100; also, "binary and script
behaviors" must be enabled and hasLayout must be
triggered, e.g. with zoom:1

42
 visibility
 Determines whether the element is visible
 hidden: element is not rendered, but still occupies
place on the page (similar to opacity:0)
 visible: element is rendered normally

43
 display: controls the display of the element
and the way it is rendered and if breaks should
be placed before and after the element
 inline: no breaks are placed before and after
(<span> is an inline element)
 block: breaks are placed before AND after the
element (<div> is a block element)

44
h2 { display: inline; background-color: yellow; }
CSS

output

property description
sets the type of CSS box
display model an element is
displayed with
 values: none, inline, block, run-in,
compact, ...
 use sparingly, because it can radically alter the page
layout 45
p.secret {
visibility: hidden;
} CSS

output

 hidden elements will still take up space onscreen, but

will not be shown
 to make it not take up any space, set display to none instead
 can be used to show/hide dynamic HTML content on
the page in response to events

46
<ul id="topmenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul> HTML

#topmenu li {
display: inline;
border: 2px solid gray;
margin-right: 1em;
} CSS

output

 lists and other block elements can be displayed inline

 flow left-to-right on same line
 width is determined by content 47
 display: controls the display of the element
and the way it is rendered and if breaks should
be placed before and after the element
 none: element is hidden and its dimensions are not
used to calculate the surrounding elements
rendering (differs from visibility: hidden!)
 There are some more possible values, but not all
browsers support them
 Specific displays like table-cell and table-row

48
<p><img src="images/mario.png" alt=“super mario" />
Mario is a fictional character in his video game
series.....</p> HTML

p { border: 2px dashed black; }

img { float: right; } CSS

Mario is a fictional character in his video game series.

Serving as Nintendo's mascot and the main protagonist
of the series, Mario has appeared in over 200 video
games since his creation.

output49
p { border: 2px dashed black;
overflow: hidden; } CSS

Mario is a fictional character in his video game series.

Serving as Nintendo's mascot and the main protagonist
of the series, Mario has appeared in over 200 video
games since his creation.

output

50
property description
specifies what to do if an
element's content is too
overflow large;
can be auto, visible, hidden,
or scroll

51
 overflow: defines the behavior of element when
content needs more space than you have specified
by the size properties or for other reasons. Values:
 visible (default) – content spills out of the
element
 auto - show scrollbars if needed
 scroll – always show scrollbars
 hidden – any content that cannot fit is clipped

52
<html>
<head>
<title>My Resume</title>
<link href=“home.css" rel="stylesheet"
type="text/css">
</head>
<body>
<div id="container">
Content goes here
</div>
</body>
</html>
HTML
#container
#banner

#nav #content

#footer
<body>
<div id="container">
<div id="banner"><img src="pic.jpg" /></div>
<div id="nav">
<span><a href="home.htm">home</a></span>
<span><a href="contact.htm">contact</a></span>
</div>
<div id=“content">
<h1>My Resume</h1> HTML
<p>Resume text</p>
</div>
<div id=“footer”>Copyright info here</div>
</div>
</body>
body {
font-size: 1em; }
#container {
width: 920px; }
#banner {
width: 920px; height: 120px; }
#nav {
float: left; width: 200px; }
#content { CSS
width: 720px; }
#footer {
font-size: .8em; }
Example :
https://www.youtube.com/watch?v=Xb0yIAxYv10
Except for imagelogo, all elements
on this page follow normal flow
 wrapper contains the two columns – sets default background color

 Left-column navigation
 float: left;
 width:100px;

 Right-column content
 margin-left: 100px;

 floatright (flower photo)

 float: right;

58
body {margin:0;
font-family:Verdana, Arial, sans-
serif; }
#wrapper { background-color:#e8b9e8;
color:#000066; }
#leftcolumn { float:left;
width:100px; }
#rightcolumn { margin-left:100px;
background-color:#ffffff;
color:#000000; }
#logo { background-color:#eeeeee;
color: #cc66cc;
font-size:x-large;
border-bottom: 1px solid #000000;
padding:10px; }
.content {padding:20px 20px 0 20px; }
#floatright {margin:10px;
float:right; }
.footer {font-size:xx-small;
text-align:center;
clear:right;
padding-bottom:20px; }
.navBar{ text-decoration:none;
margin: 15px;
display:block; }

59
 cursor: specifies the look of the mouse cursor
when placed over the element
 Values: crosshair, help, pointer, progress,
move, hair, col-resize, row-resize, text, wait,
copy, drop, and others
 white-space – controls the line breaking of
text. Value is one of:
 nowrap – keeps the text on one line
 normal (default) – browser decides whether to brake
the lines if needed

60
 More powerful formatting than using
presentation tags
 Your pages load faster, because browsers
cache the .css files
 Increased accessibility, because rules can be
defined according given media
 Pages are easier to maintain and update

61