Note To Self About Page Layouts

When you are laying out a web page, consider what you need to do.

Design your page accordingly.

Always make sure you comment the end of your divider tags, or you may

spend hours, and hours trying to find the proverbial needle in a haystack.

One incorrectly placed tag on a page, a tag without a beginning,

or a tag with an incorrect syntax, will cause complete havoc.

Dividers will always work if placed in the right order, and done correctly.

If you are making an inside tag, do not use 100% height. For some strange reason,

the browser will ignore an inside divider with a height of 100%. If you need

to send dynamic content to an inside divider, either use paging or consider a

incorporating a scroll bar into the divider.

Laying out pages can be a chore, but if you take your time and pre-plan your layouts,

creating web pages can be a breeze.

Rules for Dividers

I've learned that there are many rules that apply to dividers. (Dividers separate area's of the screen.) Rules like those for inside and outside dividers (outside and inside dividers are used in setting rows, and columns).

When you work with dividers there will be many times that you will scratch your head, and ponder for hours. You will try one thing after another, until you get it right.




Inside dividers should be fixed widths, one column cannot be longer than the other; otherwise, you will have an overlap. When setting up rows and columns, the widths for a divider must be adjusted to account for borders.

Borders can offset the width of a divider by several pixels. Arrange your dividers carefully. A divider with a dynamic height will be handled different by the browser, than a divider with a fixed height.

There are many more rules that apply to dividers, than the ones I have mentioned in this blog entry. I will update this blog entry with new information, as I come across it.

Ajax Ready States

Ajax ready states tell the browser what to do depending in different scenarios. What
to do while processing, or when a connection is complete.

They are as follows;

0: not initialized.

This is the state of the connection before the open
command is called.

1: connection established.

This state occurs after you have called the open command, but
before you have called the send command.

2: request received.

This occurs when the request has been sent, and at
the headers are available.

3: answer in process.

Here the information is being processed. At this point
you can display a wait message to the user.

4: finished.

This is the state when the request has been completed. At this point
you clear the wait message, and assign some other information to the
user if you wish.

Ready states are very useful in handling information being sent, and received from the server. You can display wait messages, and perform other tasks while a request is being made.

As you develop interactive websites, and online applications, you will become familiar Ajax ready states.

Configuring Dividers

Dividers can be difficult to configure. It may take forever to get the correct results, if you are unfamiliar with the idiosyncrasies. For example if you include borders, you need to account for the width of the border itself.

The width of a border may be several pixels, give or take. To get it right, make your calculations, configure your dividers, and display the page you are working on, then alter your widths accordingly.




Another problem with configuring dividers is setting the background color. The background color needs to be configured using the background property.

An example of this is: "background:#DDDDDD;".

If you have a row with several columns, the color attribute will not show if you set the background color on the outside section. It must be set on the individual columns to show.

As you work with dividers, you will become accustomed to the proper configurations. Ensure that you are using the correct properties, and that you have opened and closed your tags properly. Trying to find an html error as a result of a missing tag can be a real chore, and take up alot of time.

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.

Browser Caching

Why do I always get the wrong page?

By default, the most recent versions of Internet Explorer and Mozzila based browsers like Firfox will give you the old page, until a newer page becomes available. If you just bought a new computer, then you should familiarize yourself with the settings in Tools and Internet options.

If your browser settings are not configured properly, then you may never know what your looking at. There are several settings in your browser to configure the way pages are cached on your computer.

When you visit a website, the page you are viewing is stored to your computer. Depending on your settings, the next time you visit the site, your browser will bring up the page stored on your computer (c ache).

To ensure that you are looking at the latest copy of a page, you should configure your browser settings to get the latest page, every time it is reloaded. In Internet Explorer go to Tools and Internet Options. Click The click browser history and settings. Click the settings, “Every time I visit the web page“. Thats all you need to do for Internet Explorer. The next time you visit a website, you will get the latest copy of the page. It is especially important when viewing websites with dynamic content.

In Firefox it is a bit more difficult. Open a browser window and enter about:config, then hit enter. A window will come up and ask you if you are sure that you want to proceed. Just click okay, and look for the line called, browser.cache.check_doc_frequency. Change it from 3 to 1, and close the window.

For future reference:

0 – Check for a new version of a page once per session (a session starts when the first application window opens and ends when the last application window closes).

1 - Check for a new version every time a page is loaded.

2 – Never check for a new version – always load the page from cache.

3- Check for a new version when the page is out of date. (Default)

To avoid frustration, and undue aggravation, especially when designing and building your own websites; always make sure you check your browser settings to ensure that you are getting the most recent copy of the site you are viewing.

Introducing: Backup Smart

Protect Your Online Business And Keep All Of Your Data Safe And Secure On Your Local Hard Drive!

Works With Windows, Mac OSX, and Linux and Available In Multiple Languages

Click here to order.