Bulletproof Web Design: Improving flexibility and protecting against worstcase scenarios with XHTML and CSS [Electronic resources] نسخه متنی

Several months ago, I received an e-mail from a faithful reader of my business site and weblog, SimpleBits. In the e-mail, the reader explained that while he enjoyed reading the site, he often browses the Web with images turned off, further explaining that he connects to the Internet via a slow dial-up connection and likes to read content rather than waiting for graphics to load. He's not aloneto speed up an otherwise sluggish experience, many users disable images in their browsers, allowing pages to load content and background colors only (Figure 6.1).

Figure 6.1. Unchecking the Load Images box in the Firefox browser disables all images.

We'll get back to why the reader was explaining the reason he browses this way in just a minute, but first, it'll be helpful to explain how a tiled image was used on SimpleBits that sat behind all of the site's content.

It's a common approach, especially when utilizing CSS and the background and/or background-image properties. An image is used behind text to add color, patterns, and so forth. At the time, the columns and decorative border on SimpleBits were achieved by using a repeating background image on the entire page. A single image controlled the side stripes, the white content area, and the light-gray sidebar (Figure 6.2).

Figure 6.2. The bg.gif image was tiled vertically on top of dark gray to create the columned background of the site.

[View full size image]

This single image was tiled vertically from top to bottom, creating the columns and side borders that sat on top of a dark-gray background assigned to the <body> element (Figure 6.3).

Figure 6.3. When bg.gif was tiled, it created the white and gray columns that sat behind the page's text content.

[View full size image]

So, by declaring a dark gray for the background on the <body>, I was essentially setting a default background color for the entire page, unless overridden on any inner element.


body {
background: #666;
}

The tiled image was assigned to an inner <div> that contained all of the pages' content; therefore, it would lay on top of the gray background behind it, creating the white and gray columns for text. This all works rather nicely. By layering a tiled image on top of a background color, we're creating space for text to be easily read when placed over the tiled image (Figure 6.4).

Bulletproof Web Design: Improving flexibility and protecting against worstcase scenarios with XHTML and CSS [Electronic resources] نسخه متنی

فارسی

کردی

العربیه

اردو

Türkçe

Русский

English

Français

کانال فیلم من

تبیان من

فایلهای من

کتابخانه من

پنل پیامکی

وبلاگ من

اینجــــا یک کتابخانه دیجیتالی است

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی