Jeff Jensen Notes CSS

Cascading Style Sheets (CSS) Topics

CSS Primer
CSS Background
CSS Conflict Resolution - Specificity
CSS Rules - Inline, Embedded or Linked Styles
CSS Naming Convention
CSS Layout - Box Model
- Margin and Padding
CSS Positioning
CSS vs Frames
CSS External Style Sheets
CSS and XHTML DIV tags with Google Earth API, Google Maps API and NAVTEQ MapTP AJAX API
Google AJAX API Playground for JavaScript and CSS
CSS References

CSS Primer

Background information on XHTML needed to understand CSS
XHTML is a more structured/strict version of the sloppy HTML. Typically XHTML will require closing tags for all elements
XHTML element is the opening and closing tag
XHTML attribute is information in the opening tag
XML Declaration
- XHTML is an application of XML
- First line of an XHTML must be
  <?xml version="1.0" encoding="iso-8859-1"?>
- Exception if encoding uses UTF-8 then you don't need the XML declaration, but it is a good habit to always add it. (see XHTML Essential Training by Bill Weinman - structure of an XHTML document)
DOCTYPE Declaration Definition
- Example
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- Benefit 1: used to declare the document type and language to the validator. The validator is used to check conformance of the document to the DTD (Document Type Definition). The validator will give a list of errors and warnings if the document doesn't conform to the DTD.
- Benefit 2: enables document switching in some web browsers, that is it puts the web browser in standards compliance mode. Helps to ensure the web design is consistent between web browsers.
HTML element
- is the root element (opening and closing <HTML> tags with the content in between)
- used to help the web browser interpret the language being used in the document
- Example
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
- HTML element has two children, the <HEAD> and <body> tags

CSS Rules - Inline, Embedded or Linked Styles

Inline Styles
- Use the style attribute in any XHTML tag.
- Example
  <h1 style="color: red; font-family:Verdana, sans-serif;">Hello World</h1>
- Not very practical since each tag could be customized differently. If you saved the same style for the given tag, this would still be problematic if an edit needed to be done, would have to visit each and every XHTML element that you wanted to adjust the style
Embedded Styles
- <style type="text/css">
  stylesheet information </style>
- Option 1: CSS ID Selectors, it must be unique ID value for the document it resides in. Typically used for DIVISION tags <DIV>
  - <h1 id="leader">
  - #leader {
    color: red;
    font-family: Verdana, sans-serif;
    }
- Option 2: CSS Type/Element Selectors (XHTML tag). Change the style for all tags in the document
  - h1 {
    color: red;
    font-family: Verdana, sans-serif;
    }
- Option 3: CSS Class Selectors, solves the problem of the ID selector having to be unique for the document it resides in. Class can be applied to different types of elements. Typically used for XHTML tags
  - <h1 class="leader">
  - .leader {
    color: red;
    font-family: Verdana, sans-serif;
    }
Linked Styles (External Stylesheet)
- similar to using the same image on multiple pages, change the image and its is updated in all the linked pages
- <link type="text/css" rel="stylesheet" href="styles.css" media="screen" />
- References:
  - "Only CSS rules (selectors, properties, and values) are coded in an external style sheet. Next, associate that style to a Web page using the <link /> element in the header section of the page. Three attributes are used with the <link /> element to associate a Web page with an external style sheet: rel, href, and type. The value of the rel attribute is stylesheet. The value of the href attribute is the name of the style sheet file. The value of the type attribute is text/css, which is the MIME type for a style sheet." (Web Development and Design Foundations with XHTML, 5th Edition by Terry Felke-Morris, p. 95)
  - w3schools - How to Insert a Style Sheet

CSS vs Frames

Question by Rick: With frames, Ican set up links/buttons on one side that when clicked, the opposing frame loads another page. How does this work using CSS without having the other page include the menu, the header, the footer, etc. Can a div tag hold "content.html" until a nav button is clicked, at which point "content2.html" is loaded in the div?
Answer by Tom Sherman: Not possible. The entire page will reload. What you want to use is an IFRAME.
Quasi-frames with CSS: A layout with a different flavor by Tom Sherman

