How to keep footers at the bottom of the page with CSS

Jul 22

Melvins Web StuffCSS Comments Off

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
This is a site I found that used strictly table-less HTML and CSS to position the footer at the bottom of the page even when there’s littile or no content. I tested it in IE6 & 7, Firefox, and Opera and it worked fine in all 4 browsers.

The @import rule

Apr 26

Melvins Web StuffCSS Comments Off

The ‘@import’ rule allows users to import style rules from other style sheets. Any @import rules must precede all rule sets in a style sheet. The ‘@import’ keyword must be followed by the URI of the style sheet to include. A string is also allowed; it will be interpreted as if it had url(…) around it.

Example(s):

The following lines are equivalent in meaning and illustrate both ‘@import’ syntaxes (one with “url()” and one with a bare string):

@import “mystyle.css”;
@import url(“mystyle.css”);

So that user agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent @import rules. These conditional imports specify comma-separated media types after the URI.

Example(s):

The following rules have the same effect as if the imported style sheet were wrapped in an @media rule for the same media, but it may save the UA a fruitless download.

@import url(“fineprint.css”) print;
@import url(“bluish.css”) projection, tv;

In the absence of any media types, the import is unconditional. Specifying ‘all’ for the medium has the same effect.

CSS Directories

Apr 26

Melvins Web StuffCSS Comments Off

Master Stylesheet

Apr 25

Melvins Web StuffCSS Comments Off

Removes the default browser styling

/***** Global Settings *****/

html, body {
border:0;
margin:0;
padding:0;
}

body {
font:100%/1.25 arial, helvetica, sans-serif;
}

/***** Common Formatting *****/

h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
}

h1 {
padding:30px 0 25px 0;
letter-spacing:-1px;
font:2em arial, helvetica, sans-serif;
}

h2 {
padding:20px 0;
letter-spacing:-1px;
font:1.5em arial, helvetica, sans-serif;
}

h3 {
font:1em arial, helvetica, sans-serif;
font-weight:bold;
}

p, ul, ol {
margin:0;
padding:0 0 18px 0;
}

blockquote {
margin:22px 40px;
padding:0;
}

ul, ol {
list-style:none;
padding:0 0 18px 40px;
}

small {
font-size:0.85em;
}

img {
border:0;
}

acronym, abbr {
cursor:help;
letter-spacing:1px;
border-bottom:1px dashed;
}

/***** Links *****/

a, a:visited {
text-decoration:none;
}

/***** Forms *****/

form {
margin:0;
padding:0;
display:inline;
}

input, select, textarea {
font:1em arial, helvetica, sans-serif;
}

textarea {
line-height:1.25;
}

label {
cursor:pointer;
}

/***** Tables *****/

table {
border:0;
margin:0 0 18px 0;
padding:0;
}

table tr td {
padding:2px;
}

/***** Wrapper *****/

#wrap {
width:960px;
margin:0 auto;
}

/***** Global Classes *****/

.clear { clear:both; }

.float-left { float:left; }
.float-right { float:right; }

.text-left { text-align:left; }
.text-right { text-align:right; }
.text-center { text-align:center; }
.text-justify { text-align:justify; }

.bold { font-weight:bold; }
.italic { font-style:italic; }
.underline { border-bottom:1px solid; }
.highlight { background:#ffc; }

.wrap { width:960px;margin:0 auto; }

.img-left { float:left;margin:4px 10px 4px 0; }
.img-right { float:right;margin:4px 0 4px 10px; }

.nopadding { padding:0; }
.noindent { margin-left:0;padding-left:0; }
.nobullet { list-style:none;list-style-image:none; }