Web Authoring:
Using Cascading Style Sheets
ITNW 6030
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
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.
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.
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.
<span style="position: relative; top: 12px; left: 22px;">some
words</span>
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
{
position:absolute;
left:0px;
top:0px;
z-index:10;
}
would
appear
'above'
img
{
position:absolute;
left:0px;
top:0px;
z-index:5;
}
*
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.
•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 <BR> tag)
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. */
Going the Extra Mile: Working with Lists
The list-style-image property specifies the image that will be used as listitem 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) }
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.
Going the Extra Mile: Working with Lists
Syntax: list-style: <value>
Possible Values: <list-style-type> || <list-style-position> || <url>
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-styleposition, 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 }
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:
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.
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.
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.
Going the Extra Mile: Containing Boxes
Block boxes act as a containing block for any boxes within them. For
example, in this code:
<div> This is the first sentence.
<p>This is the second sentence.</p>
</div>
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.
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 width:50%; its width will be
set to half the width of its containing block.
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
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;}
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.
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 ALIGN=left and ALIGN=right for the
IMG element, but CSS1 allows all elements to "float," not just the images
and tables that HTML 3.2 allows.
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 {clear:both;}
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.
Going the Extra Mile: Creating space - padding
The padding property is a shorthand for the padding-top, paddingright, 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 }
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.
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 }
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;}
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-rightwidth, border-bottom-width, and border-left-width properties.
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.
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.
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 }
A:link { border: solid blue }
A:visited { border: thin dotted #800080 }
A:active { 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, borderleft, border-color, border-width, border-style, border-top-width,
border-right-width, border-bottom-width, or border-left-width
properties.
Going the Extra Mile: Review
Absolute and relative positioning
z-index
inline vs. block
Working with Lists
Working with Tables
Box Model
Implementation
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.
<ul id="navigation">
<li>Home </li>
<li>About </li>
<li>Services</li>
<li>Staff</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Sitemap</li>
</ul>
Implementation: Creating menus
Styling the List
To style the list, you will need to use selectors that target the <ul>, <li>,
and <a> 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.
ul#navigation
ul#navigation
ul#navigation
ul#navigation
{...}
a {...}
a:hover {...}
li {...}
Implementation: Creating menus
Styling the <ul> 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
<ul> element.
ul#navigation { margin-left: 0;
padding-left: 0;}
Implementation: Creating menus
To remove the list bullets, set the list-style-type to none.
ul#navigation { margin-left: 0;
padding-left: 0;
list-style-type: none;}
Implementation: Creating menus
Styling the <a> 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
<a> 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;
.
ul#navigation a { display: block;
text-decoration: none;}
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.
ul#navigation a { display: block;
text-decoration: none;
background: #036;}
Implementation: Creating menus
To set a padding for an <a> 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.
ul#navigation a { display: block;
text-decoration: none;
background: #036;
padding: .2em .5em;}
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.
ul#navigation a { display: block;
text-decoration: none;
background: #036;
padding: .2em .5em;
border-bottom: 1px solid #fff;}
Implementation: Creating menus
You can set the width of the <a> element by adding width: 6em to your
code. Of course this width can be changed to suit your needs.
ul#navigation a { display: block;
text-decoration: none;
background: #036;
padding: .2em .5em;
border-bottom: 1px solid #fff;
width: 6em;}
Implementation: Creating menus
Adding A Hover Effect
To this set the background to #69C and the color to #000 to
ul#navigation a:hover {...}
ul#navigation a:hover { background: #69C;
color: #000;}
Implementation: Creating menus
Styling the <li> 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 <li>
element to display: inline.
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.
ul#navigation
ul#navigation
ul#navigation
ul#navigation
{...}
a {...}
a:hover {...}
li {...}
<ul id="navigation">
<li>Home </li>
<li>About </li>
<li>Services</li>
<li>Staff</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Sitemap</li>
</ul>
Implementation: Creating menus
To remove indentation you can use:
ul#navigation { margin-left: 0;
padding-left: 0;}
To remove the list bullets, set the list-style-type to none.
ul#navigation { margin-left: 0;
padding-left: 0;
list-style-type: none;}
Implementation: Creating menus
Add a background:
ul#navigation { margin-left: 0;
padding-left: 0;
list-style-type: none;
background: #036;}
Implementation: Creating menus
To float the <ul>, 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.
ul#navigation { margin-left: 0;
padding-left: 0;
list-style-type: none;
background: #036;
float: left;
width: 100%}
Implementation: Creating menus
Styling The <li> Element
To make sure the list items are displayed in a single line, the <li> element
must be set to display: inline; .
ul#navigation li { display: inline; }
Implementation: Creating menus
Styling the <a> Element
You can increse the active area of text links by applying display: block; to
the <a> element. This will change it from inline to block level and allow
you apply padding to all sides of the element.
Set the <a> 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 <a> element should then floated, so that each list item moves into a
sing line butting againg the previous item.
ul#navigation a { display: block;
float: left;}
Implementation: Creating menus
Styling the <a> 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.
ul#navigation a { display: block;
float: left;
padding: .2em .9em;}
Implementation: Creating menus
Styling the <a> 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; .
ul#navigation a { display: block;
float: left;
padding: .2em .9em;
border-right: 1px solid #fff;}
Implementation: Creating menus
Styling the <a> Element
Adding A Hover Effect
To this set the background to #69C and the color to #000 to
ul#navigation a:hover {...}
ul#navigation a:hover { background: #69C;
color: #000;}
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.
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.
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
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.
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.
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.
Implementation: Page layouts
2 Column Layout - absolute positioning
div#main {margin-left: 20%; /* Create space on the page for the menu */ }
div#menu { position: absolute; top: 1em; left: 1%; width: 17%;
/* Must be less than 20% or the menu may overlap the content */ }
<div id="main">
<p>Some Content goes here</p>
<p>content goes here</p>
<p>content goes here</p> </div>
<div id="menu"> <p>the menu</p> </div>
Implementation: Page layouts
3 Column Layout - absolute positioning
div#main {margin-left: 15%; /* Space for the left menu */
margin-right: 15%; /* Space for the right menu */ }
div#menu1 {position: absolute; top: 1em; left: 1%; width: 13%; }
div#menu2 { position: absolute; top: 1em; right: 1%;
/* Because top and right are defined, appears in top right*/
width: 13%'}
Implementation: Page layouts
3 Column Layout - absolute positioning
<div id="main">
<p>content goes here</p>
<p>content goes here</p>
<p>content goes here</p>
</div>
<div id="menu1">
<p>the left hand menu</p> </div>
<div id="menu2">
<p>the right hand menu</p>
</div>
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.
•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 nonpositioned column.
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.
Implementation: Page layouts
Implementation: Page layouts
Implementation: Page layouts
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.
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.
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:
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.
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.
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.
Implementation: Page layouts
clear: both The element is moved below all floating boxes of earlier
elements in the source document.
Implementation: Basic Design Examples
Basic Two Column
Basic Two Column
with Header
Basic Three Column
Basic Three Column
with Header
Implementation: Floating a column to the right
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 <div> tags for the name column around
one of the paragraphs.
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;
}
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;
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;
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;
Implementation: Floating a column to the right
Step 6 - Background color
background-color: #00B4DC;
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;
}
Implementation: Liquid 2 Column Layout with Header & Footer
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).
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.
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 */}
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;
}
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%;
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;
}
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;
}
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;
}
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;
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;
}
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
{
clear: both;
margin: 0;
padding: .5em;
}
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;
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; }
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; }
Implementation: Liquid 2 Column Layout with Header & Footer
Implementation: Review
Benefits and Issues around CSS for page layout
Options for spacing: padding, margin, border
Options for placement: absolute, relative, float
Using <ul> to build a navigation structure
Basic page layouts
Questions?