Case 5: Tsdesign | Cascading Style Sheets: Designing for the Web (3rd Edition)

This elegant and seemingly simple page (see Figure 11.6) is the first case study that uses HTML tables for layout. It also includes an interesting text effect (the "what we do" is blurred), and the spatial layout poses some extra challenges. Still, the design is within the scope of CSS, and the rewritten code, when converted into CSS, is considerably simpler and more compact than the original design.

Figure 11.6. Original design: TSDesign.

To follow the discussion in this case study, you need to understand the concepts described in Chapter 7, "Space Inside Boxes," and Chapter 8, "Space Around Boxes."

When converting a page like this into CSS, you should follow the same process as described in the previous case studies. To not repeat ourselves unnecessarily, we skip the full description of that process and concentrate on the design features that make this page more difficult than the others.

First, notice that one of the lines on the left is blurred, as if it is out of focus. Manipulating focus is a common cinematographic technique that is also often used in contemporary graphic design. CSS2 has a property called text-shadow that can do this, among other things. However, because of poor support in browsers, this feature was removed from CSS 2.1. Remember, CSS 2.1 only includes features that are supported by two or more browsers. In the hope that text-shadow will one day return to the Web, we show the code to achieve the effects:

 text-shadow: 0 0 0.2em

Second, the layout of the page is more complex than in the previous case studies. We can split the page into three distinct areas (see Figure 11.7):

Top-level headline ("TSDesign")
Vertical menu on the left side below the headline
Right side, which includes a second-level headline and some paragraphs

Figure 11.7. Three areas of the page.

In the original design, a table was used to place the various elements on the page. CSS can work alongside tables, but offers layout features of its own that have several advantages: The markup is simpler and the pages work in browsers that do not support tables.

Another design feature you will notice on this page is that the text in area 2 is right aligned (see Chapter 7 for a description of text alignment). Also, the headline in area 1 is right aligned with area 2. Area 3 is more traditional; all text is left aligned.

To express this layout in CSS, start by finding one HTML element that corresponds to each area. Area 1 is the simplest because it contains only one element:

 <H1>TSDesign</H1>

We need to set two properties to make the H1 element correspond to area 1. First, the width of the element must be limited; by default, an element will stretch out as wide as possible. Second, the text within the element must be set to be right aligned. The style sheet becomes

 H1 { width: 30%; text-align: right }

Area 2 is slightly more complex because it has multiple elements in it. The elements form a list, and it's therefore natural to put them inside a UL element, although the original design doesn't do this. The added benefit of using a UL is that we get an element that corresponds to area 2:

 <UL CLASS=main-menu>   <LI > what we do   <LI > our approach   <LI > clients   <LI > our team   <LI > what's new </UL>

Because there may be other UL elements in the document, we added a CLASS attribute on UL. Because each list item has a different style, we also gave them a CLASS.

Normally, LI elements within UL have a list marker. This is not the case in the original design, so we turn it off with the following:

 UL.main-menu { list-style: none }

We must also set the width and the text alignment as we did for area 1:

 UL.main-menu { width: 30%; text-align: right }

Area 3 is the last and the most complex among the three areas. It contains multiple elements of various types and the area has no natural enclosing element that corresponds to it. Thus, we have to add one of our own, and the DIV element serves this purpose:

 <DIV CLASS=main-text>   <H2>what we do</H2>   <P>... </DIV>

Recall from Chapter 4 that the DIV element, in combination with a CLASS attribute, allows you to create your own elements. Now that we have an element, we attach style sheet rules to it:

 DIV.main-text {   width: 60%;   text-align: left }

Setting the text alignment is probably not necessary because this is how Western languages are normally presented. Setting the width, however, is necessary unless you want the content of the area to use all the available space.

We have now found three elements that each represent an area shown in Figure 11.7. Also, we have assigned values to the width and text-align properties so that they resemble the original design. What remains is there to position the elements. The original design uses tables to accomplish the spatial layout, but we will no surprise use CSS.

The key property to achieving table-like behavior in CSS is the float property. Earlier in this chapter, we used float to have text wrap around an image, thus placing the image and the text next to each other horizontally. When using HTML extensions, you can only make images float, but CSS has no such restriction any element can float.

By making area 2 (or, more correctly, the UL element that represents area 2) float, we allow area 3 to be placed next to it:

 UL.main-menu { float: left }

If you have trouble understanding why this will work, think of area 2 as an image for a moment: Surely, images can have text float around them. The only difference is that area 2 is not an image, but a textual element (namely UL).

Actually, there is one more difference. The text in area 3 is placed on the side of area 2, but it doesn't wrap around it as text wraps around the image of Case 2. Instead, it continues downward along the same left margin. This is achieved by setting the left margin:

 DIV.main-text { margin-left: 40% }

Recall that the width of the DIV element has been set to 60% of the available width. Therefore, a left margin of 40% makes sure the element moves over to the right.

Because not all aspects of recreating this example in CSS were discussed, the complete style sheet is included as a reference:

 <HTML>   <TITLE>TSDesign: What We do</TITLE>   <STYLE TYPE="text/css">     BODY {       background: #003;       color: #fff;       font: 16px sans-serif;       margin-left: 5%;       margin-right: 5%;     }     A:link { color: #969 }     A:visited { color: #666 }     H1 {                              /* area 1 */       font: 35px Garamond, serif;       font-weight: 200;       width: 30%;       text-align: right;       margin-top: 0.8em;       margin-below: 0.8em;     }     UL.main-menu {                        /* area 2 */       width: 30%;       float: left;       text-align: right;       font-size: 20px;       list-style: none;     }     LI.what { text-shadow: 0 0 0.2em }     LI.what { color: #669 }     LI.approach { color: #c33 }     LI.clients { color: #996 }     LI.team { color: #699 }     LI.new { color: #f93 }     DIV.main-text {                       /* area 3 */       width: 60%;       margin-left: 40%;     }     H2 { font: 20px sans-serif }   </STYLE>   <BODY>     <H1 STYLE="color: #999">TSDesign</H1>     <UL>       <LI >what we do       <LI >our approach       <LI >clients       <LI >our team       <LI >what's new     </UL>     <DIV CLASS=main-text>       <H2 STYLE="color: #ff9">what we do</H2>       <P><A HREF="http://www.tsdesign.com">Terry           Swack</A> Design Associates (TSDesign)           is a web software... and information design     </DIV>   </BODY> </HTML>