Comprehensive effects
CSS Popups
Horizontal Menu
Bar Charts
   Horizontal Chart
   Vertical Chart

CSS notes

Notes taken from the following resources:
Cascading Style Sheets The Definitive Guide by Eric A. Meyer (2nd edition)
CSS Reference Table on TechRepuplic's builder.com
W3C's CSS page
experimentation
Other References
W3 Style Sheets Home Page and Some Sample css

Test pages

test2.html sheet2-1.css sheet2-2.css
formatsane.css - used on top-level page
testcss3.html - get unnumbered lists up and left...
reset.css - from Eric Meyer
Also there's some CSS in this document - view the source....

Markups I haven't used as much

alt in images - specify a textual replacement for the image - 'tooltip' kind of like
title in other links...

Comments I don't know where to put elsewhere right now

In the style sheet or section

/* comments */
SelectorDeclaration
H1{color: red; ...;}
H2, H3{color: red; ...;}/* or */
H2 em{color: red; ...;}/* descendant selectors - em in H2 */

in html style format

usually up in the <head>

<style type="text/css"><!--
ul {margin-top:0; margin-bottom:0; margin-left:0; padding-left: 1.1em;}
li {list-style-position: outside;}

.mono {font: 10pt Courier, Monospace;}
.indentedmono {font: 10pt Courier, Monospace; margin: 0 0 0 2em;}
.boxedmono {font: 9pt Courier, Monospace; border: 1px solid gray; width: 700px; padding-left: 4px;}

table {padding: 2px; border-collapse: collapse;}
tr {vertical-align: top;}
th, td {border: 1px solid black; padding: 0 4px 0 4px;}
th {text-align: left;}
table.firstcolumnmono tr td:first-child {font: 10pt Courier, Monospace;}
--></style>

linked style sheet

usually up in the <head>

example 1
<link rel="stylesheet" type="text/css" href="sheet2-1.css" media="all" title="first">


