Title: Web Authoring: Using Cascading Style Sheets
1Web AuthoringUsing Cascading Style Sheets
2IntroductionsWhat 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
3Going 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.
4Going 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.
5Going 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
6Going 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'
7Going 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.
8Going 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)
9Going 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. /
10Going 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)
11Going 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.
12Going 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
13Going 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
14Going 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.
15Going 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.
16Going 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.
17Going 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.
18Going 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.
19Going 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
20Going 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
21Going 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.
22Going 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.
23Going 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
24Going 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.
25Going 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
26Going 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.
27Going 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
28Going 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
29Going 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.
30Going 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.
31Going 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.
32Going 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.
33Going the Extra Mile ReviewAbsolute and
relative positioningz-indexinline vs.
blockWorking with ListsWorking with TablesBox
Model
34Implementation
35Implementation 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
36Implementation 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 ...
37Implementation 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
38Implementation Creating menus To remove the
list bullets, set the list-style-type to
none. ulnavigation margin-left
0padding-left 0list-style-type none
39Implementation 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
40Implementation 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
41Implementation 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
42Implementation 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
43Implementation 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
44Implementation 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
45Implementation 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.
46Implementation 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
47Implementation 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
48Implementation Creating menus Add a
background ulnavigation margin-left
0padding-left 0list-style-type
nonebackground 036
49Implementation 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
50Implementation 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
51Implementation 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
52Implementation 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
53Implementation 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
54Implementation 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
55Implementation 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.
56Implementation 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.
57Implementation 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
58Implementation 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.
59Implementation 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.
60Implementation 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.
61Implementation 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
62Implementation 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'
63Implementation 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
64Implementation 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.
65Implementation 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.
66Implementation 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.
67Implementation Page layouts
68Implementation Page layouts
69Implementation Page layouts
70Implementation 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.
71Implementation 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.
72Implementation 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
73Implementation 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.
74Implementation 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.
75Implementation 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.
76Implementation Page layouts clear both The
element is moved below all floating boxes of
earlier elements in the source document.
77Implementation Basic Design Examples
Basic Two Column
Basic Three Column
Basic Two Column with Header
Basic Three Column with Header
78Implementation Floating a column to the right
79Implementation 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.
80Implementation 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
81Implementation 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
82Implementation 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
83Implementation 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
84Implementation Floating a column to the
right Step 6 - Background color background-col
or 00B4DC
85Implementation 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
86Implementation Liquid 2 Column Layout with
Header Footer
87Implementation 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).
88Implementation 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.
89Implementation 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 /
90Implementation 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
91Implementation 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
92Implementation 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
93Implementation 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
94Implementation 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
95Implementation 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
96Implementation 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
97Implementation 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
98Implementation 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
99Implementation 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
100Implementation 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
101Implementation Liquid 2 Column Layout with
Header Footer
102Implementation 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
103Questions?