CSS and Faux Columns

Problem: CSS elements only stretch vertically as far as they need to. So if you have an image which has a height of 200 pixels and its contained in a division tag <div>, the <div> will only expand down the page 200 pixels.
Solution is to use the clear property when using floating <div> elements
How to clear a float
- Option 1: in the parent division element <div> add overflow: auto;
- Option 2: add a break <br> within the float <div> and a class of clear
  - .clear {clear: both;}
  - <br class="clear" />
- Option 3: add another division element and call the clear class
  - .clear {clear: both;}
  - <div class="clear"></div>
- References
  - Peter-Paul Koch's Clearing floats article
  - Transcending CSS by Andy Clarke. ISBN: 0-321-41097-1. Clearing floats without added markup on p. 307.
  - see CSS for Designers with Molly Holzschlag and Andy Clarke, lynda.com video, Chapter 9: CSS Floats, Video Section: Clearing floats video
Faux Columns by Dan Cederholm from A List Apart
also see Create Faux Columns in Styling Web Pages with CSS by Tom Negrino and Dori Smith

CSS Units

w3schools CSS measurements and colors

CSS Background

"XHTML provides the structure of the document; CSS defines the presentation of the content, telling the Web browser how it should display the content to the user. For example, you use CSS to define the font of the text on the page, and where the text appears on the page." (Styling Web Pages with CSS by Tom Negrino and Dori Smith, ISBN-13: 978-0-321-55557-1, p. 1)
Use CSS for presentation and HTML for content
CSS rule - two parts: the tag selector (or selector) and the declaration block
- - see Introduction to CSS by Luka Abrus, Technology Specialist, Mirosoft Croatia
- h1 {font-size: 1.5em;}
- h1 is the selector
- {font-size: 1.5em;} is the declaration block
- how it works - all <h1> HTML tags will be displayed in the web page with a text size of 1.5em, where an em is the width of the letter M for the given font.
- declaration block is made of one or more declarations
  - {property: value;}
  - the semicolon indicates the end of the declaration, not the end of the entire declaration block
- can apply multiple selectors to a single declaration block
  - h1, h2, h3 {
    font-weight: bold;
    color: green;}
- Tag Selector Class
  - used to collect elements into sets
  - used for special treatment of one or more tag selectors
  - <p class="bodytext">When your customers...</p>
  - .bodytext {font-family: Arial, Helvetica, sans-serif;}
    - what this is saying, any element in the XHTML document which is assigned a class="bodytext" will have this font-family.
    - If you just want the p tag to have this font-family then use
      p.bodytext {font-family: Arial, Helvetica, sans-serif;}
  - Note, can have multiple instances of a given class in a document
  - can have multple names in the class, known as multi-classing
    example
    <li class="first urgent"></li>
    can be selected use .first {} or .urgent {}
- Tag Selector ID
  - <p id="copyright">Copyright 2008</p>
  - #copyright {color: gray; font-style: italic; text-align: center;}
  - could also say p#copyright {color: gray; font-style: italic; text-align: center;}
  - to select an id using CSS use the # character followed by the id name. Note the id name must be unique for the document. The id must be assigned in the XHTML markup as well as in the CSS style.
  - The IDs are used to mark sections of a document
  - IDs are case sensitive
- Group Selectors - ability to add multiple XHTML element names to a single CSS rule. The XHTML elements must be comma delimited and not ending with a comma.
- CSS Descandant Selectors
- pseudo-class
  - "In each case, the class name is followed by a colon and a descriptor (e.g. a.A:hover). Technically, that descriptor is called a pseudo-class. The order that the pseudo-classes appear in the style sheet is important. For everything to work correctly, the link appears first, followed by the visited, and then the hover pseudo-class." (Exploring Web Technologies for Designers by James Gordon Bennett, p. 219)
Reference
- W3C Cascading Style Sheets Level 2 Revision 1 Specification
- CSS Syntax from w3schools