example 2
<LINK type="text/css" rel="stylesheet" href="main.css" title="Default Style" />
<LINK type="text/css" rel="alternate stylesheet" href="alternate.css" title="Alternate Style" />
allows flipping between different styles in browsers that support it (like firefox 1.0+
rel="alternate stylesheet" important
title="whatever" important


Quick ref on selectors...

Class Selectorp.warning {font-weight: bold;}every paragraph with class="warning"<p class="warning">
ID Selectorp#lead-para {font-weight: bold;}first occurance of id<p id="lead-para">
Attribute Selector - Simpleh1[class] {color: silver;}something with a class attribute in it<h1 class="hoopla">
 a[href][title] {font-weight: bold;}and<a href="http://www.w3.org/" title="W3C Home">
Attribute Selector - Exacta[href="http://www.blah.org/about.html"] {font-weight: bold;} <a href="http://www.blah.org/about.html">
Attribute Selector/Value - Partialp[class~="warning"] {font-weight: bold;} <p class="urgent warning">
Attribute Selector - Selection Type*[lang|="en"] {color: white;} <h1 lang="en-us">Hello!</h1>

quick ref - types of selectors

Descendant selectorsh1 em {color: gray;}any em that is a descendant of h1
child selectorh1 > strong {color :red;}strong that is a child (not just a descendant) of h1
adjacent sibling selectorh1 + p {margin-top: 0;}paragraph that immediately follows an h1 element

Class Selector

<p class="warning">This is a warning </p>
SelectorDeclaration
*.warning{font-weight: bold;}

ID Selectors

(can only be used once)
<p id="warning">This is a warning </p>
SelectorDeclaration
*#warning{font-weight: bold;}

Attribute Selectors

h1[class] {color:silver;}

<h1>Hello</h1> /* this would not silver */
<h1 class="blah1">Hello</h1> /* this would silver */
<h1 class="yah2">Hello</h1> /* this would silver */

a[href="http://www.w3.org/"] /* look for exact attribute value */
p[class~="warning}] {font-weight: bold;} /* partial attribute - would work on following */
<p class="urgent warning">Very Important!</p>

*[lang|="en"] {color: white;} /*matches any lang attribute that betgins with 'en'*/
<h1 lang="en">Hello!</h1> /* matches */
<h1 lang="en-us">Hello!</h1> /* matches */
<h1 lang="uk-en">Hello!</h1> /* doesn't */

pseudo-classes

Recommended Order
a:link {color: navy;}
a:visited {color: gray;}
a:hover {color: red;}
a:active {color: yellow;}

Specificity

a,b,c,d - 'left-weighted' (i.e. 0,1,0,0 wins over 0,0,1,0)
A selector's get weighted based on what components they have
Inlineadd 1,0,0,0
For every ID attribute valueadd 0,1,0,0
For every class attribute valueadd 0,0,1,0
For every element and pseudo-element given   add 0,0,0,1

Specificity Sorting Rules

For all rules that match a given element:
  1. !important rules trump those that are not. In order:
    1. Reader important declarations
    2. Author important declarations
    3. Author normal declarations
    4. Reader normal declarations
    5. User agent declarations
  2. Higher Specificity has more weight than lower specificity (0,1,0,0 wins over 0,0,1,0).
  3. Later declarations have more weight then prior ones. Imported style sheets are considered to come before all declarations in style sheet that imports them.
Note: Non-CSS hints (i.e. the font element) have specificity of 0 and are treated as if they appear at the beginning of the author's style sheet. They can be oveerridden by author or reader styles, but not by user agent's styles.

Color

Length Values

URLs

@import url(subdir/blah.css);
@import url(http://www.dasite.org/dathings/special/things.css);
body (background: url(http://www.pix.web/picture1.jpg) /* note no space between url and opening parens */

Keywords

nonedifferent from 0a: visited {text-decoration: none;}
inheritforced inheritance#toolbar a {color: inherit;}
Fonts

Generic Font Families

body {font-family: sans-serif;}

Specific Font Families

h2 {font-family: Georgia;)

Can list general after specific. This allows general to apply if specific is not available.
h2 {font-famiy: Arial, sans-serif;}

This one goes through all the fonts in order until it gets a match
p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;} /* use single quotes, not double if necessary*/

Font Weights

Every number corresponds to a weight at least as heavy as the number that precedes it. strong {font-weight: 700;}
em {font-weight: bold;}
100  see 300
200  see 300
300  If 300 unassigned, given next variant lighter then 400. If no lighter variant available, 300 assigned same variant as 400 (usually "Normal" or "Medium"). Method also used for 200 and 100
400normalfont variants labeled "Normal", "Regular", "Roman", "Book"  
500 font variants labled "MediumIf unassigned, given same font weight as 400
600  if unassigned, given next variant darker then 400. If no darker varieant is assigned, then given same variant as 500. Method also used for 700, 800, 900
700bold See 600
800  See 600
900  See 600
 bolder selects lowest number that corresponds to font weight darker than what was inherited
 ligher selects highest number that corresponds to font weight lighter than what was inherited

Font Size

Percentages and Sizes

body {font-size: 15px;}
p {font-size: 12px;}
em {font-size: 120%;}
strong {font-size: 135%;}
small, .fnote {font-size: 75%;}

Length Units

p.one {font-size: 36pt;}
p.two {font-size: 3pc;}
etc...

Style

p {font-style: normal;}
em {font-style: oblique;}
i {font-style:italic;}

Variations

An example of smallcaps (NOT LARGE CAPS)

Font property

Can be used to group all other properties
h1 {font: normal bold italic 30px sans-serif;}
last 2 values must be font-size and font-family in that order

Line Height

Separate from font-size. Added to font-size value, with a forward slash
h2 {font: bold itaclic 200%/1.2 Verdana, Helvetica, Arial, sans-serif};

System Fonts

button {font: caption;}
button: caption; font-size: 2em;}
captionfont used for captioned controls, such as buttons
iconfont used to label icons
menufont used in dropdown menu and menu lists
message-boxfont used in dialog boxes
small-captionfont used for labeling small controls
status-barfont use din window status bards

Indenting

p {text-indent: 3em;}
p {text-indent: -4em; padding-left: 4em;}

When in the course of human events, it becomes necessary to try to remember the Gettysburg address, sometimes one must go to the book, and look it up. Sometimes one has a good memory, but sometimes not.
A third line....


p {text-indent: 10%;} /* percentages calculate on parent element's width */

Horizontal Alignment

left, center, right, justify, inherit
p {text-align: right;}

Vertical Alignment

line-height includes content-area (which is usually font size) plus leading area (half on top and half on bottom
Figure 6-7 from Cascading Style Sheets - The Definitive Guide by Eric A. Meyer (2nd edition)
p.cl2 {font-size: 10 px; line-height: 14px;}; /* extra leading area - 2px above and 2px below */

Read Images, Tables, and Mysterious Gaps

Vertically Aligning text

vertical-align: baselineforces baseline of elemnnt to align with baseline of parent.
vertical-align: subbaseline lowered with respect to parent's baseline. Spec' doesn't define distance element is lowered. Doesn't change size of font.
vertical-align: superbaseline raised with respect to parent's baseline. Spec' doesn't define distance element is raised. Doesn't change size of font.
vertical-align: bottomaligns bottom of element's inline box with bottom of the line box.
vertical-align: topaligns tom of element's inline box with top of the line box
vertical-align: middlealigns middle of inline element's box with a poing that is 0.5ex above baseline of parent element. Usually used with images.
vertical-align: percentage 
vertical-align: Absolute Length 
span.blah {vertical-align: 5px;} /* would move it 5 pixels upwards */ RaiseItUp {vertical-align: 100%;}
Here is a superscript with a <RaiseItUp> tag.

Word Spacing

Adds or subtracts to normal spacing between words.
p.extraspace {word-spacing: 0.5em;}
And away we go...Up into the sky....

Letter spacing

Adds or subtracts to normal spacing between letters.
span.emphasized {letter-spacing: .2em; font-weight: bold;}
This needs to be strongly emphasized text.

Text Transformation

uppercase, lowercase, capitalize, none, inherit
h1 {text-transform: capitalize;}

Text Decoration

none, underline, overline, line-through, blink, inherit
text-decoration is not inherited. State everything explicitly in child elements.
p.overlined {text-decoration: overline;}
underline overline line-through blink

Block Level Elements - margins et. al.

Everything is a rectangular box. The containing block is the "layout context".
Diagram taken from Cascading Style Sheets The Definitive Guide by Eric A. Meyer (2nd edition)

<p style="width: 200px; padding: 10px; margin: 20px; border: 1px solid grey; background-color: silver"> - visible element box is 220px (add padding left and right). Margins extend another 20px

Horizontal Properties

<p style="width: 200px; margin-left: auto; margin-right: auto; margin-top: 0; border: 1px solid grey; background-color: silver"> - right and left auto center's the element in it's parent. 'text-align' only applies to inline content of block-level element

text-align


This most excellent paragraph assumes the style text-align: left;

This most excellent paragraph assumes the style text-align: right;

This most excellent paragraph assumes the style text-align: center;

This most excellent paragraph assumes the style text-align: justify;

Negative Horizontal Margins

<div style="width: 400px; border: 3px solid black;}">
<p style="margin-left: 10px; width: auto; margin-right: -50px; background-color: silver">

Sum of horizontal components of block-level element box in normal flow always equlas width of parent. Below:
margin-left(10px)+border-left(0)+padding-left(0)+width(440px)+padidng-right(0)+border-right(0)+margin-right(-50px)=400px

Push it left
<div style="width: 400px; border: 3px solid black;">
<p style="margin-left: -15px; width: auto; margin-right: 10px; border: 3px solid gray;">

Replaced elements

<img src="csswork/simplesmiley.png" style="display: block; width: 25px; margin: 0;">
<img src="csswork/simplesmiley.png" style="display: block; width: 50px; margin: 0;">
<img src="csswork/simplesmiley.png" style="display: block; width: 100px; margin: 0;">
Note: height scales to match unless specifically set

Vertical Formatting

If height is not tall enough for text, browser is supposed to provide means of viewing all content without increasing height of element box. Scrollbars are an option.



By default; block-level auto-height, normal-flow element with block-level (only) children only goes to top or bottom border. If you put in padding or borders then this changes to outer margin edges.

<div style="height: auto; background: silver;">
<p style="margin-top: 2em; margin-bottom: 2em;"> A paragraph!</p>
</div>

A paragraph!

<div style="height: auto; border-top: 1px solid; border-bottom: 1px solid; background: silver;">
<p style="margin-top: 2em; margin-bottom: 2em;">Another paragraph!</p>
</div>

Another paragraph!

Collapsing vertical margins

If top and bottom margins are both present, the one with the max get's used and the other one does not.
margin-top: 14px; margin-bottom: 15px;
margin-bottom: 29px;

Negative Vertical Margins

<div style="width: 420 px; background-color: silver; padding: 10px; margin-top: 50px; border: 1px solid;">
<p style="margin-top: -50px; margin-right: 10px; margin-left: 10px; margin-bottom: 0; border: 3px solid gray;">
The paragraph
</p>
The Div
</div>

The paragraph

The Div

Additional Margin items

Margins can be listed shorthand margin: <top> <right> <bottom> <left>
Can be remembered T R B L or TROUBLE.

For example:
<h3 style="margin: 1px 40px -4px 20px; border: 1px solid grey;">

Might Look Like This

Also, if you leave out entries, the replicate like: So -
margin: 5px 7pxwould translate tomargin: 5px 7px 5px 7px.
margin: 12pxwould translate tomargin: 12px 12px 12px 12px.
margin: 12px 11px 10pxwould translate tomargin: 12px 11px 10px 11px.

Left and right margins work for non-replaced inline elements. Top and bottom margins don't.

Punching out

<div style="background: silver; border: 1px solid;">
<p style="margin: 1em;">
<p style="background: white; margin: 1em -1px 1em 25%; border: 1px solid; border-right: none; text-align: center;">
<p style="background: #333; color: white; margin: 1em 3em -2em -.5em;">

The initial div with a paragraph that just rambles on, but demonstrates a pretty cool look punching out of it's parents. Things just keep going and then hopefully soon, something punches out. Very soon that is. Do we have enough text yet?

When man looks for a quote, it should stand out. Remember that great things are said in a manner that catches the eye.

Ongoing original ideas are captured in the original paragraph. There is nothing that is punched out, it is merely rambling text with nothing much to say. It is true that often you want to say something, but you are really just setting up the next element

Look at me! I'm important in what I say! At least I think I am as I am presented this way. It's not too hard to comprehend why I'm like this.



List Items

Can be inline or outside of content depending on value of list-style-position

Inline Elements

Anonymous text - string of characters not contained within an inline element. For
<p>I'm <em>so</em> happy!</p>
"I'm" and " happy!" are anonymous text.

By default, things are generally vertical-aligned at the bottom of the inline-box.

Thus, demonstrating style="vertical-align: top"

When in the course of human events, it becomes necessary

vertical-align

vertical-align can take the following keywords:

line-height

Best way to keep line-height for different size fonts from overlapping is to set line-height; 1. This becomes a scaling factor.

This is a paragraph with a 14px font and a line-height of 1. Now we add a font that's 250% bigger, just to show how the line-height scales.

Hey look - it's a span with box properties - in particular a border...

This is a paragraph of font-size: 15px; line-height: 1em;. And now we have span with background: #999; padding-top: 3px; padding-bottom: 3px;" that overlaps things. Especially, if we have a paragraph that continues on.

Inline replaced elements

Like img's. They pretty much respond based on their bounding box as you would expect. Bottom of box is vertical-aligned to the baseline.

Altering Element Display

The display property can be:

block->inline

#rollcall li {display: inline; border-right: 1px solid; padding: 0 0.33em;}
#rollcall li:first-child {border-left: 1px solid;}


inline->block

div#navigation a {display: block;}
<div id="navigation">
<a href="first.html">first on the list</a>
<a href="second.html">second...</a>
<a href="third.html">and so on.</a>
</div>

inline-block

When in the course of human events, it becomes necessary for one people to sometimes think on their

<p style="border: 1px dotted; display: block; width: 6em; text-align: center;">

own - well, that's the challenge of it all - thinking on your own.

When in the course of human events, it becomes necessary for one people to sometimes think on their

<p style="border: 1px dotted; display: inline; width: 6em; text-align: center;">

 own - well, that's the challenge of it all - thinking on your own.

When in the course of human events, it becomes necessary for one people to sometimes think on their

inline-block paragraph doesn't seem to show up correctly in firefox or ie

<p style="border: 1px dotted; display: inline-block; width: 6em; text-align: center;">
own - well, that's the challenge of it all -

another test couple of words

thinking on your own.

Run-in Elements

And here we have the run-in element which makes block-level elements an inline part of the following element. Hopefully it works in the browser or UA you are using.

border-style

Also border-top-style, border-right-style, border-bottom-style, border-left-style.
none
hidden - same as none but used for tables and border-conflict resolution
dotted
dashed
solid
double
groove
ridge


<a style="border-style: outset; text-decoration: none;" href="http://www.w3c.org"> could yield a raised button
W3C

shorthand is T R B L again.

border-style: solid dashed dotted none - A very short paragraph with only a couple of lines, and not much else, just a couple of lines that run on and on. Now we're really done. Really.

border-width

Also border-top-width, border-right-width, border-bottom-width, border-left-width. ADD PADDING TO OTHER A LINKS BESIDES HOVER

border-color

Also border-top-color, border-right-color, border-bottom-color, border-left-color.

Transparent borders

Border with no style has no width. Invisible border can be created with color value transparent. This might not work correctly IE.

a:link.borderme, a:visited.borderme {border-style: outset; border-width: 5px; border-color: transparent;}
a:hover.borderme {border-style: outset; border-width: 5px; border-color: gray;}


1st-link 2nd-link 3rd-link

border-top, border-right, border-bottom, border-left let you shortcut color style and width. For example
h3 {border-bottom: thick solid gray; text-decoration:none;}
will get you -

This is an h3 with a border

border

Global border settings can be shorted handed. For example,
h3 {border: thick silver solid; text-decoration:none;}
will get you:

h3 style with a global border


Note you can override a global setting with a particular setting i.e. border-left after a border setting.

When you apply borders to inline elements line height doesn't change, so you may get overlapping. Left and right will displace text around them to make way however.

Padding

TRLFis shortcut order
Also padding-top, padding-right, padding-bottom, padding-left.
h2 {padding: 10px 0.25em 3ex 3cm; background: silver; border: 1px solid black;}
will get you

An h3 with irregular padding


When you apply padding to inline elements left and right sides push text aside, however it is not applied to the right and left side of each line. Line height isn't changed of course, but since padding does extend the background, and is You can visible, it ends up overlapping the lines that come before.

Padding (in this case - background: green; padding: 1em;) is supposed to work with replaced elements such as but sometimes has issues. More importantly form elements can be represented differently with padding.

Color notes

  • #navbar a {color: yellow;} - All links in the #navbar will be yellow
  • Replacing Attributes

    You can replace

    <body text="black" link="#808080" alink="silver" vlink="#333333">

    with

    body {color: black;}
    a:link {color: #808080;}
    a:active {color: silver;}
    a:visited {color: #333333;}

    Coloring Form Elements

    For example:

    select {color: rgb(33%,33%,33%);}
    input {color: silver;}
    input [type="radio"] {color: red;} /* doesn't always work */
    input [type="checkbox"] {color: red; font-weight: bold;} /* doesn't always work */



    background-color

    h3 {color: white; background-color: rgb(20%,20%,20%); font-family: Arial, sans-serif; padding: 10px;}
    will get you

    An h3 with white text on dark background

    Background images

    You can replace
    <body background="csswork/soapbubbles.png">
    with
    body {background-image: url(csswork/soapbubbles.png);}
    Take a look at an example

    Or how about
    p.bubbly {background-image: url(csswork/soapbubbles.png); color: white;} a.invertedbubbly {background-image: url(csswork/invertedsoapbubbles.png); color: red;}

    And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.

    How about
    td.nav {background-image: url(csswork/invertedsoapbubbles.png); color: green;}
    navbar

    2nd entry

    3rd entry

    4th entry

    Heading 3

    The text next to here. And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.


    background-repeat


    width: 200px; background-image: url(csswork/smiley-small.png); background-repeat: repeat-y; border: 1px solid gray;
    The text next to here. And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.


    background-image: url(csswork/simplesmiley-cropped.PNG); background-repeat: no-repeat;

    A H3 Heading

    When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background.When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background.When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background.

    background-position

    background-position: left center;
    And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.

    p {background-position: right top;}

    And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.

    And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.


    background-position: 25% 0%;
    And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.

    background-position: 0% 75%;
    And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.

    background-position: 75% 75%;
    And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.

    background-position: 20px 30px;
    And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.

    background-position: -130px -130px; (with bigger image)
    And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.

    background-position: -20% -20%; (with bigger image)
    Consider staying away from % values. They line up the percentage alignment point of the image with the percentage alignment point of the block. If things are different sizes, you will get different alignments.
    And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.

    background-position: center center; background-repeat: repeat-y;
    And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.

    background-position: center center; background-repeat: repeat;
    And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.

    background-position: left top; background-repeat: repeat;
    And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.

    background-attachment

    background

    Can take all more detailed background keywords in one thing (like font properties). For example:
    body {background: white url(smiley-small.png) top left repeat-y fixed;}
    Keywords can go in any order, accept that the 2 values for background-position (top left) have to be together (and sometimes in horizontal first, then vertical).

    Floating

    float

    <img src="csswork/simplesmiley-cropped.PNG" style="float: left;" alt="smiley face">
    smiley face When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up.

    <img src="csswork/simplesmiley-cropped.PNG" style="float: left;" alt="smiley face">

    Mary, Mary, quite contrary, how does your garden grow. All, wild and free, it's plain to see, that I have no roses to sow.

    When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up.


    1. <img src="csswork/simplesmiley-cropped.PNG" style="width: 30%; float: left;" alt="smiley face">
    2. <img src="csswork/simplesmiley-cropped.PNG" style="width: 30%; float: right;" alt="smiley face">
    smiley face 1When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have 2smiley faceenough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up.

    1. <img src="csswork/simplesmiley-cropped.PNG" style="width: 30%; float: left; border: 1px solid silver;" alt="smiley face">
    2. <img src="csswork/simplesmiley-cropped.PNG" style="width: 30%; float: left; border: 1px solid silver;" alt="smiley face">
    3. <img src="csswork/simplesmiley-cropped.PNG" style="width: 30%; float: right; border: 1px solid silver;" alt="smiley face">
    smiley face 1When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. 2smiley faceHopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. 3smiley faceHopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up.
    1. <img src="csswork/simplesmiley-cropped.PNG" style="width: 300px; height: 30%; float: left; border: 1px solid silver;" alt="smiley face">
    2. <img src="csswork/simplesmiley-cropped.PNG" style="width: 300px; height: 30%; float: right; border: 1px solid silver;" alt="smiley face">
    smiley face 1When in the course of 2smiley facehuman events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up.

    1. <img src="csswork/simplesmiley-cropped.PNG" style="width: 30%; float: left; border: 1px solid silver;" alt="smiley face">
    2. <img src="csswork/simplesmiley-cropped.PNG" style="width: 30%; float: left; border: 1px solid silver;" alt="smiley face">
    3. <img src="csswork/simplesmiley-cropped.PNG" style="width: 30%; float: left; border: 1px solid silver;" alt="smiley face">
    4. <img src="csswork/simplesmiley-cropped.PNG" style="width: 30%; float: left; border: 1px solid silver;" alt="smiley face">
    5. <img src="csswork/simplesmiley-cropped.PNG" style="width: 30%; float: left; border: 1px solid silver;" alt="smiley face">
    When in the course of human events, it becomes necessarysmiley face 12smiley face3smiley face4smiley face5smiley face to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up.

    1. <img src="csswork/simplesmiley-cropped.PNG" style="width: 30px; height: 200px; float: left; border: 1px solid silver;" alt="smiley face">

    When in the course of human events, it becomes necessary to keep typing something that might just meansmiley face something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background.

    When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background.

    When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background.

    When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up.


    1. <img src="csswork/simplesmiley-cropped.PNG" style="width: 30px; height: 200px; float: left; border: 1px solid green; padding: .5em;" alt="smiley face">

    When in the course of human events, it becomes necessary to keep typing something that might just meansmiley face something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background.

    When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background.

    A Fractured Title

    When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background.

    When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up.

    A H3 heading.

    This is an unfloated paragraph the contents of which should flow past the floated image which precedes it in the document.

    In this case, the floated image has been set to float left, and it has it's topand left margins of -15px. This will cause it to actually float up and out of it's parent element, which is the DIV that enclosed the image and these paragraphs.

    clear

    Clear one of more sides of floated elements so that text doesn't flow past it.

    This is an unfloated paragraph the ontens of which should flow past the floated image which precedes it in the document.

    An h4 title

    In this case, the h3 title has a clear: left; in it's stytle

    Centering text block in a page

    body { text-align: center; (need this for IE) <strong>min-width: 760px;</strong> } #wrapper { width: 720px; margin: 0 auto; text-align: left; } ---OR--- #wrapper { width: 720px; position: relative; left: 50%; <strong>margin-left: -360px;</strong> } <body> <div id="wrapper"> </div> </body> ---

    2 column float

    #content { width: 520px; float: right; } #mainNav { width: 180px; float: left; } #footer { clear: both; } #mainNav { padding-top: 20px; padding-bottom: 20px; } #mainNav li { padding-left: 20px; padding-right: 20px; } #content h1, h2, p { padding-right: 20px; } <div id="wrapper"> <div id="branding"> ... </div> <div id="content"> ... </div> <div id="mainNav"> ... </div> <div id="footer"> ... </div> </div> ---

    Three column float

    #mainContent { width: 320px; float: left; } #secondaryContent { width: 180px; float: right; } #secondaryContent h1, h2, p { padding-left: 20px; padding-right: 20px; } <div id="content"> <div id="mainContent"> </div> <div id="secondaryContent"> </div> </div> </pre>

    Positioning

    Define where element boxes appear relative to where they would normally appear,, or relevent to parent element, another element, or browser window. Please note that the descriptions below are paraphrased pretty closely to what is in Eric Meyer's book.

    In order to force the container block local - make it position: relative (or maybe one of the other ones) which will make all the elements inside of it use it as the containing block.

    For more info, take a look at http://www.wpdfd.com/issues/78/absolutely_relative/.

    Containing Block
    elementposition valuecontaining block
    root body or html
    non-rootrelative or staticcontent edge of nearest block-level, table cell, or inline-block ancestor box
    non-rootabsolute  ancestor with position value other then static
    • ancestor - block-level - containing block is element's padding edge
    • ancestor - inline-level - containing block is cotent edge of ancestor.
    • ancestor - none - containing block is initial containing block

    top, right, bottom, left

    no text positioning


    height: 50%; width: 50%; position: static; left: 50%; top: 50%; bottom: 0; right: 0; background: silver;

    height: 50%; width: 50%; position: relative; left: 50%; top: 50%; bottom: 0; right: 0; background: silver;

    height: 35%; width: 35%; position: absolute; left: 65%; top: 65%; bottom: 0; right: 0; background: green;
    See the squares on the page. There's a square way up at the top of this page.

    Also take a look here for an example of positioning within the div box.


    Fixed would create an overlay on the window which wouldn't move relative to the window.
    Consider:
    <div style="background: aqua; width: 50px; height: 80px; position: fixed; top: 0px; right: 0px;">
    <a href="#block">block</a>
    </div>

    This would create a small overlay block in the upper right corner with a link to #block. Check out:

    w/ 1 sentence positioning


    height: 50%; width: 50%; position: static; left: 50%; top: 50%; bottom: 0; right: 0; background: silver;
    See the squares on the page.

    height: 50%; width: 50%; position: relative; left: 50%; top: 50%; bottom: 0; right: 0; background: silver;
    See the squares on the page.

    div - position: relative;
    height: 50%; width: 50%; position: absolute; left: 50%; top: 50%; bottom: 0; right: 0; background: silver;
    See the squares on the page. More stuff about absolutely nothing, in order to show that the text goes under the positioned square. Not like a float. A float would wrap around the box, while this does not. Some of this text should be covered.

    Another nice example of absolute positioning.

    w/ 1 sentence in each div positioning


    height: 50%; width: 50%; position: static; left: 50%; top: 50%; bottom: 0; right: 0; background: silver;
    See the squares on the page.
    Not if I see you first. Hello.

    height: 50%; width: 50%; position: relative; left: 50%; top: 50%; bottom: 0; right: 0; background: silver;
    See the squares on the page.
    Not if I see you first. Hello.

    height: 25%; width: 25%; position: absolute; left: 75%; top: 75%; bottom: 0; right: 0; background: silver;
    See the squares on the page. There's a square way up at the top of this page.
    This is an absolute positioned div block (from far below here).

    div - position: relative;
    height: 50%; width: 50%; position: absolute; left: 50%; top: 50%; bottom: 0; right: 0; background: silver;
    See the squares on the page. More stuff about absolutely nothing, in order to show that the text goes under the positioned square. Not like a float. A float would wrap around the box, while this does not. Some of this text should be covered.
    Not if I see you first. Hello.

    Another nice example of absolute positioning.

    min-width, min-height, max-width, max-height (for positioning)

    Not supported in IE without javascript (see http://www.doxdesk.com/software/js/minmax.html).
    top: 10%; bottom: auto; left: 50%; right: 10%; height: auto; min-width: 15em; background: silver;
    Not if I see you first. Hello.
    See the squares on the page.

    overflow

    defines treatment of text that is larger then fixed size element. position: relative; top: 0; left: 0; width: 25%; height: 7am; overflow: visible; background: silver;
    Not if I see you first. Hello. Not if I see you first. Hello. Not if I see you first. Hello.
    See the squares on the page.




    position: relative; top: 0; left: 0; width: 25%; height: 7am; overflow: scroll; background: silver;
    Not if I see you first. Hello. Not if I see you first. Hello. Not if I see you first. Hello. Not if I see you first. Hello. Not if I see you first. Hello. Not if I see you first. Hello.
    See the squares on the page.


    position: relative; top: 0; left: 0; width: 25%; height: 7am; overflow: hidden; background: silver;
    Not if I see you first. Hello. Not if I see you first. Hello. Not if I see you first. Hello. Not if I see you first. Hello. Not if I see you first. Hello. Not if I see you first. Hello.
    This setting cuts off the overflow.

    clip

    clips text in overflowed element box position: relative; top: 0; left: 0; width: 25%; height: 7am; overflow: hidden; background: silver;
    Not if I see you first. Hello. Not if I see you first. Hello. Not if I see you first. Hello.
    This setting cuts off the overflow, but doesn't seem to work as relative.

    Click here to try it as absolute.

    visibility

    <span style="visibility: hidden;">
    When in the course of human events, it becomes necessary to suffer the slings and arrows of outrageous misfortune, well, there's the rub...

    Another nice example of absolute positioning (relative to containing blocks).

    A 3rd example of absolute positioning establishing a containing block for descendant elements

    Auto


    <div style="position: relative; height: 10em; width: 30em; border: 1px solid black;">
    <div style="height: 25%; width: 25%; position: absolute; left: 0; top: 0; background: #CCC;">
    <div style="height: 25%; width: 25%; position: absolute; left: 35%; top: 0; background: #AAA;">
    <div style="height: 25%; width: 25%; position: absolute; left: 70%; bottom: 0; background: #CCC;">

    <div style="position: relative; height: 10em; width: 10em; border: 1px solid black;">
    <div style="height: 25%; width: 100%; position: absolute; top: 0; bottom: 0; margin: auto 0; background: #CCC;">
    auto-middle position may not work in IE6-.

    z-index

    Higher value is closer to the reader.

    <div style="height: 25%; width: 25%; position: absolute; left: 25%; top: 25%; z-index: 3; background: #AAA;">
    <div style="height: 25%; width: 25%; position: absolute; left: 35%; top: 35%; z-index: 2; background: #999;">
    <div style="height: 25%; width: 25%; position: absolute; left: 45%; top: 45%; z-index: 1; background: #777;">

    Tables

    Table Display Values

    table block-level table - like HTML element table.
    inline-table rectangular block that generates an inline box. No real close HTML element
    table-row like HTML element tr
    table-row-group an element that groups one or more rows. HTML equivalent is tbody
    table-header-group like table-row-group but always displayed before all other rows and row groups, and after any top captions. Printed, header rows may be repeated at top of each page. HTML equivalent is thead
    table-footer-group like table-header-group but at bottom. HTML equivalent is tfoot
    table-column declares an element that describes a column of cells. Usually not rendered. HTML equivalent is col
    table-colomn-group groups one or more columns. Usually not rendered. HTML equivalent is colgroup
    table-cell represents a single cell in a table. HTML elements thtd are expamples of table-cell elements.
    table-caption defines table's caption.

    Another way of looking at it...
    table{display: table;}
    tr{display: table-row}
    thead{display: table-header-group;}
    tbody{display: table-row-group;}
    tfoot{display: table-footer-group;}
    col{display: table-column;}
    colgroup{display: table-column-group;}
    td, th{display: table-cell;}
    caption{display: table-caption;

    xml with table styles

    <system style="display: table; border: 1px solid black;">
    	<planet style="display: table-row-group;">
    		<name style="display: table-cell;">
    		Mercury
    		</name>
    		<moons style="display: table-cell;">
    		0
    		</moons>
    	</planet>
    	<planet style="display: table-row-group;">
    		<name style="display: table-cell;">
    		Earth
    		</name>
    		<moons style="display: table-cell;">
    		1
    		</moons>
    	</planet>
    </system>
    

    Mercury 0 Earth 1

    xml with embedded style sheet

    
    <style type="text/css"><!--
    scores {display: table; border: 1px solid black;}
    headers {display: table-header-group;}
    game {display: table-row-group;}
    team {display: table-row;}
    label, name, score {display: table-cell;}
    --></style>
    
    <scores>
    	<headers>
    		<label>Team</label>
    		<label>Score</label>
    	</headers>
    	<game sport="MLB" league="NL">
    		<team>
    			<name>Red Sox</name>
    			<score>8</score>
    		</team>
    		<team>
    			<name>Cubs</name>
    			<score>5</score>
    		</team>
    	</game>
    </scores>
    
    
    Red Sox 8 Cubs 5

    Column properties

    In CSS, columns and column groups can only accept 4 properties:

    caption-side

    elements with display value table-caption (i.e. <caption> elements) can indicate that they should be displayed on:

    Table Layers

    Tables are displayed in layers.
    1. Table
    2. Column Groups
    3. Columns
    4. Row groups
    5. Rows
    6. Cells
    For Example...
    <table style="background: #333333;">
    <caption style="color: green; caption-side: bottom;">table of colors</caption>
    <colgroup>
    <col><col style="background: #555555;"><col style="background: #555555;">
    <colgroup>
    <tr><td colspan=3>1st row - table color</td></tr>
    <tr>
    	<td>table color</td>
    	<td>column color</td>
    	<td style="background: #AAAAAA;">cell color</td>
    </tr>
    <tr>
    	<td>table color</td>
    	<td>column color</td>
    	<td>column color</td>
    </tr>
    <tr style="background: #888888;">
    	<td>row color</td>
    	<td>row color</td>
    	<td style="background: #AAAAAA;">cell color</td>
    </tr>
    </table>
    
    table of colors
    1st row - table color
    table color column color cell color
    table color column color column color
    row color row color cell color


    Experimenting with columns and rows...
    <table style="border-collapse: collapse; background: white; color: blue; border: 1px solid black;">
    <colgroup style="border: 1px dotted blue;">
    <col style="border: 1px solid grey;">
    <col style="border: 1px solid grey; background: lightgreen;">
    <col style="border: 1px solid grey;">
    <col style="border: 1px solid grey;">
    </colgroup>
    <tbody style="border: 1px solid purple;">
    <tr><td style="border: 2px dotted blue;">1-1</td><td>1-2</td><td style="border: 2px dotted blue;">1-3</td><td>1-4</td></tr>
    <tr><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td></tr>
    <tr style="border: 1px solid red; background: lightblue;"><td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td></tr>
    <tr><td>4-1</td><td>4-2</td><td>4-3</td><td>4-4</td></tr>
    </tbody>
    </table>
    
    1-11-21-31-4
    2-12-22-32-4
    3-13-23-33-4
    4-14-24-34-4

    Table Cell Borders

    There are two types of border models in CSS. For elements of display value table or table-inline - Attribute:

    border-collapse

    can have the values of:

    Separated Cell Borders

    Separate things...

    border-spacing

    Replaces cellspacing element. For elements of display value table or table-inline and border-collapse value of separate. Values are:
    <table style="border-collapse: separate; padding: 10px; border: 2px solid black;">
    <tr>
    	<td style="border-spacing: 3px 5px; border: 1px solid gray;">cell one</td>
    	<td style="border-spacing: 3px 5px; border: 1px solid gray; border-width: 5px;">cell two</td>
    </tr>
    <tr>
    	<td style="border-spacing: 3px 5px; border: 1px solid gray;">cell three</td>
    	<td style="border-spacing: 3px 5px; border: 5px solid gray;">cell four</td>
    </tr>
    </table>
    
    cell one cell two
    cell three cell four

    Handling empty cells

    empty-cells:
    makes it so you don't have to put a &nbsp; in a cell to show the borders. Not fully suportted in IE6. show
    1 2 3
    4 5

    hide
    1 2 3
    4 5

    Collapsing cell borders

    Border Collapsing order

    Click here for an example of collapsing order.

    Table Sizing

    Width

    table-layout

    use width: <width> in a style statement.

    note that this does not always work cleanly (i.e. IE6). Use DIVs inside TDs or THs and set width (remember to take into account border and padding).

    Click here for an example of table-layout and width.

    Height

    height: <height>

    Alignment

    vertical-align

    <td style="border: 1px solid; background: silver; padding: 0; vertical-align: top; height: 10em;">
    <div style="border: 1px dashed gray; background: white;">
    The contents of this cell are top-aligned.
    </div>
    </td>
    
    <td style="border: 1px solid; background: silver; padding: 0; vertical-align: middle;">
    <div style="border: 1px dashed gray; background: white;">
    The contents of this cell are top-aligned.
    </div>
    </td>
    
    <td style="border: 1px solid; background: silver; padding: 0; vertical-align: bottom;">
    <div style="border: 1px dashed gray; background: white;">
    The contents of this cell are top-aligned.
    </div>
    </td>
    
    The contents of this cell are top-aligned.
    The contents of this cell are top-aligned.
    The contents of this cell are top-aligned.

    CSS Popups

    Got this from http://psacake.com/web/jl.asp

    css popupa pure css popup

    a.info{
        position:relative; /*this is the key*/
    	z-index:24; background-color:#ccc;
    	color:#000;
    	text-decoration:none}
    
    a.info:hover{z-index:25; background-color:#ff0}
    
    a.info span{display: none}
    
    a.info:hover span{ /*the span will display just on :hover state*/
    	display:block;
    	position:absolute;
    	top:2em; left:2em; width:15em;
    	border:1px solid #0cf;
    	background-color:#cff; color:#000;
    	text-align: center}
    	

    Horizontal menu

    Got this from http://www.devinrolsen.com/pure-css-horizontal-menu/
    Doesn't work in IE6 - check out separate menu version
    #navigation
        {width:100%; height:20px; background-color:#999;}
    #navigation ul
        {margin:0px; padding:0px 0px 0px 2px;}
    #navigation ul li
        {display:inline; height:20px; float:left;
         list-style:none; margin-left:5px; width: 85px; position: relative;}
    #navigation ul li a
        {color:#fff; text-decoration:none;}
    #navigation li a:hover
        {color:#fff; text-decoration: none;}
    
    /* sub menu */
    #navigation ul li ul
        {margin:0px; padding:0px; display:none; position: absolute; left: -2px;
         top: 20px; background-color: #999;}
    #navigation ul li:hover ul
        {display:block; width: 90px;}
    #navigation ul li ul li
        {list-style:none; display:list-item; height: 15px; margin: 0px 3px 8px 3px;}
    #navigation ul li ul li a
        {color:#fff;; text-decoration: none;}
    #navigation ul li ul li a:hover
        {color:#000;; text-decoration: none; background-color: #fff;}

    Bar Charts

    Got these from http://www.alistapart.com/articles/accessibledatavisualization.

    Horizontal Chart

    Basic

    <ul class="chartlist">
    <li>
    	<a href="/fruits/apples/">Apples</a> 
    	<span class="count">420</span>
    </li>
    <li>
    	<a href="/fruits/bananas/">Bananas</a> 
    	<span class="count">280</span>
    </li>
    <li>
    	<a href="/fruits/cherries/">Cherries</a> 
    	<span class="count">200</span>
    </li>
    <li>
    	<a href="/fruits/dates/">Dates</a> 
    	<span class="count">100</span>
    </li>
    </ul>
    

    Horizontal Chart - first styling

    .chartlist li { 
      position: relative;     (element box offset some position, retain original space)
      display: block;         (changing this also removes the bullets)
      border: 1px solid aqua; (border put in to outline element)
    }
    .chartlist .count { 
      display: block;         
      position: absolute;       (parent element li is relative.  it becomes containing block)
                                (remove from flow of doc, pos with respect to containing block)
                                (original flow closes up)
      top: 0; 
      right: 0; 
      margin: 0 0.3em; 
      text-align: right; 
      color: #999; 
      font-weight: bold; 
      font-size: 0.875em; 
      border: 1px solid orange; (border put in to outline element)
    }
    .chartlist li a { 
      display: block;                    (block takes up the entire line (within the li))
                                         (pushes the .index span down)
      position: relative;                (element box offset some pos, retain original space)
                                         (if this were absolute, space would close up,
                                          and .index span would be next to the a element)
      padding: 0.4em 4.5em 0.4em 0.5em;
      z-index: 2;                        (raise it so it will always be visible)
      border: 1px solid purple;          (border put in to outline element) 
    }
    
    <ul class="chartlist"> <li> <a href="/fruits/apples/">Apples</a> <span class="count">420</span> <span class="index" style="width: 42%;">(42%)</span> (width style doesn't do anything for spans (until we style it later)) </li> <li> <a href="/fruits/bananas/"> Bananas</a> <span class="count">280</span> <span class="index" style="width: 28%;">(28%)</span> </li> <li> <a href="/fruits/cherries/"> Cherries</a> <span class="count">200</span> <span class="index" style="width: 20%;">(20%)</span> </li> <li> <a href="/fruits/dates/">Dates</a> <span class="count">100</span> <span class="index" style="width: 10%;">(10%)</span> </li> </ul>

    Horizontal Chart - additional styling

    .chartlist .index { 
      display: block;       (block normally takes up the entire line (within the li?)
                             we have set width so it does not)
      position: absolute;   (remove from flow of doc, pos with respect to containing block (li?))
                            (original flow closes up)
      top: 0;               (we're moving it up to the top of the containing block)
      left: 0; 
      height: 100%;         (set the width to 100% to fill the entire containing block (li?) with
                             the background color)
      background: #B8E4F5; 
      text-indent: -9999px; (hide the actual percentage value (e.g. (42%)),
                             value still in for graceful degradation
      overflow: hidden;     (cuts off overflow text outside of containing block (li?)
                             may not be needed?)
    }
    

    Horizontal Chart - final styling

    .chartlist3 { 
      float: left;                       (have other elements flow around this if they exist)
      border-top: 1px solid #EEE;        (remove the other borders; style a dividing line)
      width: 15em;                       (set the width so it is smaller on the page)
    }
    .chartlist3 li { 
      position: relative;
      display: block;  
      border-bottom: 1px solid #EEE;     (remove the other borders; style a dividing line)
      _zoom: 1;                          (deal with the haslayout bug in IE)
    }
    .chartlist3 li a { 
      display: block; 
      padding: 0.4em 4.5em 0.4em 0.5em;
      position: relative; 
      z-index: 2; 
    }
    .chartlist3 .count {                 (the number to the right)
      display: block; 
      position: absolute; 
      top: 0; 
      right: 0; 
      margin: 0 0.3em; 
      text-align: right; 
      color: #999; 
      font-weight: bold; 
      font-size: 0.875em; 
      line-height: 2em; 
    }
    .chartlist3 .index3 {                (the span percentage width)
      display: block; 
      position: absolute; 
      top: 0; 
      left: 0; 
      height: 100%; 
      background: #B8E4F5; 
      text-indent: -9999px; 
      overflow: hidden; 
      line-height: 2em;
    }
    .chartlist3 li:hover {               (add the hover with a background; now the entire <a element
      background: #EFEFEF;                (which is css'ed to a block element) hover highlights)
    }
    

    Vertical Chart

    Basic

    <ul class="timeline">
      <li>
        <a href="/2007/dec/1/" title="December 1, 2007: 40">
          <span class="label">1</span>
          <span class="count">(40)</span>
        </a>
      </li>
      <li>
        <a href="/2007/dec/2/" title="December 2, 2007: 100">
          <span class="label">2</span>
          <span class="count">(100)</span>
        </a>
      </li>
        <li>
        <a href="/2007/dec/3/" title="December 3, 2007: 80">
          <span class="label">3</span>
          <span class="count">(80)</span>
        </a>
      </li>
      <li>
        <a href="/2007/dec/4/" title="December 4, 2007: 60">
          <span class="label">4</span>
          <span class="count">(60)</span>
        </a>
      </li>
    </ul>
    

    First Styling

    .timeline {
      font-size: 0.75em; 
      height: 10em;
    }
    .timeline li {
      display: block;      (lose the bullet among other things) 
      height: 8em;         (the height of the bar)
      width: 1.5em;        (the width of the bar)
      position: relative;  (set up for sub-elements)
      float: left;         (float it left so the next bar can be directly to the right)
      margin: 0 0.1em;
      border: 1px solid black;  (just to outline the element)
    }
    .timeline li a { 
       display: block;     (change the <a to be a block element)
       height: 100%;       (have it fill the entire containing element (li?)
                            now the entire block will be clickable)
    }
    
    <ul class="timeline"> <li> <a href="/2007/dec/1/" title="December 1, 2007: 40"> <span class="label">1</span> <span class="count" style="height: 40%">(40)</span> </a> </li> <li> <a href="/2007/dec/2/" title="December 2, 2007: 100"> <span class="label">2</span> <span class="count" style="height: 100%">(100)</span> </a> </li> <li> <a href="/2007/dec/3/" title="December 3, 2007: 80"> <span class="label">3</span> <span class="count" style="height: 80%">(80)</span> </a> </li> <li> <a href="/2007/dec/4/" title="December 4, 2007: 60"> <span class="label">4</span> <span class="count" style="height: 60%">(60)</span> </a> </li> </ul>

    Additional Styling

    .timeline li .label { 
      display: block;            (change from inline to block)
      position: absolute;        (remove from flow of doc, pos with respect to containing block (li?))
                                 (original flow closes up)
      bottom: -2em;              (move it 2em below the container (li?))
      line-height: 2em;
      left: 0;
      width: 100%;               (make sure the width fills the container)
      text-align: center;
      border: 1px solid orange;  (temporary border so we can see position)
    }
    

    3rd styling

    .timeline li a .count { 
      display: block; 
      position: absolute; 
      bottom: 0; 
      left: 0; 
      text-indent: -9999px; 
      overflow: hidden;
      width: 100%; 
      height: 0;             (height styles are in each count span class)
      background: #AAA; 
    }
    

    Final styling

    .timeline3 { 
      font-size: 0.75em; 
      height: 10em; 
      width: 53em;
    }
    .timeline3 li { 
      display: block;
      position: relative;
      float: left;
      width: 1.5em; 
      margin: 0 0.1em;
      height: 8em; 
    }
    .timeline3 li a { 
      display: block;
      height: 100%;  
    }
    .timeline3 li a {
      color: #2D7BB2; 
      text-decoration: none;  (this didn't work in .label below)
      font-weight: bold; 
    }
    .timeline3 li .label {  (span with the label/number)
      display: block; 
      position: absolute; 
      bottom: -2em; 
      left: 0; 
      background: #fff; 
      width: 100%; 
      height: 2em; 
      line-height: 2em; 
      text-align: center;
      text-decoration: none; 
      font-weight: bold; 
    }
    .timeline3 li a .count { 
      display: block; 
      position: absolute; 
      bottom: 0; 
      left: 0; 
      height: 0; 
      width: 100%; 
      background: #AAA; 
      text-indent: -9999px; 
      overflow: hidden; 
    }
    .timeline3 li:hover { 
      background: #EFEFEF; 
    }
    .timeline3 li a:hover .count { 
      background: #2D7BB2; 
    }