Web Authoring: Using Cascading Style Sheets

1
Web AuthoringUsing Cascading Style Sheets

• ITNW 6030

2
IntroductionsWhat is your name?What is your
experience with web design? What is your
experience with CSS? Is there anything specific
you would like to make sure we cover? Class
Structure Housekeeping 
3
Going the Extra Mile Absolute Relative
PositioningWithin CSS you can position where
items will appear in the browser.  This is done
by either one of two ways.  An absolute
position, where you are defining exactly where
within the browser that the item should
appear.  A relative position, where an item is
placed within the browser based on its
relationship to another item already in the
browser output.  
4
Going the Extra Mile Absolute Positioning  If
you position an element (an image, a table, or
whatever) absolutely on your page, it will appear
at the exact pixel you specify. Say I wanted a
graphic to appear 46 pixels from the top of the
page and 80 pixels in from the right, I could do
it. The CSS code you'll need to add into the
image is img position absolute top 46px
right 80px  You can add the CSS directly
into the tag using the style attribute, or you
can use classes and ids and put them into your
stylesheet.   
5
Going the Extra Mile Relative Positioning  When
you position something relatively, you are
modifying its position from where it would have
been if you hadn't changed anything. ltspan
style"position relative top 12px left
22px"gtsome wordslt/spangt
6
Going the Extra Mile z-index  When using
relative or absolute positioning you can aslo use
z-index. The z-index property refers to the
'stacking order' of an element - enabling the
items with a greater stack order to appear 'on
top of' items with a lower stack
order. imgpositionabsoluteleft0pxtop0p
xz-index10
imgpositionabsoluteleft0pxtop0pxz-inde
x5
would  appear  'above'

7
Going the Extra Mile Working with Lists  The
display property is used to define an element
with one of four values block (a line break
before and after the element)inline (no line
break before and after the element)none (no
display)  Each element typically is given a
default display value by the browser, based on
suggested rendering in the HTML
specification. The display property can be
dangerous because of its ability to display
elements in what would otherwise be an improper
format. The use of the value none will turn off
display of the element to which it is assigned,
including any children elements.
8
Going the Extra Mile Working with Lists  The
white-space property will determine how spaces
within the element are treated. This property
takes one of three values normal (collapses
multiple spaces into one)pre (does not collapse
multiple spaces)nowrap (does not allow line
wrapping without a ltBRgt tag)
9
Going the Extra Mile Working with Lists  The
list-style-type property specifies the type of
list-item marker, and is used if list-style-image
is none or if image loading is turned
off.ExamplesLI.square list-style-type
square  UL.plain  list-style-type none
 OL        list-style-type upper-alpha   /
A B C D E etc. /  OL OL     list-style-type
decimal       / 1 2 3 4 5 etc. /  OL OL OL 
list-style-type lower-roman   / i ii iii iv v
etc. /
10
Going the Extra Mile Working with Lists  The
list-style-image property specifies the image
that will be used as list-item marker when image
loading is turned on, replacing the marker
specified in the list-style-type
property.Examplesul.check
list-style-image url(/li-markers/checkmark.gif)
 ul li.special  list-style-image
url(special.png)
11
Going the Extra Mile Working with Lists  The
list-style-position property takes the value
inside or outside, with outside being the
default. This property determines where the
marker is placed in regard to the list item. If
the value inside is used, the lines will wrap
under the marker instead of being indented. 
12
Going the Extra Mile Working with Lists
Syntax     list-style ltvaluegtPossible
Values     ltlist-style-typegt
ltlist-style-positiongt lturlgtInitial Value    
Not definedApplies to     Elements with display
value list-itemInherited     YesThe
list-style property is a shorthand for the
list-style-type, list-style-position, and
list-style-image properties.ExamplesLI.square
list-style square inside   UL.plain 
list-style none   UL.check  list-style
url(/LI-markers/checkmark.gif) circle  
OL        list-style upper-alpha   OL
OL     list-style lower-roman inside  
13
Going the Extra Mile Working with Tables
TABLEborder-width (px)   1px 2px 3px 4px 5px
thin medium thick 0pxborder-spacing     2px 1px
3px 4px 5px 0pxborder-style   outset none hidden
dotted dashed solid double ridge groove
insetborder-color   gray white blue green black
red customborder-collapse   separate
collapsebackground-color   white FFFFF0 FAF0E6
FFF5EE FFFAFA custom TD/THborder-width (px)
    1px 2px 3px 4px 5px thin medium thick