CSS Conflict Resolution - Specificity

Cascading Order - "Generally speaking we can say that all styles will 'cascade' into a new 'virtual' style sheet by the following rules, where number four has the highest priority:

Browser default
External style sheet
Internal style sheet (in the head section)
Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value)." (w3schools.com - CSS How To... Ways to Insert CSS)

Inline Style Attribute, ID, Class, element
The inline style attribute wins a conflict with ID, Class and element
The ID wins a conflict with Class and element
The Class wins a conflict with element
The last element mention will win a conflict with a previous element
Inheritance elements have no specificity
h1 {background: green !important;}
- !important will override/trump all other conflicts
- use to diagnose problems with conflicts
- sloppy CSS coding if you keep !important in your published CSS web page. Best to resolve the conflict by increasing the Specificity of the element

CSS Comments

/* CSS comments contain within forward slash and astricks */

CSS Naming Convention

Principals for ID namig of a document/web page
- in the stylesheet the ID name is preceded by the hash mark (#)
- in the XHTML document the ID name is part of the tag name, for example <p id="container">
- first letter of the ID name cannot be a number and cannot contain spaces
- ID Name based on content rather than presentation or positioning (header, footer, etc.)
- build a structural heirarchy
#container page container usually a division tag <div>
#branding used for a header or banner to brand the site
- #branding-logo used for a site logo
- #branding-tagline tagline to define the site's purpose
#nav used to contain a navigation device
#content used for content rather than for another purpose such as navigation
- #content-main the main content area
- #content-(whatever) could include any form of content including #content-related, #content-quote, etc.
inner element comes second in the name, for example the outer element is #nav and the inner element is main then the full name is #nav-main or #navMain
Andy Clarke with Malarkey - What's in a name (pt2)

CSS Layout - Box Model

Layout is two steps, 1) size of the box, that is the width and height of an XHTML element such as a <div> tag and 2) the position (static, relative, absolute, and fixed) of the XHTML element with its position properties (top, right, bottom, left)
Box Model
- All HTML elements can be considered as boxes. In CSS, the term 'box model' is used when talking about design and layout. ( w3schools box model in CSS)
- Create boxes from <div> tags and position on the page. The boxes are containers which help provide structure to the page.
- The CSS Box Model by Chris Coyier
sets the shape of an element
- img {clip: rect(top, right, bottom, left)}
picture of the CSS Box Model Hierachy
The Box Model on webdevfoundations.net

Margin and Padding

#body { margin: 0px; padding: 0px; background: white; }
"The margin:0px; and padding:0px; properties and values are added to the <body> tag in the stylesheet to ensure that the content is positioned in the top-left corner of the browser. If these attributes are not added, content will not always begin at the X,Y attributes of 0,0 in a browser. Depending on the browser, this distance can change. Similar to XHTML table-based designs, it is necessary to declare background page colors when creating CSS-based designs, wich is why the background property is added. This is included to ensure that all browsers use the same background color, not leaving the option to be declared by their default values." (Advanced Professional Web Design Techniques and Templates CSS & XHTML by Clint Eccher, p. 116)
"By default, browsers add top and left space between the browser window and the content that is output (see Figure 5.4). This space varies depending on the browser. Removing the space is easily accomplished. The designer needs only to assign the style to the HTML and BODY selectors in the main stylesheet:
html, body { margin: 0px; padding: 0px; background: #ffffff; }
For most browsers, setting the maring to 0px removes the spacing, Opera however, requires the designer to set the padding setting to 0px. Adding the margin and padding properties wil make the page begin in the very top-left corner of the browser's window (see Figure 5.5). It is also always good form to define the background color." (Advanced Professional Web Design Techniques and Templates CSS & XHTML by Clint Eccher, p. 134-5)

CSS Page Layout Examples

Layout Generator
2-column

bluerobot.com 2-column with left menu box and header
glish.com 2 column with float menu upper right

Fluid/Liquid layout
No header or footer

Free Web Template: Two Column Layout with Header and Footer
- appears this is fixed/iced page layout
- http://webdesign.about.com/od/layout/l/z2colheadfoot.htm
Dynamic Drive - CSS Layouts - Liquid Layouts

3-column

Position is Everything, header 3-columns, static-fluid-static

CSS Dropdowns and flyouts

Deluxe CSS Dropdowns and Flyouts

How to set the background color of an HTML tag using a CSS rule?

p {background-color:rgb(255,0,255);}
see W3Schools - set the background color

Page Layout Design Techniques

Ice Design
- "The ice design technique is sometimes referred to as a solid or fixed design. The page hugs the left margin and generally either CSS is used to configure a fixed-width block-level element or an XHTML table (see Chapter 8) is used to format the page. A CSS style rule is shown below that configures an id named wrapper in this manner.
  #wrapper { width: 700px; }
  Due to the fixed width, the designer has much control over the layout and formatting-configuring the page to look best at a certain screen resolution (often 1024x768) and degrade gracefully when other screen resolutions are used. The right-hand side of the browser window will often contain much empty spcae-especially at higher screen resolutions. The Energy Star site (http://www.energystar.gov), shown in Figure 5.28, is an example of ice design. This particular page is formatted with a fixed width. Other sites that currently use this technique include http://www.cabelas.com and http://www.league.org. (Web Development and Design Foundations with XHTML, 5th Edition, by Terry Felke-Morris, p. 189-190)
Jello Design
- "The jello design technique configures content that is centered and may be of a fixed width or a percentage width such as 80%. A CSS style rule that configures an id named wrapper in this mannger follows:
  #wrapper { width: 80%; margin-left: auto; margin-right: auto; }
  Jello design pages typically are more pleasing to view at higher screen resolutions than ice design pages. No matter the screen resolution, the content is centered in the page with even margins on both sides. The Department of Energy site (http://energy.gov), as shown in Figure 5.29, uses jello design. Other sites currently using this technique include http://www.pbs.org and http://www.officedepot.com." (Web Development and Design Foundations with XHTML, 5th Edition, by Terry Felke-Morris, p. 190)
Liquid Design
- "The liquid design technique results in a fluid Web page with content that takes up 100% of the browser window regardless of the screen resolution. There is no blank margin on the left or right-the multicolumn content will flow to fill whatever size window is used to display it. This type of design can be created with CSS or with XHTML using a table width set to 100% (see Chapter 8). Using CSS instead of a table to configure Web page layout has a number of advantages, including smaller Web page document file sizes, quicker loading pages, and more accessible pages that are easier for screen readers to access. Figure 5.30 shows a page from the State of Illinois site at http://www.illinois.gov/tech/. Other sites currently using this technique include http://www.amazon.com and http://moodle.org." (Web Development and Design Foundations with XHTML, 5th Edition, by Terry Felke-Morris, p. 190-1)

CSS Positioning

Liquid Layout
- div#header {position: static;}
  - "The heading and the footer are also included outside of the container <div> element; you do this to accommodate content in each of these that is of variable height. If the heading and footer were to be placed inside of the container <div> element, you would have to give each a fixed height, and adjust the top and bottom properties of the left column <div> with respect to the collective height of the heading and the footer." (Beginning CSS, 2nd Edition by Richard York, p. 449)
- wrapper-container div - position static or relative
- header div - position static
- left column div ?
- right column div ?
- footer div - position static
- Problems
  - how do I center the main container image?
It appears CSS has two options for positioning: 1) Float or 2) static/absolute/fixed/relative. Float is a holdover from the earliest CSS version
Old Float
- img {float:right};
- "The values of the float attribute can be set to right, left, or none, which controls the horizontal position of the floated element." (Exploring Web Technologies for Designers by James Gordon Bennett, p. 222)
- "Notice that the image element is placed within the <p><p> tags. The element that will float should be included inside the opening and closing paragraph tags of the text. That tells that the browser which specific paragraph the floated element will appear within. It also is important to consider where in the text the floated element will be placed, because that decision affects the text's vertical position inside the paragraph. For example, if the <img> element was placed after the text, the image would float to the lower right corner of the text area. By the same token, if the <img> tag was placed in the middle of the text, the image would float to the right side of the paragraph but would also have text above and below it." (Exploring Web Technologies for Designers by James Gordon Bennett, p. 222)
Four types of positioning: static, absolute, fixed and relative
- static
  - "Default. Object has no special positioning; it follows the layout rules of HTML." (MSDN position Attribute | position Property)
  - "The box is a normal box, laid out according to the normal flow. The 'top', 'right', 'bottom', and 'left' properties do not apply." W3C Choosing a positioning scheme
- absolute
  - absolute positioning is used to position an element in a specific place in a document
  - point of reference is the web browser viewport (main HTML tag), unless the absolute positioned element is contained within another element (such as a <DIV>) that has a position other than static, then that element is used as the point of reference for positioned elements.
  - to create a new instance of normal flow, add another positioning element
  - absolute to its positioning context
  - Absolutely positioned boxes have margins, they do not collapse with any other margins. see W3C Choosing a positioning scheme
  - Stretching positioned elements - issues using both width 100% and left and right offset properties. In a nutshell - using both width 100% and offset properties will create scroll bars in the web browser
    - "...when you have any block element absolutely positioned or not, and your applying padding, borders, or margin to it, and then give it a width of 100 percent on top of those properties, you won't end up with the results that you expect. This has to do with how percentage measurement works. If you recall from Chapter 7, a percentage width is determined by the width of an element's parent. So if the parent element has a width of 700 pixels, for example, your element with 100 percent width will also have a width of 700 pixels, and then the lengths for margin, borders, and padding are applied on top of that width, and your element overflows the boundaries of its parent. If the parent element is the <body> element, and the 700 pixels measurement happens to be the width of the browser's viewport, you'll wind up with your element with 100 percent width causing horizontal scroll bars, because it is too big to fit in that 700-pixel width. By stretching elements with opposing offset properties, the resulting width is whatever is left over after margin, borders, and padding are already applied, thus avoiding scroll bars." (Beginning CSS, p. 406 by Richard York, ISBN: 978-0-470-09697-0)
- fixed
  - subcategory of absolute positioning
  - the point of reference for a fixed positioned box is the web browser viewport
  - used to keep the element stationary even when your scrolling content or resizing the browser window
- relative
  - Make the container/wrapper DIV position: relative, this changes the reference point from the main body of the browser window to the upper left corner of the container/wrapper DIV. Then all interior/children/subset DIVs within this DIV, use a position: absolute; top: 0; left: 0; (will set this DIV to the upper right corner of the containing DIV).
  - Relative is just setting the reference for the Absolute positioning. You DO NOT use any coordinates like top: 0; left: 0; in the Relative DIV. Only the Absolution DIV uses the top: 0; left: 0; properties.
  - "Use the position:relative property along with either a left, right and/or top property. The left property configures the position of the element in relation to the left side of the containing element." (Web Development and Design Foundations with XHTML, 5th Edition, by Terry Felke-Morris, p. 220). This is why we need a container/wrapper DIV element, that is the relative property will be relative to this wrapper DIV which contains it.
  - moves the element relative to where it would be in normal flow.
  - moves relative to itself
  - relative is NOT moving the element in relationship or relative to another positioned element
Offset properties: top, right, bottom, left
- accept a length value or a percentage value
- used to fine-tune the element's position
- References
  - w3schools - CSS Positioning Properties
z-index property
- w3schools - CSS z-index Property

External Style Sheets

Linking
- Step 1: add link tag to HTML page
  - use the link tag and place within the head tag
  - <link rel="stylesheet" href="styles.css" type="text/css" />
- Step 2: create a text file (styles.css) with the CSS rules and save in the same directory that the HTML page was saved in.
  - p {
    font-family: "Courier";
    font-size: 80%;
    font-weight: bold;
    /* http://faculty.unlv.edu/facultyWeb/colors.html */
    /* color: rgb(0,0,255); /* blue */ */
    color: rgb(193, 2, 2); /* Scarlet */
    background-color:rgb(153, 153, 153); * Gray */
    }
- Reference
  - InDelv.com - Using Cascading Style Sheets on Your Web Site
Importing

Block-Level Elements and Inline Elements

block-level delments can contain other block-level elements and inline elements.
Inline elements cannot contain block-level elements
Block-Line Elements
- address, blockquote, div, fieldset, h1 thru h6, hr, legend, p, pre, ul, ol, li, dl and dd
Reference: Logical Style by Ross Shannon

CSS and XHTML DIV tags with Google Earth API, Google Maps API and NAVTEQ MapTP AJAX API

Templates
- Google Maps Template (test with IE6, IE8, FF3) - gmTemplate.html
- Google Earth Template
- NAVTEQ MapTP Template
NAVTEQ MapTP Notes
- MapTP uses geographic coordinate system, namely WGS'84 in M.m (decimal minutes) format. See Map24 AJAX API 1.2.8 Geographic Coordinates also see the MapTP Zone FAQ - Which coordinates format is used by the Free MapTP AJAX API? Geographic coordiantes are represented as decimal minutes.
  - UNLV Lat 36°6'35" Long 115°8'30". NAVTEQ Decimal minutes (conversion using sunearthtools.com Lat 2166.5 Long 6908.5
- JSDoc Documentation Map24.MapApplication
- Set Start Map View with MapTP AJAX API 2.3
- Map Controls with MapTP AJAX API 2.3
- Video: MapTP AJAX API Overview Update
Option1: Full Page, Dynamic Size DIV Tag
- CSS Notes
  - <div> tag
    - Used to group page elements
    - Horizontal Widths
      - Absolute and Fixed Positioned Elements
        
        "When elements are positioned absolutely, they all take on the shrink-to-fit sizing behavior, for both width and height." (Beginning CSS, p. 402 by Richard York, ISBN: 978-0-470-09697-0)
        Expand-to-fit sizing is accomplished by specifying opposing offset properties on the same absolutely positioned element
        "For example, to stretch content horizontally for the entire width available to it, you specify both the left and right offset properties to imply width. Or if you want to stretch an element vertically for all the space available to it, you specify both the top and bottom offset properties to imply height. The term imply is used here because you don't actually specify width or height. Dimensions are implied because you expect specifying both the left and right offset properties on the same absolutely or fixed positioned element to stretch the element. If you want both horizontal and vertical fluidity on an absolutely positioned element, you specify all four offset properties on the same element. Unforunately...IE6, and earlier do not support this useful feature..." (Beginning CSS, p. 404 by Richard York, ISBN: 978-0-470-09697-0)
        IE 6 workaround: "...IE 6 does not support stretching an element via specifying opposing offset properties on the same element...a dynamic expression is used to emulate the effect of opposing offset properties in IE 6. You simply include the dynamic expression feature, which references a small snippet of JavaScript. documentElement refers to the <html> element, and offsetHeight is a property that is used to get the <html> element's, well, offset height, which for you and me means the height of the browser's viewport." (Beginning CSS, p. 412 by Richard York, ISBN: 978-0-470-09697-0)
      - Static and Relative Positioned Elements
        
        To make the <div> tag fill the entire width of the web browser, use the width attribute and assign a value of 100% or auto. It appears the default behavior of the DIV tag is to auto-expand to the width of the browser window.
        If you assign a border:1px; and padding: 4px; to the <div> tag then a horizontal scroll bar will appear. Reason, the width of the <div> tag will inherit the width of its parent <body> tag which already takes the full width of the web browser window. We now add 5px (1px border + 4px padding) to each side of the <div> tag, thus we have an extra width of 10px and the reason why the web browser adds the horizontal scroll bar.
        "The output that you see in Figure 7-36 is probably pretty puzzling to you, in that you more than likely expected the <div> element to fill up all the space horizontally and vertically without scroll bars appearing. There is a horizontal scroll bar because of how percentage measurement works; the width of the <div> element is made to be the same width as the width of its parent element, the <body> element. Now before you take into consideration padding or borders, the <div> element already takes up the whole width of the <body> element. Once 5 pixels of padding, and 1 pixel of border are added for each side, the <div> element becomes 12 pixels bigger than the width of the <body> element, causing it to overflow horizontally, and also a horizontal scroll bar to appear." (Beginning CSS, p. 255 by Richard York, ISBN: 978-0-470-09697-0)
    - To make the <div> tag fill the entire height of the web browser
      - "One fundamental concept that is essential to making the fixed header, footer, and side columns techniques work has to do with how absolutely positioned elements handle sizing. In Chapter 7, you learned that block elements have a width that is expand-to-fit by default. Block elements such as <h1>, <div>, <p>, and so on, expand to fill the space available to them horizontally, and expand vertically in the shrink-to-fit fashion, that is, only enough to accommodate the content contained within them. When elements are positioned absolutely, they all take on the shrink-to-fit sizing behavior, for both width and height." (Beginning CSS, p. 402 by Richard York, ISBN: 978-0-470-09697-0)
      - "To use absolute positioning to emulate fixed positioning for a header, you need a way to make an absolutely positioned element use the other method of sizing, expand-to-fit. The CSS specification just so happens to support just such a feature, and specifying opposing offset properties on the same absolutely positioned element does it. For example, to stretch content horizontally for the entire width available to it, you specify both the left and right offset properties to imply width. Or if you want to stretch an element vertically for all the space available to it, you specify both the top and bottom offset properties to imply height. The term imply is used here because you don't actually specify width or height. Dimensions are implied because you expect specifying both the left and right offset properties on the same absolutely or fixed positioned element to stretch the element. If you want both horizontal and vertical fluidity on an absolutely positioned element, you specify all four offset properties on the same element." (Beginning CSS, p. 404 by Richard York, ISBN: 978-0-470-09697-0)
      - The DIV tag will expand to the height of the text/image within it. This is a problem when we use the DIV tag for Google Earth API, Maps API and/or NAVTEQ MapTP. The DIV tag is created and doesn't have any content, then later with the onload event is fired, does the Map get placed in the DIV tag. This ends up creating a narrow window which does NOT expand to the height of the DIV tag. (see Google Groups - Google Earth Plug-in - Window Height 100%
        
        Roman's solution: add height:100% to the HTML and BODY tags. Also add height:100% to the container DIV. Then in the Map DIV give a height:100%. IE6 Problem - a vertical scrollbar is added to the right of the browser window and I don't know how to get rid of it. Try using height:92% for HTML and BODY tags, this removed the right vertical scrollbar from the browser window in FireFox3
        Use CSS container DIV with position static and an inner DIV with position absolute with top, right, bottom, left offsets of some value (won't work if the offsets are not included)
        
        #container {
        position: static; /* default element positioning, top, right, bottom and left properties have no effect with static positioning */
        margin: 0em;
        padding: 0em;
        }
        #contentMap {
        position: absolute;
        top: 0em;
        right: 0em;
        bottom: 0em;
        left: 0em;
        border: 1px solid black;
        padding: 0px;
        margin-left: 0px;
        }
      - Create a container <div> tag that is set to 100% of page height and then add any interior <div> tag(s) also with the page height set to 100%. The interior <div> tag(s) should fill up the container <div> tag and the height of these interior <div> tag(s) should be equal. Be Careful When You Size Your DIVs by Larisa Thomason
    - used to divide the document into separate, distinct sections. It may be used strictly as an organizational tool, without any sort of formatting associated with it. (HTML & XHTML, 4th Edition by Chuck Musciano and Bill Kennedy, p. 62. ISBN 0-596-00026-X)
    - References
      - Mike Williams - Google Maps API Tutorial - Using a percentage height for the map div
      - Be Careful When You Size Your DIVs by Larisa Thomason
      - CSS Layout by HTMLSource
