/* SEE INSTRUCTIONS AT BOTTOM */ body { margin:50px 0px; padding:0px; text-align: center; background-color: #999; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif; } h1,h2,h3 {font-family: "Times New Roman", Times, serif;} h1 {font-size: 22px; color: #063;} h2 {font-size: 18px; color: #063;} h3 {font-size: 16px; color: #063;} p.first, h1.first, h2.first, h3.first {margin: 0; padding-top: .8em;} a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #0000FF; } a:link {text-decoration: none;} a:visited {text-decoration: none;} a:active {text-decoration: none;} /* not supported in chrome, firefox? */ a:hover {text-decoration: underline; color: #F00;} /* must have this last to take precedence over visited */ div#wrapper { background-color:#eee; width:700px; margin:30px auto; padding:0px; border:1px solid #333; text-align: left; position: relative; } div#header { background-color:#eee; padding: 10px; margin: 0px; text-align: center; } div#nav { background-color:#ddd; width: 150px; padding: 0px 40px 25px; margin: 0px 0px; float: left; } div#main { background-color:#a86; margin-left: 230px; margin-top: 0px; padding: 0px 15px 25px; text-align: justify; } div#footer { clear:both; background-color:#68a; padding: 8px; border-top: thin solid #000; margin: 0px; } div#footer ul li{ color : #000000; background-color : transparent; display: inline; } div#footer ul li a{ color : #15A; background-color : transparent; text-decoration : none; } div#footer ul li a:hover{ text-decoration : underline; } div#birdie { background-color : transparent; position:absolute; right: 0px; bottom: 0px; width: 200px; padding: 5px; margin: 0px; text-align: right; } /* =NOTES ON TAG SETTINGS BODY margin: Need to set body margin and padding to get consistency between browsers. text-align: IE5/Win Hack, which centers all block elements, needed because IE5 does not comply with margin auto method. WRAPPER (could have just called it #wrapper instead of div#wrapper) width: or width: 50em;.. the container MUST have a width specified in order to center. If none is specified, the width defaults to the maximum available, so there is nothing to center. The width chosen should be the number of pixels (wide) the you want your web page to occupy. The maximum efficient is about 700 because of common pixel widths of screens. Larger than this will have to be reduced on the fly to fit on many screens. margin: sets left and right to auto (for centering in all browsers but IE), top/bottom to 0 for consistency among browsers. padding: ??? border: set to anything for browser consistency. Other arguments are "dashed". background-color: so you can see it while experimenting text-align: Counteract to IE5/Win Hack in BODY position: position must be defined (as relative or absolute) only if you will want to use absolute or fixed positioning on internal element. HEADER (the top banner of the page) NAV (LEFT COLUMN: for menu or book) width: the width of the contents padding: 30px; border: for fun margin: always define a margin and border for browser consistency float: this slides the div as far left as possible MAIN (RIGHT COLUMN: for content) margin-left: make this the box width of NAV (i.e. width+padding+border+margin). if margin-left is not specified, the contents of MAIN will spill out the left side underneath NAV if the bottom of MAIN is lower than the bottom of NAV. margin-top: padding: 10px; FOOTER (footer and subnavigation) FOOTER UL LI (horizontal list content of footer) display: "inline" makes the list horizontal =CONCEPTS _SPACING See http://www.yourhtmlsource.com/stylesheets/cssspacing.html for the BOX concept and discussion of widths, border, padding. Basically: -width: the width of the CONTENTS (text). The padding, border, and margin will be added on to the specified width to make the box wider. NOTE: IE5 and earlier did not follow this model, instead putting the padding and border within the defined width, often making the box much narrower. By default, a block element occupies minimum height and maximum width available. Progression consists of filling the space downward and constricting it laterally (like filling containers with liquids but upside down). -padding: a space added outside of the width -border: a space added outside of the padding. It can be given colors or patterns. can set "border-style:" as any of: none, dashed, dotted, double, groove, hidden, inset, outset, ridge, solid. border-width: can be thin, medium, thick, or _px. Also have "border-color" Combine all as "border: 4px solid #000" makes thin black line. -margin: a space added outside of the border. Differs from a padding in that adjacent margins (between parallel elements or nested elements) collapse to the larger of the two values. Another difference is that the margin does not take the color defined for the div, while the padding does. Another is that a margin can have negative values (but if want to overlap, use absolute positioning for better consistency among browsers). -alternative orders of arguments for padding/margin: all | top&bottom right&left | top left&right bottom | top right left bottom (i.e. clockwise starting at the top) -units: px, %, or em. use px for most control of layout. _COLUMNS -AS in this file, or see http://www.barelyfitz.com/screencast/html-training/css/positioning/ for alternative methods. Or http://stopdesign.com/archive/2003/09/03/absolute.html. _FONTS & TEXT -font-size: 1.5em; -text-align: left/right/center/justify/inherit _CENTERING (see "WRAPPER") -Center the contents of your page. Must set text-align: center for the body for IE, set l/r margins to auto in the wrapper for other browsers, and then text-align: left in the wrapper to recover from the centering. The wrapper must also have a width defined. If it has no width defined, the width defaults to the maximum available, and there is nothing to center. _RELATIVE POSITIONING simply puts the element that far from WHERE IT WOULD HAVE BEEN. _ABSOLUTE & FIXED POSITIONING -"Position: abosolute" will position the element relative to the innermost parent element (i.e. nearest ancestor) that has position defined as relative or absolute or fixed. If no parent elements have this, then is positioned relative to the body. -fixed is like absolute but is relative to the visible portion of the window (is sticky). _ID and CLASS -ids are practically the same as classes, with one difference. Only one element can be given each id per page. They can be used for elements you know will only occur once, such as header and navigation tables. If you want to use them, the code is the same, but with hashes (#) in place of the dots. -NESTING AND GROUPING ID AND CLASSES. If I wanted all strong elements that are contained in paragraphs to be red, "p strong {color: red; }" This is grouping: "p.first, h1.first, h2.first, h3.first". This grouping nested tags: ".text a, .text a:visited". This is NOT okay: ".text a, a:visited" [a:visited is not nested under .text] _SPAN _span does absolutely nothing on its own, but is a vehicle for class tags or direct definitions. affected text ... or text _INLINE STYLES e.g.

=RULES (TO AVOID PROBLEMS) -ALWAYS define WIDTH AND PADDING for body and all block elements (div, etc.) even if just to 0, for browser consistency. This may have to include the first P or H element inside a div. -Use

where p.first {margin: 0; padding-top: 1em;} for the first

of a div, likewise for H tags. =PROBLEMS -The top of a box element isn't in the right place. Set top padding, border, and margin to 0. Also, if the first content is

or etc., the top margin of

or will be sucked away and appear to be the top margin of the containing div (i.e. it will be outside the colored area of the div). Remove the

or or replace it with

or

h2 here

, etc. so it has padding instead of a margin. -various spacing differences among browsers. First P element in Div in IE may have no preceding space. Define a style for P with 0 margin, replaced by 1em padding. May also try to not assign width and horizontal margin and padding attributes to the same CSS element. Also, do not assign height and vertical margin and padding attributes to the same CSS element. Some suggestions: •Use a div container inside your div container. •add some of these attributes to a p tag inside your div. •Create CSS elements that serve as spacers. •Use absolute positioning. -links (hover, etc.) are behaving erratically. Be sure you are observing the right rules for nesting ID and CLASS (see above) -images align differently relative to top of container in IE (higher) versus FF/Chrome. Precede the image with a P.first as defined in this doc (0 margin, replaced by padding). TROUBLESHOOTING 1. turn off the CSS and see what looks like without. 2. Add borders or background-color to elements or outline Elements in the Web Developer Toolbar. 3. try to validate your code. he problem. 4. Remove the HTML You Know (or Think) Works 5. Go Through the Problem HTML REALLY Slowly Sometimes it’s just as simple as a double quote or single quote that wasn’t closed, an attribute that you misspelled (font colour?), unclosed tag: Hello World!

 6. Color Code It by viewing source in a new browser or using Notepad++. Color coding really helps with simple typos that are going to make up a fair share of the problems you’re experiencing. =PROCESS 1. Get your containers in desired positions. Use the web developer toolbar in Chrome or FF 2. Add content, and tags. 3. Validate your xhtml code: http://validator.w3.org/ and css code: http://jigsaw.w3.org/css-validator/ (or large list here) and make corrections where necessary. 4. Get HELP from google or http://www.w3schools.com/Css/css_reference.asp 5. Check browser compatibility with FF, Chrome, IE, Safari */