Table Columns in CSS

Posted by admin on March 8, 2012
Posted in: Uncategorized.

In HTML/XHTML, the <colgroup> and <col> elements allow the vertical columns of a table to be controlled. This is useful for controlling the width of a column of data or other aspects of presentation, such as background color or text color. By using these elements, you can span more than one column or have one column defined for each actual column, as in the following example:

<table>
<colgroup>
<col span=’2’ />
<col />
</colgroup>
<tbody>
<tr>
<td> column 1 </td>
<td> column 2 </td>
<td> column 3 </td>
</tr>
</tbody>
</table>

<col span=’2’ /> controls the presentation of the <td> elements containing the text of column 1 and column 2, the first two columns of the table. The last <col /> element (without the span attribute) controls the presentation of column 3, contained in the last <td> element.

Using CSS, I can continue the example containing my favorite records. This example shows a column defined for each actual column of data, or in other words, each <td> element appearing in a row. In the example  a column is defined for each cell, and each row has three cells; consequently, there are three columns. You see what styles are allowed on the <col /> element.

Multicolumn CSS Layout

Posted by admin on March 8, 2012
Posted in: Uncategorized.

Multicolumn layouts are the crown jewel of web design. Multicolumn web design is pretty ubiquitous and, thankfully, they’re easy to crank out too. Earlier in this chapter I demonstrated how to make fixed side columns, and fixed headers and footers. The techniques I discuss in this section are very similar. In fact, you’ll see some familiar techniques from those earlier examples at play in the ones that follow, with the difference being that these designs feature no “fixed” position elements, and are designed to be scalable.

A challenge of web page design in making pages that work on a variety of platforms, operating systems, and viewing environments is that different environments hold different challenges. One challenge in particular is creating fluid designs that function on a variety of screen resolutions. A typical goal today is to design for a minimum, 800 x 600 screen resolution, and scale up if the resolution is higher. Thankfully, the number of people still using an 800 x 600 screen resolution is diminishing all the time; you can expect to see about 10 percent of your audience using this screen resolution, and less than a fraction of a percent are using a lower screen resolution, with the majority of people at 1024 x 768 or greater. The designs that I present here scale down to 800 x 600 as the lowest screen resolution threshold, and up to 1024 x 768 as an upper viewing threshold.

Behind the CSS Scenes

Posted by admin on March 8, 2012
Posted in: Uncategorized.

Since ExpressionEngine relied on PHP, the site loaded CSS using PHP with @ import to separate the code from style. This allowed the site to import sectionspecific styles for each area of the site. In spite of these advantages, the site contained many

tags, leading to a case of “Divitis,” a common Web site ailment.

The main role of

is to group the page into sections, such as the navigation, header, footer, and body. For EverythingTori.com, no other solution accomplished what the site needed. Though having many
elements and classes adds as much weight to a page as tables do, CSS still has advantages over tables. For instance, those using screen readers experience fewer problems with CSS than with tables. After all, it was 2004—a time when CSS wasn’t widely adopted by designers and supporting browsers.

The site’s subtle background images led to unforeseen issues cropping up in the design. For example, the home page’s “Musings & News” height is shorter than the background image, so the design crops it to the height of the block. Fortunately, it works naturally for the site with its use of textures and randomness to give it a scrapbook look and feel.

Scalability in CSS

Posted by admin on March 8, 2012
Posted in: Uncategorized.

In working on the design approach, Fierlinger wanted to ensure the layouts were scalable. This scalability would allow the site to accommodate content, large and small, so the content could grow along with the site. To build a flexible structure for scalable layout, he used grid patterns with CSS, which play well together, sinceCSS provides the freedom to work with an underlying grid pattern without the restrictions that come with hard, formal, and obvious boundaries.

The flexible and scalable structure led Fierlinger to use backgrounds to loosen up the grid, to extend and overlap the edges, and to create a highly textured scrapbook feel. Though he designed the site with content scalability in mind, nothing will scale elegantly in situations where the copy, being either too short or too long for a given space, doesn’t synchronize with the design.

Adaptation in CSS

Posted by admin on March 8, 2012
Posted in: Uncategorized.

Beginning Web developers test—and sometimes break—the rules for good development as they learn what works and what doesn’t. Of course it’s important to pick up what’s right and wrong, black and white, but it’s equally important to
be able to see the grey, ambiguous area and know that the “best” solution isn’t always, well, the best.

For example, sometimes loading a page up with the appropriate DOCTYPE-, Section 508-compliant tags hinders Google too much for it to deliver a fast experience for its users, and you have to ditch the DOCTYPE tags. Even the best techniques and technologies can be thrown out of the window as long as you know how that will affect your audience. Adaptation is about knowing when to break the rules for the right reasons.