The Box Model

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

Example <div>, <p>, <h1>, <form>, <ul> and <li>

Inline Elements
Always 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.

Example <span>, <a>, <label>, <input>, <img>, <strong> and <em> <p><em><strong>

Box Properties
Any block element can have "box" properties applied to it.

A Border
Padding
A Background Image
A Background Color
Margins
Width
Height
Position

This is a web page at http://redmelon.net/tstme/box_model/ that draws a 3-d View of the Box Model

go ahead, adjust the perspective!

Markup for DIV's and HTML "block" elements

The <div></div>element

This elements is used to divide a web page into regions or parts...

If the <div></div> element has no given dimensions, it is called "fluid" or "liquid." This means that it horizontally fills the container box surrounding it, and expands vertically to enclose whatever content is within it. For the most part, such fluid boxes are quite reliable.

ID and Class

Analogy

id = A person's Identification (ID) is unique to one person.

class = There are many people or groups in a class.

Some Rules

An id in CSS is unique, as a result an id can only be used once on a page/document

The name of an Id or class must be a single word and cannot start with a number.

Naming ids and classes helps you keep track of all your div elements or layers. Makes it easy to have different style attributes and positions for each <div></div> element. You can also overlap <div></div> layers ... so it helps to know what <div></div> element might be getting in the way.

Example --id

id="easytorememberdescription"

the descriptions commonly used are:

wrapper, header, banner, body, container, navigation, leftcolumn, rightcolumn, footer, sidebar...

Example --class

class ="easydescription"

A class in CSS is usually an html text element like h1 - h6 headings, p paragraphs, lists, etc., Common elements that are used more than once on a page.

<div> Syntax: the structure for property and value

A div element's styles can be written in-line, embedded, or in an external style sheet by selecting the element and naming the property and giving it a value.

In-Line Example

Embedded Example

</style>

External Example is written in a separate text file named "divcssstyles.css"

#banner {width:960px;}

inbetween <head></head> this statement tells a browser where to find the style sheet

The following are <div> and html "properties":

width

height

padding

border

margin

background-color

background-image

z-index

position

"value" can be expressed in the following units:

auto

pixels

Property definitions

width:

{width: 120px;}

width of your <div></div> element in pixels.

height:

{height: 60px;}

The height of your <div></div> element in pixels.

padding:

{padding: 10px;}

Interior Spacing for your <div></div> elements text or graphic content between the inserted element and the border. It adds to the width of the box in modern browsers, but subtracts in earlier versions of Internet Explorer 5.5!

Oh, oh

border:

{border: style color width}

{border: solid #ffffff 2px;} same as

{border:solid white 2px;}

You can add a border to your <div></div> element. In modern browsers it adds to the total size of the box. Earlier versions of Internet Explorer subtracts the size of the border from the "box" see the above diagram.

The border-style:

solid, dotted, dashed, double, groove, ridge, inset, or outset, and any color you wish.

margin

defines the space around an element and is transparent

Specifies the margin around a box measured from the edge of the browser, or the edge of the nearest element.

margin:auto;

The browser calculates the margin.

The result is dependent of the size of the browser's display window.

margin:length;

Defines a fixed margin (in pixels, pt, em, etc.)

margin:%;

Defines a margin in % of the containing element

It is possible to use negative values, to overlap content.

background-color:

{background-color: rgb(0, 0, 0); }

{background-color:#0f0d0a}

black; orange; white;

A Short Cut

You don't need to specify the property of top or right or bottom or left for an <div></div> element.

Use TRouBLe

you can specify, for example padding-width, padding-height, padding-left or padding-right with a short cut written:

{padding: 15px 20px 5px 7px;}

where 15px is top, 20 px is right, 5 px is bottom, 7 px is right.

Just remember TRouBLe {Top, Right, Bottom, Left}

Position

position

absolute

relative

fixed

static

{position:absolute; }

The Third Dimension

the element is removed from the normal flow and is unaffected by the <div></div> elements in the normal flow of the page.

{position:relative}

used to move the element from where it would normally occur in the html flow of the document.

The element can be mover left, right, up or down as measured from the top left corner of the element.

{position: static}

is the default which means the element is not positioned and occurs where it normally would in the normal flow of an html document.

{position: fixed}

(doesn't work with Internet Explorer 6)

no matter how you resize a web browser the box is always fixed... (try it out)

z-index

{z-index: 1;}

The order in which your <div></div> elements are stacked

<div>'s must overlap to see the stacking order

{z-index: 1;} is the bottom layer next to the body, the normal flow of the web page

{z-index: 2;} stacks on top of z-index: 1; etc

For examples of how position actually works go here

http://uofgts.com/BasicWD/position/