- Examples
  - Earth API - divFullPageEarth.html
  - Maps API - divFullPageMaps.html
  - MapTP AJAX API - Java Applet - divFullPageMapTP.html
Option 2: Add Company Logo and Full Page, Dynamic Size DIV Tag
- Earth API - divLogoFullPageEarth.html
  - It appears you cannot do a CSS z-index overlay on Google Earth Plugin but have to use a KML screen overlay instead. For a workground see Using IFrame Shim to (partly) cover a Java applet
  - Google Earth API Samples - Screen Overlay
  - Google Earth API Samples - Screen Overlay (Frame)
- Maps API -
  - divLogoFullPageMapsIE.html
  - Company Logo using CSS <div> positioning: divLogoFullPageMaps.html
  - Company Logo using Google Maps API GScreenOverlay: divScreenOverlayLogoFullPageMaps.html
- MapTP AJAX API -
  - MapTP AJAX API - Java Applet. Applet will overlay on top of the CSS z-index logo divLogoFullPageMapTP.html
  - MapTP AJAX API - Static View. Supports the CSS z-index logo divLogoFullPageMapTPstatic.html
Option 3: Search Box, Logo and Full Page, Dynamic Size DIV Tag
- Maps API - divGoogleBarScreenOverlayLogoFullPageMaps.html
Option 3: Logo, Top Header and Full Page, Dynamic Size DIV Tag
- CSS Notes
- Examples
  - Earth API - divLogoHeaderFullPageEarth.html
  - Maps API - divLogoHeaderFullPageMaps.html
  - MapTP AJAX API - divLogoHeaderFullPageMapTP.html
