Saturday, February 28, 2009

100% height model css?

I had been looking around for a way to accomplish fixed header and footer on a website when scrolling, and somehow i haven't got it right with background attachment: fixed, neither i got it with absolute position...

I have a main Div called wrapper, inside there are three main Divs: header, content and footer, and each one of them has sub Divs inside for the content of each one. So the structure goes something like this in general terms:


[ Div:wrapper


is there any way to accomplish that the header and footer remain "locked" at the top and bottom of the browser window and only the content scrolls down.

See Here is the proper solution:

html, body {
height: 100%;

body {
any other styles;

#container {
min-height: 100%;
other styles;
* html #container {height: 100%;}/*IE6*/

this way, your page start out 100% but can grow bigger as content demands.

Friday, February 6, 2009

The Complete CSS Tags

Text and Fonts


Colours and Backgrounds

The Box Model - dimensions, padding, margin and borders

Positioning and Display



Generated Content

Paged Media


The Whole Shebang

The benefits of Web Standards to your visitors, your clients and you!

  1. The Web Standards
  2. What are Web Standards about?
  3. A mindset change
  4. Semantically correct markup
  5. What is valid code?
  6. What is accessible code?
  7. Why use CSS to separate content from presentation?
  8. A CSS based site in action
  9. How do your VISITORS benefit from Web Standards?
  10. How do your CLIENTS benefit from Web Standards?
  11. How do YOU benefit from Web Standards?
  12. What are the downsides
  13. How do you achieve Web Standards?
  14. Conclusion
  15. Web Standards resources

Why tables for layout is stupid:

Tables existed in HTML for one reason: To display tabular data. But then border="0" made it possible for designers to have a grid upon which to lay out images and text. Still the most dominant means of designing visually rich Web sites, the use of tables is now actually interfering with building a better, more accessible, flexible, and functional Web. Find out where the problems stem from, and learn solutions to create transitional or completely table-less layout.

The problem with using tables:
  • mixes presentational data in with your content.
    • This makes the file sizes of your pages unnecessarily large, as users must download this presentational data for each page they visit.
    • Bandwidth ain't free.
  • This makes redesigns of existing sites and content extremely labor intensive (and expensive).
  • It also makes it extremely hard (and expensive) to maintain visual consistency throughout a site.
  • Table-based pages are also much less accessible to users with disabilities and viewers using cell phones and PDAs to access the Web.

Modern browsers are much better at rendering Web standards and we don't need to use these archaic methods any more.

Instead of nesting tables within tables and filling empty cells with spacer GIFs, we can use much simpler markup and CSS to lay out beautiful sites that are faster to load, easier to redesign, and more accessible to everyone.

By using structural markup in our HTML documents and Cascading Style Sheets to lay out our pages, we can keep the actual content of our pages separated from the way they are presented.

This has several advantages over using tables....

Redesigns are easier and less expensive

By removing presentational markup from your pages, redesigns of existing sites and content is much less labor intensive (and much less expensive). To change the layout of the site, all you need to do is change the style sheets; you do not need to edit the pages themselves at all.

Using Web standards reduces the file sizes of your pages, as users no longer need to download presentational data with each page they visit. The Style sheets that control layout are cached by viewers' browsers.

Reduced file size means faster loads and lower hosting costs.

Using Web standards also makes it extremely easy to maintain visual consistency throughout a site. Since pages use the same CSS document for their layout, they are all formatted the same.

This strengthens your brand and makes your site more usable.

Using Web standards makes our pages much more accessible to users with disabilities and to viewers using mobile phones and PDAs to access the Web.

Visitors using screen readers (as well as those with slow connections) do not have to wade through countless table cells and spacers to get at the actual content of our pages.

In other words, separating content from the way it is presented makes your content device-independent.

Speaking of accessiblity, minimizing your markup and using header tags properly will also help improve your search engine ranking.

Reducing the ratio of code to content, using keywords in your header tags, and replacing header GIFs with actual text will all help your sites get better search engine results.

Thursday, February 5, 2009

IE and width & height issues

IE has a rather strange way of doing things. It doesn't understand the min-width and min-height commands, but instead interprets width and height as min-width and min-height - go figure!

This can cause problems, because we may need boxes to be resizable should more text need to go in them or should the user resize text. If we only use the width and height commands on a box then non-IE browsers won't allow the box to resize. If we only use the min-width and min-height commands though then we can't control the width or height in IE!

This can be especially problematic when using background images. If you're using a background image that's 80px wide and 35px high, then you'll want to make sure that the default size for a box using this image is exactly 80 x 35px. However, if users resize the text then the box size will need to expand gracefully.

To resolve this problem, you can use the following code for a box with class="box":

width: 80px;
height: 35px;

html>body .box
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;

All browsers will read through the first CSS rule but IE will ignore the second rule because it makes use of the child selector command5. Non-IE browsers will read through the second one and will override the values from the first rule because this CSS rule is more specific, and CSS rules that are more specific always override those that are less specific.

Minimum width for a page

A very handy CSS command that exists is the min-width command, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page.

Unfortunately, IE doesn't understand this command, so we'll need to come up with a new way of making this work in this browser. First, we'll insert a <div> under the <body> tag, as we can't assign a minimum width to the <body>:

<div id="container">

Next we create our CSS commands, so as to create a minimum width of 600px:

min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );

The first command is the regular minimum width command; the second is a short JavaScript command that only IE understands. Do note though, this command will cause your CSS document to invalidate so you may prefer to insert it into the head of each HTML document to get round this.

You might also want to combine this minimum width with a maximum width:

min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");

Wednesday, February 4, 2009

ANSI character set and equivalent Unicode and HTML characters

The characters that appear in the first column of the following table are generated from Unicode numeric character references, and so they should appear correctly in any Web browser that supports Unicode and that has suitable fonts available, regardless of the operating system.

HTML 4.0
Unicode NameUnicode Range
' '32320x20U+0020
spaceBasic Latin
exclamation markBasic Latin
"34340x22U+0022&quot;quotation markBasic Latin
number signBasic Latin
dollar signBasic Latin
percent signBasic Latin
&38380x26U+0026&amp;ampersandBasic Latin
apostropheBasic Latin
left parenthesisBasic Latin
right parenthesisBasic Latin
asteriskBasic Latin
plus signBasic Latin
commaBasic Latin
hyphen-minusBasic Latin
full stopBasic Latin
solidusBasic Latin
digit zeroBasic Latin
digit oneBasic Latin
digit twoBasic Latin
digit threeBasic Latin
digit fourBasic Latin
digit fiveBasic Latin
digit sixBasic Latin
digit sevenBasic Latin
digit eightBasic Latin
digit nineBasic Latin
colonBasic Latin
semicolonBasic Latin
<60600x3CU+003C&lt;less-than signBasic Latin
equals signBasic Latin
>62620x3EU+003E&gt;greater-than signBasic Latin
question markBasic Latin
commercial atBasic Latin
Latin capital letter ABasic Latin
Latin capital letter BBasic Latin
Latin capital letter CBasic Latin
Latin capital letter DBasic Latin
Latin capital letter EBasic Latin
Latin capital letter FBasic Latin
Latin capital letter GBasic Latin
Latin capital letter HBasic Latin
Latin capital letter IBasic Latin
Latin capital letter JBasic Latin
Latin capital letter KBasic Latin
Latin capital letter LBasic Latin
Latin capital letter MBasic Latin
Latin capital letter NBasic Latin
Latin capital letter OBasic Latin
Latin capital letter PBasic Latin
Latin capital letter QBasic Latin
Latin capital letter RBasic Latin
Latin capital letter SBasic Latin
Latin capital letter TBasic Latin
Latin capital letter UBasic Latin
Latin capital letter VBasic Latin
Latin capital letter WBasic Latin
Latin capital letter XBasic Latin
Latin capital letter YBasic Latin
Latin capital letter ZBasic Latin
left square bracketBasic Latin
reverse solidusBasic Latin
right square bracketBasic Latin
circumflex accentBasic Latin
low lineBasic Latin
grave accentBasic Latin
Latin small letter aBasic Latin
Latin small letter bBasic Latin
Latin small letter cBasic Latin
Latin small letter dBasic Latin
Latin small letter eBasic Latin
Latin small letter fBasic Latin
Latin small letter gBasic Latin
Latin small letter hBasic Latin
Latin small letter iBasic Latin
Latin small letter jBasic Latin
Latin small letter kBasic Latin
Latin small letter lBasic Latin
Latin small letter mBasic Latin
Latin small letter nBasic Latin
Latin small letter oBasic Latin
Latin small letter pBasic Latin
Latin small letter qBasic Latin
Latin small letter rBasic Latin
Latin small letter sBasic Latin
Latin small letter tBasic Latin
Latin small letter uBasic Latin
Latin small letter vBasic Latin
Latin small letter wBasic Latin
Latin small letter xBasic Latin
Latin small letter yBasic Latin
Latin small letter zBasic Latin
left curly bracketBasic Latin
vertical lineBasic Latin
right curly bracketBasic Latin
tildeBasic Latin

(not used)
12883640x80U+20AC&euro;euro signCurrency Symbols

(not used)
13082180x82U+201A&sbquo;single low-9 quotation markGeneral Punctuation
ƒ1314020x83U+0192&fnof;Latin small letter f with hookLatin Extended-B
13282220x84U+201E&bdquo;double low-9 quotation markGeneral Punctuation
13382300x85U+2026&hellip;horizontal ellipsisGeneral Punctuation
13482240x86U+2020&dagger;daggerGeneral Punctuation
13582250x87U+2021&Dagger;double daggerGeneral Punctuation
ˆ1367100x88U+02C6&circ;modifier letter circumflex accentSpacing Modifier Letters
13782400x89U+2030&permil;per mille signGeneral Punctuation
Š1383520x8AU+0160&Scaron;Latin capital letter S with caronLatin Extended-A
13982490x8BU+2039&lsaquo;single left-pointing angle quotation markGeneral Punctuation
Œ1403380x8CU+0152&OElig;Latin capital ligature OELatin Extended-A

(not used)
Latin capital letter Z with caronLatin Extended-A

(not used)

(not used)
14582160x91U+2018&lsquo;left single quotation markGeneral Punctuation
14682170x92U+2019&rsquo;right single quotation markGeneral Punctuation
14782200x93U+201C&ldquo;left double quotation markGeneral Punctuation
14882210x94U+201D&rdquo;right double quotation markGeneral Punctuation
14982260x95U+2022&bull;bulletGeneral Punctuation
15082110x96U+2013&ndash;en dashGeneral Punctuation
15182120x97U+2014&mdash;em dashGeneral Punctuation
˜1527320x98U+02DC&tilde;small tildeSpacing Modifier Letters
15384820x99U+2122&trade;trade mark signLetterlike Symbols
š1543530x9AU+0161&scaron;Latin small letter s with caronLatin Extended-A
15582500x9BU+203A&rsaquo;single right-pointing angle quotation markGeneral Punctuation
œ1563390x9CU+0153&oelig;Latin small ligature oeLatin Extended-A

(not used)
Latin small letter z with caronLatin Extended-A
Ÿ1593760x9FU+0178&Yuml;Latin capital letter Y with diaeresisLatin Extended-A

1601600xA0U+00A0&nbsp;no-break spaceLatin-1 Supplement
¡1611610xA1U+00A1&iexcl;inverted exclamation markLatin-1 Supplement
¢1621620xA2U+00A2&cent;cent signLatin-1 Supplement
£1631630xA3U+00A3&pound;pound signLatin-1 Supplement
¤1641640xA4U+00A4&curren;currency signLatin-1 Supplement
¥1651650xA5U+00A5&yen;yen signLatin-1 Supplement
¦1661660xA6U+00A6&brvbar;broken barLatin-1 Supplement
§1671670xA7U+00A7&sect;section signLatin-1 Supplement
¨1681680xA8U+00A8&uml;diaeresisLatin-1 Supplement
©1691690xA9U+00A9&copy;copyright signLatin-1 Supplement
ª1701700xAAU+00AA&ordf;feminine ordinal indicatorLatin-1 Supplement
«1711710xABU+00AB&laquo;left-pointing double angle quotation markLatin-1 Supplement
¬1721720xACU+00AC&not;not signLatin-1 Supplement
­1731730xADU+00AD&shy;soft hyphenLatin-1 Supplement
®1741740xAEU+00AE&reg;registered signLatin-1 Supplement
¯1751750xAFU+00AF&macr;macronLatin-1 Supplement
°1761760xB0U+00B0&deg;degree signLatin-1 Supplement
±1771770xB1U+00B1&plusmn;plus-minus signLatin-1 Supplement
²1781780xB2U+00B2&sup2;superscript twoLatin-1 Supplement
³1791790xB3U+00B3&sup3;superscript threeLatin-1 Supplement
´1801800xB4U+00B4&acute;acute accentLatin-1 Supplement
µ1811810xB5U+00B5&micro;micro signLatin-1 Supplement
1821820xB6U+00B6&para;pilcrow signLatin-1 Supplement
·1831830xB7U+00B7&middot;middle dotLatin-1 Supplement
¸1841840xB8U+00B8&cedil;cedillaLatin-1 Supplement
¹1851850xB9U+00B9&sup1;superscript oneLatin-1 Supplement
º1861860xBAU+00BA&ordm;masculine ordinal indicatorLatin-1 Supplement
»1871870xBBU+00BB&raquo;right-pointing double angle quotation markLatin-1 Supplement
¼1881880xBCU+00BC&frac14;vulgar fraction one quarterLatin-1 Supplement
½1891890xBDU+00BD&frac12;vulgar fraction one halfLatin-1 Supplement
¾1901900xBEU+00BE&frac34;vulgar fraction three quartersLatin-1 Supplement
¿1911910xBFU+00BF&iquest;inverted question markLatin-1 Supplement
À1921920xC0U+00C0&Agrave;Latin capital letter A with graveLatin-1 Supplement
Á1931930xC1U+00C1&Aacute;Latin capital letter A with acuteLatin-1 Supplement
Â1941940xC2U+00C2&Acirc;Latin capital letter A with circumflexLatin-1 Supplement
Ã1951950xC3U+00C3&Atilde;Latin capital letter A with tildeLatin-1 Supplement
Ä1961960xC4U+00C4&Auml;Latin capital letter A with diaeresisLatin-1 Supplement
Å1971970xC5U+00C5&Aring;Latin capital letter A with ring aboveLatin-1 Supplement
Æ1981980xC6U+00C6&AElig;Latin capital letter AELatin-1 Supplement
Ç1991990xC7U+00C7&Ccedil;Latin capital letter C with cedillaLatin-1 Supplement
È2002000xC8U+00C8&Egrave;Latin capital letter E with graveLatin-1 Supplement
É2012010xC9U+00C9&Eacute;Latin capital letter E with acuteLatin-1 Supplement
Ê2022020xCAU+00CA&Ecirc;Latin capital letter E with circumflexLatin-1 Supplement
Ë2032030xCBU+00CB&Euml;Latin capital letter E with diaeresisLatin-1 Supplement
Ì2042040xCCU+00CC&Igrave;Latin capital letter I with graveLatin-1 Supplement
Í2052050xCDU+00CD&Iacute;Latin capital letter I with acuteLatin-1 Supplement
Î2062060xCEU+00CE&Icirc;Latin capital letter I with circumflexLatin-1 Supplement
Ï2072070xCFU+00CF&Iuml;Latin capital letter I with diaeresisLatin-1 Supplement
Ð2082080xD0U+00D0&ETH;Latin capital letter EthLatin-1 Supplement
Ñ2092090xD1U+00D1&Ntilde;Latin capital letter N with tildeLatin-1 Supplement
Ò2102100xD2U+00D2&Ograve;Latin capital letter O with graveLatin-1 Supplement
Ó2112110xD3U+00D3&Oacute;Latin capital letter O with acuteLatin-1 Supplement
Ô2122120xD4U+00D4&Ocirc;Latin capital letter O with circumflexLatin-1 Supplement
Õ2132130xD5U+00D5&Otilde;Latin capital letter O with tildeLatin-1 Supplement
Ö2142140xD6U+00D6&Ouml;Latin capital letter O with diaeresisLatin-1 Supplement
×2152150xD7U+00D7&times;multiplication signLatin-1 Supplement
Ø2162160xD8U+00D8&Oslash;Latin capital letter O with strokeLatin-1 Supplement
Ù2172170xD9U+00D9&Ugrave;Latin capital letter U with graveLatin-1 Supplement
Ú2182180xDAU+00DA&Uacute;Latin capital letter U with acuteLatin-1 Supplement
Û2192190xDBU+00DB&Ucirc;Latin capital letter U with circumflexLatin-1 Supplement
Ü2202200xDCU+00DC&Uuml;Latin capital letter U with diaeresisLatin-1 Supplement
Ý2212210xDDU+00DD&Yacute;Latin capital letter Y with acuteLatin-1 Supplement
Þ2222220xDEU+00DE&THORN;Latin capital letter ThornLatin-1 Supplement
ß2232230xDFU+00DF&szlig;Latin small letter sharp sLatin-1 Supplement
à2242240xE0U+00E0&agrave;Latin small letter a with graveLatin-1 Supplement
á2252250xE1U+00E1&aacute;Latin small letter a with acuteLatin-1 Supplement
â2262260xE2U+00E2&acirc;Latin small letter a with circumflexLatin-1 Supplement
ã2272270xE3U+00E3&atilde;Latin small letter a with tildeLatin-1 Supplement
ä2282280xE4U+00E4&auml;Latin small letter a with diaeresisLatin-1 Supplement
å2292290xE5U+00E5&aring;Latin small letter a with ring aboveLatin-1 Supplement
æ2302300xE6U+00E6&aelig;Latin small letter aeLatin-1 Supplement
ç2312310xE7U+00E7&ccedil;Latin small letter c with cedillaLatin-1 Supplement
è2322320xE8U+00E8&egrave;Latin small letter e with graveLatin-1 Supplement
é2332330xE9U+00E9&eacute;Latin small letter e with acuteLatin-1 Supplement
ê2342340xEAU+00EA&ecirc;Latin small letter e with circumflexLatin-1 Supplement
ë2352350xEBU+00EB&euml;Latin small letter e with diaeresisLatin-1 Supplement
ì2362360xECU+00EC&igrave;Latin small letter i with graveLatin-1 Supplement
í2372370xEDU+00ED&iacute;Latin small letter i with acuteLatin-1 Supplement
î2382380xEEU+00EE&icirc;Latin small letter i with circumflexLatin-1 Supplement
ï2392390xEFU+00EF&iuml;Latin small letter i with diaeresisLatin-1 Supplement
ð2402400xF0U+00F0&eth;Latin small letter ethLatin-1 Supplement
ñ2412410xF1U+00F1&ntilde;Latin small letter n with tildeLatin-1 Supplement
ò2422420xF2U+00F2&ograve;Latin small letter o with graveLatin-1 Supplement
ó2432430xF3U+00F3&oacute;Latin small letter o with acuteLatin-1 Supplement
ô2442440xF4U+00F4&ocirc;Latin small letter o with circumflexLatin-1 Supplement
õ2452450xF5U+00F5&otilde;Latin small letter o with tildeLatin-1 Supplement
ö2462460xF6U+00F6&ouml;Latin small letter o with diaeresisLatin-1 Supplement
÷2472470xF7U+00F7&divide;division signLatin-1 Supplement
ø2482480xF8U+00F8&oslash;Latin small letter o with strokeLatin-1 Supplement
ù2492490xF9U+00F9&ugrave;Latin small letter u with graveLatin-1 Supplement
ú2502500xFAU+00FA&uacute;Latin small letter u with acuteLatin-1 Supplement
û2512510xFBU+00FB&ucirc;Latin small letter with circumflexLatin-1 Supplement
ü2522520xFCU+00FC&uuml;Latin small letter u with diaeresisLatin-1 Supplement
ý2532530xFDU+00FD&yacute;Latin small letter y with acuteLatin-1 Supplement
þ2542540xFEU+00FE&thorn;Latin small letter thornLatin-1 Supplement
ÿ2552550xFFU+00FF&yuml;Latin small letter y with diaeresisLatin-1 Supplement

CSS Block and inline level elements

Nearly all HTML elements are either block or inline elements. The characteristics of block elements include:

  • begin on a new line
  • Height, line-height and top and bottom margins can be manipulated
  • defaults to 100% of their containing element, unless a width is specified

Examples of block elements include <div>, <p>, <h1>, <form>, <ul> and <li>. Inline elements on the other hand have the opposite characteristics:

Begin on the same line
Height, line-height and top and bottom margins can't be changed
Width is as long as the text/image and can't be manipulated

Examples of inline elements include <span>, <a>, <label>, <input>, <img>, <strong> and <em>.

To change an element's status you can use display: inline or display: block. But what's the point of changing an element from being block to inline, or vice-versa? Well, at first it may seem like you might hardly ever use this, but in actual fact this is a very powerful technique, which you can use any time you want to:

  • Have an inline element start on a new line .
  • Have a block element start on the same line
  • Control the width of an inline element (particularly useful for navigation links)
  • Manipulate the height of an inline element Set a background colour as wide as the text for block elements, without having to specify a width