Data Layouts

Almost every website created now, incorporates many different data layouts to present the user with an apealing, and easy to read screen. In the past these layouts were created using tables. Tables display rows and columns on the screen, just like in a spreadsheet program. Most websites now, use dividers.

Dividers are less complicated than tables, they are easier to align, and are more compatible with the different browsers such as Internet Explorer, Firefox, Opera, and Crome. The properties are also more configurable, and easy to work with. Unlike tables that are mainly defined on the web page itself, dividers are mostly configure using style sheets (CSS or Cascading Style Sheets) .




Style sheets (CSS or Cascading Style Sheets) describe how html elements such as a divider, button, or image is presented on a web page. Information on style sheets can be found on many different web sites. One of my favorite websites to go for information on everything html is http://www.w3schools.com. There are many other websites that you can use to learn about style sheets (CSS or Cascading Style Sheets).

While setting up your website, you will run into many different configurations. Keep it simple setup several different style sheets, name them layout1, layout2 ecetera, for your most common configurations.

Rows and columns can be the most frustrating and challenging. Once you understand what to do, its easy.

First determine the width of your web page, then divide it my the number of columns you need. In your style sheet construct an outside section and an inside section. The outside section will be your row and the inside inside section will be your column.

If you your page is 780 pixels long and you need 5 columns, then each column will be 156 pixels. Your outside section will always be 780 pixels and your inside columns will be 156 pixels if you want them evenly spaced.

Below is a sample you may use in your projects. Just copy and past it to a text file, and save it with a css extension. Include this line, , at the top of your web page.

Here is the code;

/* Setup a row with 3 columns to diplay a quote bar. */

.thrColFixHdr #div_area1_for_layout3 {
float: left; /* since this element is floated, a width must be given */
height: 40px;
width: 156px;
background: #FF6633;
font-family:"Arial";
font-size: small;
}

.thrColFixHdr #div_area2_for_layout3 {
float: left; /* since this element is floated, a width must be given */
height: 40px;
width: 156px;
background: #FF6633;
font-family:"Arial";
font-size: small;
}

.thrColFixHdr #div_area3_for_layout3 {
float: left; /* since this element is floated, a width must be given */
height: 40px;
width: 468px;
background: #FF6633;
font-family:"Arial";
font-size: small;
}


.thrColFixHdr #outside_div_for_layout3 {
height: 60px;
width: 780px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
/*padding: 15px 10px 15px 10px; /* padding keeps the content of the div away from the edges */
}


The code refers to a class called thrColFixHDR. Modify your layout as you see fit.

The class it refers to is as follows;

[if IE 5]>





The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. (taken from www.w3schools.com).

If you have never used style sheets before, create a sample web page, with a style sheet and setup different configurations. You will soon catch on. If you need help, search for what you need using google. There is a ton of information out there, you just need to take the time and find it. If you have any questions, just make a comment to my blog, and I will do my best to answer you. When I have more time, I will add to this blog. Until then, have fun, and keep searching.