Month: September 2006

# represents an id ( #content)
. represents a class ( .highlight_text)

ID’s are a unique identifier and as such can only be used once per page. Use these to define the main structure of your site. The # symbol is used to declare your ID styles.

Classes can be used an unlimited amount of times within a page. It is good to use classes for formatting that will be used to keep your layout consistant and easily adaptable to changes. The . symbol is used to declare your class styles.

When you want to amend a preset html tag, do not put any characters ( . or # ) before it. These only apply when defining whether a style is a class (.) or ID (#) For example:
BODY { font-size:1.0em; }
A { color:#F00; }

however you do apply the identifying character to its classes / ID’s as shown below:

A .quick_link { color: #067; }

I previously had a post showing how to completely center a page, which works, however if the browser becomes too narrow then the page’s far left side becomes hidden as the center of the page continues to take precedence. (Also the previous post would explain how to also center vertically as WELL as horizontally)

Use this instead, besides, its less div’s and quicker:

BODY {
text-align:center;
}

/* Set left & right margins ‘auto’ keeps .content in the center of the screen */
/* Left aligns .content text (otherwise it would follow suit and be centered) */
/* Set desired width (I use 775 so fits on 800*600 with scrollbar) */

.content {
margin:0px auto;
text-align:left;
width:775px;
}

And the html code as follows:

<div class=”content”>
This is my content. Everything inside these tags will be constrained within the 775px boundary however it will adjust depending on the width of the screen to always be centered
</div>

Sometimes you’ll need to display data in rows which also align vertically. (See the example).

For this it is best to create a div for your row holder with individual divs to set the column constraints.

[div class=’row’]
[div class=’cell’]Column 1[/div]
[div class=’cell’]Column 2[/div]
[div class=’cell’]Column 3[/div]
[/div]
And within the stylesheet:
.row {
clear:both;
}

.cell {
float:left;
width:100px;
}

Duplicate the row div and you will have equal rows and columns for your data.