Preparing for Reconstruction

Experimenting with Layouts

In this section, you’ll design two different layouts. The first uses positioning, the second uses float. When you’re finished with the exercises, you can save your results as templates and begin to use your newfound awareness of positioning to create even more complicated layouts.

Designing a Three-Column Layout

In this case, you’ll create a layout that has three columns, a very popular approach to layout. The left and right columns are going to be positioned absolutely, while the center “content” layout will be fluid, adjusting to resolution and browser sizing.

Note 

 This example relies on the assumption that there are no padding and no margins to the body element.

This example will use an embedded style sheet, but you can also use a linked sheet if you prefer.

  1. Begin with an HTML or XHTML document:

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE  html PUBLIC "-//W3C//DTD XHTML 1.1//EN"      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Layout Techniques</title> </head> <body> </body> </html>
  2. Add the style element and ID selector to the head portion of the document:

    <style type="text/css"> #left </style> 
  3. Create a rule to position the column absolutely, using the position property with a value of absolute:

    <style type="text/css"> #left {     position: absolute; } </style>
  4. Add the positioning information, in pixels:

    #left {     position: absolute;     left:10px;     top:50px;     width:200px; }

You’ve now created a left column set to a width of 200 pixels that will be positioned in a compliant browser at 50 pixels from the top and 10 pixels from the left. You can change these values to suit your needs.

Next, you’ll create the fluid center. To do so, follow these steps:

  1. Create an ID selector for the center column:

    #center
  2. Now create a rule for the left margin value:

    #center {     margin-left: 200px; }
  3. And a rule for the right margin value:

    #center {     margin-left: 200px;     margin-right: 200px; }

Save your file before continuing.

You’ll now want to create the style rules for the right column.

  1. Create an ID selector to denote the right column:

    #right
  2. Position the column using an absolute value:

    #right {     position: absolute; } 
  3. Add the position values:

    #right {     position: absolute;     right:10px;     top:50px;     width:200px; }

To implement the layout within your document, you’ll employ the div element along with the appropriate ID. Listing 6.6 shows the completed markup and style. I’ve added some dummy content so you can see the results in Figure 6.13.

click to expand
Figure 6.13: A three-column fixed and fluid layout

Listing 6.6: A Three-Column Layout with a Dynamic Center

start example
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE  html PUBLIC "-//W3C//DTD XHTML 1.1//EN"      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Layout Techniques</title> <style type="text/css"> #left {     position: absolute;     left:10px;     top:50px;     width:200px; } #center {     margin-left: 200px;     margin-right: 200px; } #right {     position: absolute;     right:10px;     top:50px; } </style> </head> <body> <div > <p>Navigate:</p> <p><a href="index.html">Home</a><br /> <a href="news.html">News</a><br /> <a href="about.html">About Us</a><br /> <a href="contact.html">Get in Touch</a></p> </div> <div > <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam
corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
autem veleum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.</p> <p>Li Europan lingues es membres del sam familie. Lor separat existentie es
un myth. Por scientie, musica, sport etc., li tot Europa usa li sam
vocabularium. Li lingues differe solmen in li grammatica, li ronunciation e
li plu commun vocabules. Omnicos directe al desirabilit de un nov lingua
franca: on refusa continuar payar custosi traductores. It solmen va esser
necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>
</div> <div > <p>Of Interest:</p> <ul> <li>Headlines</li> <li>Today’s weather</li> <li>Sports Scores</li> </ul> </div> </body> </html>
end example

Exploring a Two-Column Layout Using float

This technique was first described by Jeffrey Zeldman (see the sidebar “Related Resources” earlier in this chapter for his URL) and is now gaining widespread popularity as a simple way to lay out pages using CSS. It’s based on the float concepts described earlier in this chapter, and it provides a really nice, flexible means of laying out content without having to rely on absolute positioning.

You’ll define the left and right columns using ID selectors and the float property to anchor the design. In this example, you’ll create a style sheet that is external so it can be linked or imported. You can, however, embed the style if you so desire.

  1. Open a new document to create the external style sheet, and add a class ID for the left portion (which in this case is being used as a content portion) to the document:

    #content
  2. Create a rule using the float property with a value of left:

    #content    {     float:left; }
  3. Set the width (in percentages, making it dynamic) of the column, along with a right margin to create a gutter between the content column and the right-hand column:

    #content {     float:left;     width:70%;     margin-right: 25px; } 
  4. Go ahead and create an ID selector and rule for the right column, adding any additional rules you desire. In this case, I simply added some padding to the top of the column:

    #right {     padding-top: 20px; }

Listing 6.7 shows the complete CSS listing, and Listing 6.8 shows the XHTML document.

Listing 6.7: CSS Syntax for Two-Column Layout

start example
#content {         float:left;         width:70%;         margin-right: 25px; } #right {         padding-top: 20px; }
end example

Listing 6.8: XHTML Document Linked to the Layout CSS

start example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Working with Style</title> <link rel="stylesheet" type="text/css" href="layout2.css" /> </head> <body> <div > <h3>Quotations</h3> <p>"Brain researchers estimate that your unconscious data base outweighs 
the conscious on an order exceeding ten million to one. This data base is
the source of your hidden, natural genius. In other words, a part of you is
much smarter than you are. The wise people regularly consult that smarter
part."</p> <p>"Crazy people who are productive are geniuses. Crazy people who are rich
are eccentric. Crazy people who are neither productive nor rich are just
plain crazy. Geniuses and crazy people are both out in the middle of a deep
ocean; geniuses swim, crazy people drown. Most of us are sitting safely on
the shore. Take a chance and get your feet wet."</p>
</div> <div > <p>Navigate:</p> <p><a href="index.html">Home</a><br /> <a href="news.html">News</a><br /> <a href="about.html">About</a><br /> <a href="contact.html">Get in Touch</a></p> </div> </body> </html>
end example

You now have a two-column, dynamic layout suitable for getting creative with on your own. Figure 6.14 shows the results.

click to expand
Figure 6.14: An example of a two-column layout using float



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