About
Divs (often called div layers) are sections or divisions of a web page; they are rectangular, block-level elements which means that they will begin on a new line after the previous element and the element which comes after will began on a new line. Divs are often used with CSS and pretty much any element you'd want to be altered, can be altered with CSS. This includes:
- Dimension
- Height, width
- Classification
- block and inline elements, float, clear, visibility
- Positioning
- Absolute, relative, fixed, overflow/scrolling, vertical alignment, z-index
- Margins
- the space between the div and other elements
- Padding
- the space between div and its contents
- Font
- size, colour and family
- Text
- Effects, transformation and alignment
- Background
- Colour, image, position, repeat
- Border
- Colour, style, width
Step by Step
Basically, you'll start with a boring box which contains content, like text.
You can change the size, position, background and border.
Next, you can add text effects and font specifications.
Now, we'll add some final touches such as padding and scrolling.
Customizing divs is easy and neat when done with CSS. Rather than having separate font tags floating around or having to add a container background to a layout image, this can all be done with CSS and changed on a whim. Also, You can have as many divs as you want, using CSS classes and IDs can help to style them in different (of the same) ways.
Advantages
Because divs keep content all in one page, search engines can read it better than sites made with frames or even tables. This helps to boost your search engine ranking which, in turn, will draw more visitors to your sites.
When using frames, one must use several pages to achieve the impression of one page which, ultimately, means more work. However, using divs only requires one HTML page which makes a difference when it comes time to changing layouts (if the styles are on-page). If divs are used and all CSS is in the head or a separate style sheet, one can completely change a layout without ever touching the content code of a page.
Divs load faster than tables or frames because the file sizes of pages are reduced. Not only will this please visitors, but it helps to reduce strain on one's server and, the less bandwidth and space used, the less money one needs to spend on one's resources.
When using divs with CSS, one can easily make "skins" or multiple site themes which can be used in a multitude of ways: loading randomly, loading based on criteria, visitor selection.
Divs are generally supported by all browsers new or old and, once someone becomes comfortable with using them, one will find that divs generally have the same behaviour no matter what browser renders them.
Finally, because divs follow web standards, not only do they work in the present but they will work in the future,
Misunderstandings
Using divs can be confusing at first for several reasons.
Divs cannot be targeted. In order to make an element, such as text, appear in a certain div, the entire code of the page must be copied into a new file and the new element (text) will replace whatever element was in the desired position. This means that every page will have repeated code, generally styling code (headers, sidebars, and footers) and only the content elements change.
During an extensive layout change (where more than just CSS is altered), more pages may have to be edited However, using PHP or SSI includes eliminates the repeated code by putting it into an external file which also reduces the file size of the content pages. Additionally, this ensures that the style codes is exactly the same, because every page includes the same files. After "installing" includes once, most extensive theme changes will no longer require editing of every page, just the included files.
More Information
For more information on CSS, click here.
Below are more technical div resources:
Δ = New
∇ = Updated
Back | Digg this | Post to del.icio.us