Option 4: Logo, Top Header, Left Sidebar and Full Page, Dynamic Size DIV Tag
- CSS Notes
- Examples
  - Earth API - divLogoHeaderLeftNavFullPageEarth.html
  - Maps API - divLogoHeaderLeftNavFullPageMaps.html
  - MapTP AJAX API - divLogoHeaderLeftNavFullPageMapTP.html

Google AJAX API Playground for JavaScript and CSS

Google Code Playground
Google Video - The Google AJAX API Playground

CSS References

cssbeauty.com
csszengarden.com
css.maxdesign.com.au/listutorial
westciv.com/style_master/house/
veerle.duoh.com/index.php/blog/links/
ilovejackdaniels.com/cheat-sheets/css-cheat-sheet/
css-discuss.org wiki
CSS Resources - A List Apart
BlueRobot - The Layout Reservoir
W3Schools CSS Tutorials
CSS guru, Eric Meyer has a good reference of CSS
CSS Zen Garden
University of Minnesota Duluth - Information Technology Systems & Services - Web Design References: Cascading Style Sheets
Free Ebooks from Easy Share
- HTML 4 For Dummies 5th Edition by Ed Tittel and Mary Burmeister
- Building Web Sites for Dummies by Doug Sahlin and Caludia Snell
- Web Design for Dummies 2nd Edition by Lisa Lopuck

Horizontal CSS List Menu

CSS tutorials and more - Horizontal CSS List Menu

CSS Text

Text Color
- The color property is used to set the color of the text, for example
  body {color:blue;} /* by color name */
  h1 {color:#00ff00;} /* by Hex value */
  21 {color:rgb(255,0,0);} /* by RGB value */
  (see w3schools.com CSS Text)

Image Sprites

w3schools.com - CSS Image Sprites

CSS and Visual Studio

http://www.asp.net/general/videos/css
freeCSStemplates.org
oswd.org - Open Source Web Design

CSS Menus

CSS Sprites (mosaic of images)- reduce the number of HTTP requests for images by combining all the images into a single larger image at then reference the upper left corner (X, Y) of the image part you want using the CSS background-position and background-image. See CSS Background Image Sprites
CSS background-position property
Example Sprite Image
- Groundswell Surf Site by Bill Weinman http://bw.org/
  - Gear
  - Lifestyle
  - Videos