0pxpadding     1px 2px 3px 4px 5px
0pxborder-style     inset none hidden dotted
dashed solid double ridge groove
outsetborder-color     gray white blue green
black red custombackground-color     white
FFFFF0 FAF0E6 FFF5EE FFFAFA custom
14
Going the Extra Mile The Box Model To
understand positioning in CSS you must first
understand the box model. For display purposes,
every element in a document is considered to be a
rectangular box which has a content area
surrounded by padding, a border and margins. The
illustration below shows these various parts. 
15
Going the Extra Mile The Box Model Margins are
always transparent. Borders come in various
styles. Background settings for an element apply
to the the area just inside the borders which
includes both the padding and content
areas. Margins, borders and padding are all
optional but for purposes of calculating
positions and sizes they are given a default
width of zero if not specified. Different widths
can be set for each individual side (top, right,
bottom and left) if desired. Margins can even
have negative values. The width and height of
each box is equal to the width and height of the
outer margin box. Note that this is not the
necessarily the same as the width and height of
the content area. A box can contain any number
of other boxes, creating a hierarchy of boxes
that corresponds to the nesting of page elements.
The browser window serves as the root element for
this hierarchy. 
16
Going the Extra Mile Box Types There are two
basic types of boxes, block and inline. Block
boxes are generated by elements such as P, DIV or
TABLE. Inline boxes are generated by tags such as
B, I or SPAN and actual content like text and
images. The box type may also be set using the
display property. Setting a value of block on an
inline element, for example, will cause it to be
treated as a block element. Note that if you set
the display to none, no box is created. The
browser acts as if the element did not exist.
Likewise, any nested elements are ignored as
well, even if they specifically declare some
other display value. There are other types of
boxes which apply to special elements like lists
and tables. However, these are ultimately treated
as block or inline boxes for positioning
purposes. As such, these other box types not
covered here.  
17
Going the Extra Mile Containing Boxes Block
boxes act as a containing block for any boxes
within them. For example, in this codeltdivgt
This is the first sentence. ltpgtThis is the
second sentence.lt/pgt lt/divgt the DIV element
establishes a containing block for both the first
string of text and the P element. The P element
in turn creates a containing block for the second
text string. 
18
Going the Extra Mile Containing Boxes While
the text of the first sentence generates an
inline box, there is considered to be block box
surrounding it. These "anonymous" block boxes are
used to simplify the positioning process. The
result is that a block box will only contain
either all inline boxes or all block boxes, even
if some of those block boxes only act as a
wrapper for an inline box.  This containing
block is used in determining both the position of
the boxes within it and in some cases, the
dimensions of those boxes. For example, if an
element has a style setting of width50 its
width will be set to half the width of its
containing block. 
19
Going the Extra Mile Creating space Elements
in an html document can be styled with attributes
affecting the alignment or spacing to other
elements. There is the normal flow of items - and
there are additional attributes that can be
styled.   
width height float clear padding margin border
20
Going the Extra Mile Creating space - width
Each block-level or replaced element can be
given a width, specified as a length, a
percentage, or as auto. (A replaced element is
one for which only the intrinsic dimensions are
known HTML replaced elements include IMG, INPUT,
TEXTAREA, SELECT, and OBJECT.) The initial value
for the width property is auto, which results in
the element's intrinsic width (i.e., the width of
the element itself, for example the width of an
image). Percentages refer to the parent element's
width. Negative values are not allowed. This
property could be used to give common widths to
some INPUT elements, such as submit and reset
buttons. input.button width 120px  
21
Going the Extra Mile Creating space - height
Each block-level or replaced element can be
given a height, specified as a length or as auto.
(A replaced element is one for which only the
intrinsic dimensions are known HTML replaced
elements include IMG, INPUT, TEXTAREA, SELECT,
and OBJECT.) The initial value for the height
property is auto, which results in the element's
intrinsic height (i.e., the height of the element
itself, for example the height of an image).
Negative lengths are not allowed. As with the
width property, height can be used to scale an
image img.announce width 60px height
40px In most cases, authors are advised to
scale the image in an image editing program,
since browsers will not likely scale images with
high quality, and since scaling down causes the
user to download an unnecessarily large file. 
22
Going the Extra Mile Creating space - float
The float property allows authors to wrap text
around an element. This is identical in purpose
to HTML 3.2's ALIGNleft and ALIGNright for the
IMG element, but CSS1 allows all elements to
"float," not just the images and tables that
HTML 3.2 allows. 
23
Going the Extra Mile Creating space - clear
The clear property specifies if an element
allows floating elements to its sides. A value of
left moves the element below any floating element
on its left right acts similarly for floating
elements on the right. Other values are none,
which is the initial value, and both, which moves
the element below floating elements on both of
its sides.  footer clearboth  
24
Going the Extra Mile Creating space - padding
The padding-top property describes how much
space to put between the top border and the
content of the selector.  The padding-right
property describes how much space to put between
the right border and the content of the
selector. The padding-bottom property describes
how much space to put between the bottom border
and the content of the selector.  The
padding-left property describes how much space to
put between the left border and the content of
the selector.  The value is either a length or
a percentage. Percentage values refer to the
parent element's width. Negative values are  not
permitted.
25
Going the Extra Mile Creating space - padding
The padding property is a shorthand for the
padding-top, padding-right, padding-bottom, and
padding-left properties.Between one and four
values are given, where each value is either a
length or a percentage. Percentage values refer
to the parent element's width. Negative values
are not permitted. If four values are given,
they apply to top, right, bottom, and left
padding, respectively. If one value is given, it
applies to all sides. If two or three values are
given, the missing values are taken from the
opposite side. For example, the following rule
sets the top padding to 2em, the right padding to
4em, the bottom padding to 5em, and the left
padding to 4emBLOCKQUOTE padding 2em 4em 5em

