CSS Layouts

Document Sample
CSS Layouts Powered By Docstoc
					CSS Layouts

The Box Model

Width and Height
• Here is the property-value list for setting an element's width and height:

Border Width Examples
• In CSS, the border-width can be set by using a keyword: • Or, a border-width can be specified as an exact length:

Border Width Property Value List
• Here is the property-value list for setting an element's border width

• Note: The actual interpretation of thin, medium and thick is up to the browser

Border Color
• The border-color property works just like all the other color properties

• The property-value list:

Border Styles
• Here are examples of all the possible CSS2 border styles:

Border Style Syntax
• To create a styled border around an element, specify it by name:

Border Shorthand Property Syntax
• You can also specify a border using the border shorthand property:

• Margin properties specify the spacing between elements outside of their border:

• Property-value list

• The padding properties control the amount of space inside an element's border. Here are a few examples

• Property-value list

• Note that <length> can also be a percentage

• The position property sets what kind of positioning scheme should be used:

Static Positioning Example
• Note that the grey outline represents the containing box.

Relative Positioning
• Note that the grey outline represents the containing box.

Absolute and Fixed Positioning Example

• Use the offset properties to control where an element is rendered • Remember that before offsets can be used, the type of positioning scheme should be set with the "position:" property

Float Example
• The float property controls where block-level elements are positioned, as well as which way other elements are placed in relation to them. Here, copy is floated around the boxes outlined in blue

Float Syntax
• There are only three possible float values:

Sample Float

• The clear property controls how blocklevel elements are rendered. (By the way, all of these boxes are set to float: left.)

Sample Clear

Layered Presentation Example
• In CSS2, it's possible to specify when elements should be rendered in front of other elements just in case they overlap. Below is an example using only text and CSS, with no graphics:

Layered Presentation Syntax
• The property that controls layered presentation is called z-index. The higher the number you specify, the "higher" the element will be rendered.

Sample Layered

• The overflow property controls what happens when a CSS2 element overflows its containing block.

• Property-Value list

Sample Overflow

• An element's clipping region is the region into which visible content is rendered. Usually it's the same as the element's box dimensions, but in CSS2 the rectangular region be specified • The overflow must be something other than visible for this to have any effect

• Property-Value list:

• The visibility property controls whether or not an element is rendered • Property-Value list

Shared By: