Web Authoring: Using Cascading Style Sheets - PowerPoint PPT Presentation

Loading...

PPT – Web Authoring: Using Cascading Style Sheets PowerPoint presentation | free to download - id: 6f39d6-NzZlZ



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Web Authoring: Using Cascading Style Sheets

Description:

Using Cascading Style Sheets ... see what it looks like with styling removed https: ... Absolute Positioning If you position an element (an image, a table, ... – PowerPoint PPT presentation

Number of Views:77
Avg rating:3.0/5.0
Slides: 104
Provided by: Goog6155
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Web Authoring: Using Cascading Style Sheets


1
Web Authoring Using Cascading Style Sheets
  • ITNW 6030

2
Introductions What 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
Positioning Within 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.   img positionabsolute left0px top0p
x z-index10
img positionabsolute left0px top0px z-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. Examples LI.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. Examples ul.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 ltvaluegt Possible
Values     ltlist-style-typegt
ltlist-style-positiongt lturlgt Initial Value    
Not defined Applies to     Elements with display
value list-item Inherited     Yes The
list-style property is a shorthand for the
list-style-type, list-style-position, and
list-style-image properties. Examples LI.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
TABLE border-width (px)   1px 2px 3px 4px 5px
thin medium thick 0px border-spacing     2px 1px
3px 4px 5px 0px border-style   outset none hidden
dotted dashed solid double ridge groove
inset border-color   gray white blue green black
red custom border-collapse   separate
collapse background-color   white FFFFF0 FAF0E6
FFF5EE FFFAFA custom   TD/TH border-width (px)
    1px 2px 3px 4px 5px thin medium thick
0px padding     1px 2px 3px 4px 5px
0px border-style     inset none hidden dotted
dashed solid double ridge groove
outset border-color     gray white blue green
black red custom background-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 code ltdivgt
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 4em BLOCKQUOTE 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 Review Absolute and
relative positioning z-index inline vs.
block Working with Lists Working with Tables Box
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"gt ltligtHome
lt/ligt ltligtAbout lt/ligt ltligtServiceslt/ligt ltligtStafflt
/ligt ltligtPortfoliolt/ligt ltligtContactlt/ligt ltligtSitem
aplt/ligt lt/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 0 padding-left 0
38
Implementation Creating menus To remove the
list bullets, set the list-style-type to
none.   ulnavigation margin-left
0 padding-left 0 list-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 block text-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
block text-decoration none background 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
block text-decoration none background
036 padding .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 block text-decoration
none background 036 padding .2em
.5em border-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
block text-decoration none background
036 padding .2em .5em border-bottom 1px
solid fff width 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
69C color 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"gt ltligtHome lt/ligt ltligtAbout
lt/ligt ltligtServiceslt/ligt ltligtStafflt/ligt ltligtPortfol
iolt/ligt ltligtContactlt/ligt ltligtSitemaplt/ligt lt/ulgt
47
Implementation Creating menus   To remove
indentation you can use   ulnavigation
margin-left 0 padding-left 0         To
remove the list bullets, set the list-style-type
to none.   ulnavigation margin-left
0 padding-left 0 list-style-type none  
48
Implementation Creating menus   Add a
background   ulnavigation margin-left
0 padding-left 0 list-style-type
none background 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
0 padding-left 0 list-style-type
none background 036 float left width
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 block float 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
block float left padding .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
block float left padding .2em
.9em border-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 69C color 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 positioning divmain 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 positioning divmain 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/divgt ltdiv 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
text For 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
column To 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 CODE column float
right border 1px solid 666 padding
2px background-color 00B4DC width
200px margin-top 0 margin-right
0 margin-bottom 10px margin-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 containerex width
90 margin 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".    containerex width 90 margin
10px auto background-color fff color
333 border 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.   top padding
.5em background-color ddd border-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 h1 padding 0 margin 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".   leftnav float left width
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
0 padding 1em
96
Implementation Liquid 2 Column Layout with
Header Footer Step 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.    contentex margin-left
200px border-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" .    footer clea
r both margin 0 padding .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
333 background-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 Review Benefits and Issues around
CSS for page layout Options for spacing padding,
margin, border Options for placement absolute,
relative, float Using ltulgt to build a navigation
structure Basic page layouts  
103
Questions?  
About PowerShow.com