26
Going the Extra Mile Creating space - margin
The margin-top property describes how much
space to clear beyond the top border.  The
margin-right property describes how much space to
clear beyond the right border. The
margin-bottom property describes how much space
to clear beyond the bottom border.  The
margin-left property describes how much space to
clear beyond the left border.  The value is
either a length or a percentage. Percentage
values refer to the parent element's width.
Negative values are permitted.
27
Going the Extra Mile Creating space - margin
The margin property is a shorthand for the
margin-top, margin-right, margin-bottom, and
margin-left properties.Between one and four
values are given, where each value is either a
length or a percentage. Percentage values refer
to the parent element's width. Negative values
are permitted. If four values are given, they
apply to top, right, bottom, and left margin,
respectively. If one value is given, it applies
to all sides. If two or three values are given,
the missing values are taken from the opposite
side. For example, the following rule sets the
top and bottom padding to 2em, the right and left
padding to 4em BLOCKQUOTE margin 2em 4em
28
Going the Extra Mile Creating space - border
The border-top property describes the width,
style, and color of an element's top
border. The border-right property describes the
width, style, and color of an element's right
border.The border-bottom property describes the
width, style, and color of an element's bottom
border. The border-left property describes the
width, style, and color of an element's left
border. p border-top 5px solid red
29
Going the Extra Mile Creating space - border
The border-width property is used to set the
border width of an element by specifying between
one and four values, where each value is a
keyword or a length. Negative lengths are not
permitted. If four values are given, they apply
to top, right, bottom, and left border width,
respectively. If one value is given, it applies
to all sides. If two or three values are given,
the missing values are taken from the opposite
side. This property is a shorthand for the
border-top-width, border-right-width,
border-bottom-width, and border-left-width
properties.
30
Going the Extra Mile Creating space - border
The border-style property specifies what type
of border to use. Keep in mind - none of the
other border properties will be displayed unless
border-style is set.
31
Going the Extra Mile Creating space - border
The border-color property sets the color of an
element's border. Between one and four color
values are specified. If four values are given,
they apply to top, right, bottom, and left border
color, respectively. If one value is given, it
applies to all sides. If two or three values are
given, the missing values are taken from the
opposite side.  
32
Going the Extra Mile Creating space - border
The border property is a shorthand for setting
the width, style, and color of an element's
border.  H2 border groove 3em Alink
border solid blue Avisited border thin
dotted 800080 Aactive border thick double
red  The border property can only set all
four borders only one border width and border
style may be given.  To give different values
to an element's four borders, an author must use
one or more of the border-top, border-right,
border-bottom, border-left, border-color,
border-width, border-style, border-top-width,
border-right-width, border-bottom-width, or
border-left-width properties.
33
Going the Extra Mile ReviewAbsolute and
relative positioningz-indexinline vs.
blockWorking with ListsWorking with TablesBox
Model
34
Implementation
35
Implementation Creating menus Vertical
Navigation Why use a List? At its most basic
level, site navigation is simply a list of
related items - or links to other pages - in the
site. So, a standard HTML list is the ideal
starting point.  ltul id"navigation"gtltligtHome
lt/ligtltligtAbout lt/ligtltligtServiceslt/ligtltligtStafflt
/ligtltligtPortfoliolt/ligtltligtContactlt/ligtltligtSitem
aplt/ligtlt/ulgt
36
Implementation Creating menus Styling the List
To style the list, you will need to use
selectors that target the ltulgt, ltligt, and ltagt
elements. To make sure you do not target every
instance of these elements on the page, you will
need to include the unique identifier,
navigation, within each selector. Here are some
of the selectors you can use. ulnavigation
...ulnavigation a ...ulnavigation ahover
...ulnavigation li ...
37
Implementation Creating menus Styling the ltulgt
element Most browsers display HTML lists with
left indention. To set this indentation, some
browsers use padding and others use margins. To
remove the left indention consistently across all
browsers, set both padding-left and margin-left
to 0 on the   ltulgt element. ulnavigation
margin-left 0padding-left 0
38
Implementation Creating menus To remove the
list bullets, set the list-style-type to
none. ulnavigation margin-left
0padding-left 0list-style-type none
39
Implementation Creating menus Styling the ltagt
Element Text links are generally only active
when you mouse over the actual text area. You can
increase this active area by applying display
block to the ltagt element. This will change it
from inline to block level and the active area
will extend to the full width of the list item.
To remove the underlines from the links, use
text-decoration none . ulnavigation a
display blocktext-decoration none
40
Implementation Creating menus To set the
background color you can use the shorthand rule
background 036 . This color can be changed to
set your needs.  ulnavigation a display
blocktext-decoration nonebackground 036
41
Implementation Creating menus To set a padding
for an ltagt element you can use a shorthand
declaration. For example if we want a .2 em top
padding and .5em bottom padding. This will give
the user a bigger area in which to select the
link.  ulnavigation a display
blocktext-decoration nonebackground
036padding .2em .5em
42
Implementation Creating menus Setting Border
To provide some space in between the list items,
you can add a border on the bottom of each list
item you can use border-bottom 1px solid
fff This color of fff will help distinguish
the different links.  ulnavigation a
display blocktext-decoration
nonebackground 036padding .2em
.5emborder-bottom 1px solid fff
43
Implementation Creating menus You can set the
width of the ltagt element by adding width 6em to
your code. Of course this width can be changed to
suit your needs.  ulnavigation a display
blocktext-decoration nonebackground
036padding .2em .5emborder-bottom 1px
solid fffwidth 6em
44
Implementation Creating menus Adding A Hover
Effect To this set the background to 69C and
the color to 000 to  ulnavigation ahover
...ulnavigation ahover background
69Ccolor 000
45
Implementation Creating menus Styling the ltligt
element  You might notice there are some slight
gaps between the list items in some versions of
IE or Opera . This can be overcome by setting the
ltligt element to display inline.
46
Implementation Creating menus  Going
horizontal We will use the same code we have
been using and change the code in order to make
it horizontal.  ulnavigation
...ulnavigation a ...ulnavigation ahover
...ulnavigation li ... ltul
id"navigation"gtltligtHome lt/ligtltligtAbout
lt/ligtltligtServiceslt/ligtltligtStafflt/ligtltligtPortfol
iolt/ligtltligtContactlt/ligtltligtSitemaplt/ligtlt/ulgt
47
Implementation Creating menus  To remove
indentation you can use ulnavigation
margin-left 0padding-left 0    To
remove the list bullets, set the list-style-type
to none. ulnavigation margin-left
0padding-left 0list-style-type none 
48
Implementation Creating menus  Add a
background ulnavigation margin-left
0padding-left 0list-style-type
nonebackground 036 
49
Implementation Creating menus  To float the
ltulgt, use float left. You will also need to set
a width. In this case, we will use 100 because
we want the list to spread across the full width
of the page.  ulnavigation margin-left
0padding-left 0list-style-type
nonebackground 036float leftwidth
100 
50
Implementation Creating menus  Styling The
ltligt Element To make sure the list items are
displayed in a single line, the ltligt element must
be set to display inline .  ulnavigation li
display inline  
51
Implementation Creating menus  Styling the ltagt
Element You can increse the active area of text
links by applying display block to the ltagt
element. This will change it from inline to block
level and allow you apply padding to all sides of
the element.  Set the ltagt element to display
block so that padding can be applied to all
sides. This will give the element additional
width and height, increasing the clickablae
area.  The ltagt element should then floated, so
that each list item moves into a sing line
butting againg the previous item.  ulnavigation
a display blockfloat left 
52
Implementation Creating menus  Styling the ltagt
Element Next add some padding using the padding
delcaration. You can use .2em for top and bottom
padding and 1em for left and right
padding.  ulnavigation a display
blockfloat leftpadding .2em .9em 
53
Implementation Creating menus  Styling the ltagt
Element To seperate each list item , a white
line divider will be added to the end of each
item This is done by adding a white border to the
right side of each list item, using border-right
1px solid fff .  ulnavigation a display
blockfloat leftpadding .2em
.9emborder-right 1px solid fff 
54
Implementation Creating menus  Styling the ltagt
Element Adding A Hover Effect To this set the
background to 69C and the color to 000
to  ulnavigation ahover ...ulnavigation
ahover background 69Ccolor 000 
55
Implementation Page layouts  CSS layout uses
style sheets to define the placement of elements
on a web page. Typically CSS layout replaces
tables, which are currently the most popular
method of placing page elements.  CSS allows
you to separate the structure and presentation of
documents. The separation of structure and
presentation is a principle that governs (or
should govern) all markup languages, such as
HTML. HTML is intended to structurally organize
the content of a document so that it's clear what
the conceptual relationship is between various
portions of a document. The markup language is
NOT intended to define the display of the
document, although display and structure are
often tightly connected.
56
Implementation Page layouts  The separation of
structure and presentation results in the
following benefits A semantic web the future
of web documents and the definition of well
structured markup open to all audiences Ease
of redesign Degradable code making sure your
code works on older browsers.
57
Implementation Page layouts  The separation of
structure and presentation results in the
following issues Layout limitations there are
strengths and weaknesses to css layouts, just as
there are with tables based layouts Differences
in browser display Switching from tables to css
58
Implementation Page layouts  Absolute
Positioning position absolute    top
30px  / 30 pixels from the top of the page
/    left 80px  / 80 pixels from the left
hand side /    width 100px  / Always set a
width for absolute positioned block level
elements, such as divs /    border 1px solid
red / So we can see what is happening /   
The key things to note are that a width is,
while not required, a very good idea, and that
you can use any pair of positioning properties.
You could, for example, use top 30px and right
10px to have an element appear in the top right
hand corner of the screen.Technically you can
use both a right and a left property and leave
the width as auto. But unfortunately IE does not
support this. 
59
Implementation Page layouts  Relative
Positioning position relative    top
30px  / 30 pixels from the top of the page
/    left 80px  / 80 pixels from the left
hand side /    border 1px solid red / So we
can see what is happening /    The main thing
to keep in mind with relative positioning is that
you are modifying the position of the element
relative to where it would have been otherwise.
60
Implementation Page layouts  Absolute
Positioning Using position absolute, simple
but powerful layouts of both two and three
columns can be easily achieved. The key trick to
creating layouts with absolute positioning is
that you do not need to use position absolute on
everything. Instead, you can create space on the
page by applying margins, then use absolute
positioning to "fill" that space.
61
Implementation Page layouts  2 Column Layout -
absolute positioningdivmain margin-left 20
/ Create space on the page for the menu /   
divmenu     position absolute    top
1em    left 1   width 17      / Must be
less than 20 or the menu may overlap the content
/      ltdiv id"main"gt  ltpgtSome Content
goes herelt/pgt  ltpgtcontent goes herelt/pgt 
ltpgtcontent goes herelt/pgt  lt/divgt    ltdiv
id"menu"gt  ltpgtthe menult/pgt  lt/divgt 
62
Implementation Page layouts  3 Column Layout -
absolute positioningdivmain margin-left
15  / Space for the left menu /
margin-right 15  / Space for the right menu
/      divmenu1 position absolute top
1em    left 1    width 13      divmenu2
position absolute    top 1em    right 1 
/ Because top and right are defined, appears in
top right/ width 13'     
63
Implementation Page layouts  3 Column Layout -
absolute positioning ltdiv id"main"gt 
ltpgtcontent goes herelt/pgt  ltpgtcontent goes
herelt/pgt  ltpgtcontent goes herelt/pgt 
lt/divgtltdiv id"menu1"gt  ltpgtthe left hand
menult/pgt  lt/divgt    ltdiv id"menu2"gt  ltpgtthe
right hand menult/pgt  lt/divgt 
64
Implementation Page layouts Watch out for
overlaps! The single biggest potential problem
with absolute positioning is that, if you aren't
careful, absolute positioned elements can overlap
unpositioned (or even other positioned) elements
on the page.
65
Implementation Page layouts Advantages of
Absolute Positioning Full control over where
elements are positioned on the page - much more
control than is possible with tables.The order
of the divs in the HTML source code doesn't
matter - once something is absolute positioned it
is "pulled out of the flow" of the document, so
it can be placed pretty much anywhere in that
document. This allows you to have your content
before your navigation structures, which is good
for accessibility and good for search engine
optimisation.Disadvantages of Absolute
Positioning Elements can end up overlapping if
due care is not taken - especially when the user
dramatically resizes the page.The footer
problem. If you have a layout which uses absolute
positioning for one of the columns, there is no
way of creating a footer that spans the whole of
the bottom of the page without risk of it being
overlapped by the absolutely positioned column
should that column be longer than the
non-positioned column.
66
Implementation Page layouts  Float basics -
What is a float?  When you float an element it
becomes a block box. This box can then be shifted
to the left or right on the current line. The
markup options are "float left", "float right"
or "float none".  A floated box is laid out
according to the normal flow, then taken out of
the flow and shifted to the left or right as far
as possible. Content can flow down the right side
of a left-floated box and down the left side of a
right-floated box.
67
Implementation Page layouts  
68
Implementation Page layouts  
69
Implementation Page layouts  
70
Implementation Page layouts  Where will a
floated element move to?  Floated boxes will
move to the left or right until their outer edge
touches the containing block edge or the outer
edge of another float.
71
Implementation Page layouts  
If there isn't enough horizontal room on the
current line for the floated box, it will move
downward, line by line, until a line has room for
it.  
72
Implementation Page layouts  Elements above
and below floated elements Block level elements
above a floated element will not be affected by
it. However, elements below will wrap around the
floated element 
73
Implementation Page layouts  Borders,
background images and background color While
content will wrap around a floated element,
border, background image and background color
will extend underneath. 
74
Implementation Page layouts  Floats and
"clear"Elements following a floated element will
wrap around the floated element. If you do not
want this to occur, you can apply the "clear"
property to these following elements. The four
options are "clear left", "clear right",
"clear both" or "clear none". clear left
The element is moved below the bottom outer edge
of any left-floating boxes that resulted from
elements earlier in the source document.  
75
Implementation Page layouts clear right The
element is moved below the bottom outer edge of
any right-floating boxes that resulted from
elements earlier in the source document. 
     
