Next Steps

Going the Distance: Pure CSS

The real question is, how far can this design be pushed into the realm of pure CSS layout? The answer is that some of the design will work well in a pure CSS layout situation, whereas other aspects of the design will be lost. This is why, ideally, you will be designing pure CSS layouts from the get-go. However, it’s a good exercise to learn what will be lost and what benefits will be gleaned from pushing this exercise to the limits.

With CSS, browser compatibility becomes more of a concern, of course, and any browser that has problems with CSS layout features will be compromised. Accessibility increases, however, because all tables will have been removed and the document is therefore easy for screen readers to interpret effectively.

Converting Tables to divs

At this point, the tables will all be converted to div elements, with some cells becoming div elements as well. This provides you a way to define which areas need to be laid out using CSS.

Listing 7.8 shows the structure within the body portion of the document. All the tables are gone, but the divisions remain with their appropriate IDs.

Listing 7.8:  WWW.   Removing the Tables and Preparing for Layout Styles

start example
<body> <div >...</div> <div >  <div >...</div>  <div >...</div>   <div >    ...   <div >...</div>  </div>  <img >  <div >...</div> </div> </body>
end example

Note 

 One thing to watch out for is “div soup," which is not too much better than table soup! If you find yourself nesting div elements more than two or three deep, you’re probably overdoing it and need to look for a simpler solution.

Placing the Pieces Using float

Within the “main” div, there are three "columns." Conceivably, these could be floated or positioned, but that could raise problems. Floats are dependent on source order—a float can’t be above another floated element that comes before it in the document source. So, to get the desired effect, the document has to be rearranged accordingly. One of the advantages to using float over position is that floating has somewhat better browser support than positioning.

Note 

 You can see a source order rearrangement in the previous section, where the expertlist ID came before the content ID. This allowed you to float the following pieces more effectively.

For this exercise, the sidebar will be floated, and the main column will be left in the normal flow. The footer will require attention in terms of margins and widths. Listing 7.9 shows the style sheet for the page layout.

Listing 7.9:  WWW.   Laying Out the Page Using float

start example
<style type="text/css"> <!— div#masthead, div#main  {      width: 800px; } div#masthead img  {      vertical-align: bottom; } div#nav  {      float: left;       width: 140px; } div#expertlist  {      float: right;       width: 160px; } div#expertlist  {      border: 1px solid #467CC2;       border-bottom-width: 10px;      margin: 40px 40px 0 0; } div#content  {      margin: 0 200px 0 145px; } div#credits  {      width: 788px; } img#hostedby  {      margin-top: -120px; } —> </style>
end example

It’s important to point out that in this example, the content section is not floated, but the content div is given margins large enough to give the floated columns room to live without overlap and without pushing the main content text around.

The content is specifically left unfloated so that it holds open the height of the main containing div. Doing this keeps the footer at the bottom, but more importantly prevents the main div from collapsing to zero height.

start sidebar
Floats and Height

The drawback to floats is that they tend to auto-size their height. In some cases, floats will stick out of their parent elements. It’s possible to force a parent element to wrap around floats, but getting floats to stretch taller is much harder. There isn’t a reliable way to force a float to be as tall as its parent element (even though height: 100% should work . You can get a parent to wrap around a float by inserting at the end a clear: both element:

<div style="clear: both;">&nbsp;</div> 
end sidebar

Figure 7.23 shows the layout design using floats. You’ll notice the left navigation bar stops short of the page length (7.23A), and that the footer doesn’t match up with the table-based original (7.23B). These are unavoidable differences resulting from use of CSS divisions rather than table cells.

click to expand
Figure 7.23: Using floats for laying out the document CSS

Positioning to the Rescue

As mentioned, another method is to position elements rather than floating them. While this isn’t as well supported as floating, it’s more precise.

To position the elements in question, a containing block must be created to give some context to the position. The divisions will change as a result, as shown in Listing 7.10.

Listing 7.10:  WWW.  Establishing a Containing Block in Preparation for Positioning

start example
<body> <div >...</div> <div >  <div >...</div>  <div >   ...   <div >...</div>  </div>  <div >...</div>  <img > </div> <div >...</div> </body>
end example

With positioning, unlike with floating, placement is almost completely divorced from source order. The only constraint is the need for a containing block if you want elements to be placed in a common area. In fact, the navigation could appear after the main content and expert speaker list in the document source and still place it right where it’s positioned.

Note 

 You’ll notice that the source has already been rearranged compared to the float example earlier. The expertlist is now back below the content ID. It’s always an advantage to be able to order sources as they make sense. This helps keep the content organized in cases where CSS positioning is unsupported by a browser, and it makes the document more logical to those reading it using a screen reader or Braille printout.

Examine how the bottom links have been placed within the document. Placing them in with the content makes sense because that’s where they appear—inside the content box

With this reorganization, the navigation can be placed anywhere, and the styles for positioning can be applied, as shown in Listing 7.11.

Listing 7.11:  WWW.   Styling with Positioning

start example
<style type="text/css"> <!— div#masthead, div#main  {      width: 800px; } div#masthead img  {      vertical-align: bottom; } div#main  {      position: relative; } div#nav  {      position: absolute;       top: 0;       left: 0;       width: 140px; } div#expertlist  {      position: absolute;       top: 0;       right: 0;       width: 160px; } div#expertlist  {      border: 1px solid #467CC2;       border-bottom-width: 10px;      margin: 40px 40px 0 0; } div#content  {      margin: 0 200px 0 0;       border-left: 142px solid #F4D532; } div#credits  {      width: 788px; } img#hostedby  {      position: absolute;       left: 0;       bottom: 0; } —> </style>
end example

The main content is not positioned here, for the same reason it wasn’t floated before.

Figure 7.24 shows the results using positioning.

click to expand
Figure 7.24: Using CSS positioning for laying out the document

Compare and Contrast

Obviously, certain compromises were made to achieve the design using no tables whatsoever. And, while the page weight hasn’t changed that much since the document was streamlined in the first place, there are a lot more options available for the designer when using CSS to lay out pages. Floating and positioning allow for a much more varied and flexible opportunity to create layouts, although, at this point, that comes with the price of using only style for layout.



Cascading Style Sheets(c) The Designer's Edge
ASP.NET 2.0 Illustrated
ISBN: 0321418344
EAN: 2147483647
Year: 2005
Pages: 86

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net