76
Implementation Page layouts   clear both The
element is moved below all floating boxes of
earlier elements in the source document.  
77
Implementation Basic Design Examples  
Basic Two Column
Basic Three Column
Basic Two Column with Header
Basic Three Column with Header
78
Implementation Floating a column to the right 
79
Implementation Floating a column to the
right Step 1 - Start with two paragraphs of
textFor this exercise, we want to force a
paragraph over to the right to allow the content
to flow alongside it. We also want to add margins
to the left and bottom sides of the column where
the paragraph will be held, to push the content
away. Finally, we want to add a border around the
column. We start with 2 paragraphs of text.
Insert the ltdivgt tags for the name column around
one of the paragraphs.   
80
Implementation Floating a column to the
right Step 2 - Apply float right to the
columnTo force the column over to the right
edge, "float right" is applied to the column
using an id selector. In this case, the name of
the id is "column" but any name can be used. A
width is needed in this instance as the column
needs to have direction in order to keep its size
or else the text would determine the size of the
div. column float right width 200px
 
81
Implementation Floating a column to the
right Step 3 - Add margin Margins can be added
to push the content away from the left and bottom
sides of the column. A single shorthand rule
can be used - "margin 0 0 10px 10px".  Keep
in mind that shorthand values are applied in a
clockwise order top, right, bottom, left.
 margin 0 0 10px 10px  
82
Implementation Floating a column to the
right Step 4 - Add a border To add a border to
the image, use "border 1px solid
666" border 1px solid 666  
83
Implementation Floating a column to the
right Step 5 - Add padding  If you want the
border to sit slightly off the edge of the image,
use padding.  padding 2px  
84
Implementation Floating a column to the
right Step 6 - Background color background-col
or 00B4DC 
85
Implementation Floating a column to the
right Final CSS CODEcolumnfloat
rightborder 1px solid 666padding
2pxbackground-color 00B4DCwidth
200pxmargin-top 0margin-right
0margin-bottom 10pxmargin-left 10px 
86
Implementation Liquid 2 Column Layout with
Header Footer  
87
Implementation Liquid 2 Column Layout with
Header Footer Step 1 - Start with the
semantically marked up code  To lay out a page
into two columns, you need to start with the
basic page structure. In this case we will use
some dummy content to create a two column
template. The page has been grouped into five
separate divs, and each of these div's has been
been given a unique ID selector. The divs are
labeled "containerex" (wrapped around the entire
page's content), "top" (for the top banner),
"leftnav" (for the smaller, left column),
"contentex" (for the main content) and "footer"
(for the footer across the bottom of the page).
 
88
Implementation Liquid 2 Column Layout with
Header Footer Step 2 - Add width and margin
to the container To get the content to sit in
from the edge of the browser window we need to
set width and margins on the main div that wraps
around the content. In this case we will use a
width of 90 so the CSS declaration used is
"width 90". Any width could be used, including
100, which would force the content to the left
and right edges of the viewport. To center the
div in the viewport, we apply "auto" margins to
left and right. To move the div away from the top
and bottom of the viewport we use a margin of
10px. These can be combined into one shorthand
CSS declaration "margin 10px auto". This will
apply a margin of 10px to the top and bottom and
auto margins to the left and right.  
89
Implementation Liquid 2 Column Layout with
Header Footer Step 2 - Add width and margin
to the container containerexwidth
90margin 10px auto Some browsers do not
support the auto left and right margins,
so...  body text-align center / this
centers the container in IE 5 browsers. The text
is then set to the left aligned default in the
container selector /
90
Implementation Liquid 2 Column Layout with
Header Footer Step 3 - Add color, background
color and border To add color and background
color to the main div, use "background-color
fff" and "color 333".  To apply a border
to the div, use "border 1px solid
gray".  containerexwidth 90margin
10px autobackground-color fffcolor
333border 1px solid gray
91
Implementation Liquid 2 Column Layout with
Header Footer Step 4 - Add line height  To
increase readability, you can increase the
overall line-height of text. If it is applied to
this main div, it will cascade down throughout
all divs below. The rule can be written as
"line-height 130".  line-height 130
92
Implementation Liquid 2 Column Layout with
Header Footer Step 5 - Styling the top banner
 To style the top div, we will set a background
color, padding and a border across the bottom.
The three declarations will be "padding .5em"
to add padding to the div, "background-color
ddd" to add a background color and
"border-bottom 1px solid gray" to apply a border
to the bottom of the div. toppadding
.5embackground-color dddborder-bottom 1px
solid gray
93
Implementation Liquid 2 Column Layout with
Header Footer Step 6 - Remove margins and
padding from the h1  Inside the top banner
there is an H1 tag. We want the words to sit .5em
in from the top and left edge of the div.
Browsers add different amounts of padding above
an H1, it is easiest to remove all padding and
margin from this H1 and let the div provide the
padding. This is achieved by using a descendant
selector - "top h1 padding 0 margin
0".  top h1padding 0margin 0
94
Implementation Liquid 2 Column Layout with
Header Footer Step 7 - Apply "float" to the
leftnav  To float the left nav, we need to use
the rule "leftnav float left". When a div
is set to float, a width must also be included,
so we can add another declaration "width
160px".  leftnavfloat leftwidth
160px
95
Implementation Liquid 2 Column Layout with
Header Footer Step 8 - Add margin and padding
to the leftnav  Next, we set the margin to "0",
add 1em of padding (which will move the text away
from the edges of the div).  margin
0padding 1em
96
Implementation Liquid 2 Column Layout with
Header FooterStep 9 - Setting margins to the
"content" div This next step is the most
important of the entire process. The "leftnav"
div has been floated, so text from the "content"
div will flow down its left edge and then wrap
around under it. To make the text appear as it is
in a new column, we apply margin-left to the
"content" div, making sure that the width is
greater than the overall width of the "leftnav"
div. In this case, we will use "margin-left
200px", which will give us 40px margin between
the leftnav and the main content.  We will also
apply a border to the left of the "content" div.
This could be a problem if the "leftnav" div is
longer than the main content. If this is the
case, the border can be applied to the right side
of the "leftnav" div instead of the "content"
div.  contentexmargin-left
200pxborder-left 1px solid gray
97
Implementation Liquid 2 Column Layout with
Header Footer  Step 10 - Add padding to the
"content" div  To add padding to the content
div use "padding 1em"padding 1em Step 11 -
Styling the footer To style the footer, we first
need to set it to "clear both". This is
critical, as it will force the footer below any
floated elements above. We then add
"padding.5em" and "margin 0" .  footerclea
r bothmargin 0padding .5em
98
Implementation Liquid 2 Column Layout with
Header Footer  Step 12 - Add color and
background color to the footer  To add color
and background color to the footer use the
following declarations "color 333" and
"background-color ddd"color
333background-color ddd Step 13 - Add a
border to the footer To add a border to the top
of the footer use "border-top 1px solid
gray" border-top 1px solid gray
99
Implementation Liquid 2 Column Layout with
Header Footer  Step 14 - Removing top margins
 To remove the space above content in the
"leftnav" and "content" divs, use the following
rules "leftnav p margin 0 0 1em 0 " and
"content h2 margin 0 0 .5em 0
".  Browsers use different amounts of margin
above paragraphs and headings. It is safe to
remove all top margins, as long as there are
bottom margins to keep the paragraphs and
headings separate from elements below
them.  leftnav p margin 0 0 1em 0
contentex h2 margin 0 0 .5em 0
100
Implementation Liquid 2 Column Layout with
Header Footer  Step 15 - Setting a maximum
line length  If you want to set a maximum width
on your main content, you can do this by adding a
new rule "content max-width 36em
".  Although IE browsers will ignore this
rule, other standards compliant browsers will not
allow the content area to go wider that 36em -
keeping the line length to a comfortable width.
contentex max-width 36em
101
Implementation Liquid 2 Column Layout with
Header Footer 
102
Implementation ReviewBenefits and Issues around
CSS for page layoutOptions for spacing padding,
margin, borderOptions for placement absolute,
relative, floatUsing ltulgt to build a navigation
structure Basic page layouts  
103
Questions?