Chapter 15. Creating Fixed-Width Layouts with CSS
| For those just joining us, a fixed-width layout uses absolute measurements to determine the width of the page, which gives you a higher degree of control over the graphic design. Topic 14 discusses how to create fixed-width layouts using tables. This topic shows you how to achieve the same effect with Cascading Style Sheets (CSS).
If you look at any topic on tables-based layouts in this book, you read over and over again about how you should always build your design with nested tables. You find no such advice in this topic, because you don't need nested tables in CSS. Instead, you divide your layout into a series of rectangular areas called divs or divisions. You construct each area of the design separately using HTML's div tags, and then you lay these elements out on the Web page like the pieces of a puzzle. In this sense, CSS is more graphically oriented than HTML tables. Thinking in terms of rectangles is completely natural for visual people, who tend to see the world in shapes anyway.
As with table layouts, CSS layouts begin life as sketches (see Figure 15.1). Note again that you don't have to worry about nested tables when you work in CSS. You just need to define the different rectangular areas that make up the page. Figure 15.1. Don't call these rectangles table cells. They're divs.
To create this layout, you need three rectangles:
Three rectangles mean three div elements. Here they are: <div style="position: absolute; width: 760px;"> Logo </div> <div style="position: absolute; width: 200px;"> Nav </div> <div style="position: absolute; width: 560px;"> Content </div> The style attributes of these tags give the width in CSS format, not width="760" like you might use if you were building a table. It's important to remember to use CSS format instead of HTML format for everything inside the style attribute. That means a couple of things:
As you recall, the div tags give you the divisions or areas of the page. The next step is to position them on the page. To do this, you express their location as offsets from the top and left side of the browser window. The first div element is easy: It starts in the upper-left corner, so there is no top or left offset: <div style="position: absolute; width: 760px; top: 0px; left: 0px;"> Logo </div> The second div element starts at the left, so there is no left offset, but what about the top offset? You need to specify something here. Otherwise, the second div overlaps the first, which isn't what your design calls for. Let's say you plan to insert a graphical logo in the first div, and you know that the image has a height of 100 pixels. If the second div starts directly under the logo, the offset is 100 pixels, as in Figure 15.2. Therefore, the code is: <div style="position: absolute; width: 200px; top: 100px; left: 0px;"> Nav </div> Figure 15.2. Since you position each div element according to offsets from the top and left, you need to figure out how tall the Logo element is. You can always pick an arbitrary value and refine it later.
For consistency's sake and to spell everything out very clearly for CSS-challenged browsers, you should go back to the Logo div and hard-code the height value: <div style="position: absolute; width: 760px; height: 100px; top: 0px; left: 0px;"> Logo </div> The third div element needs a top offset of 100 pixels to clear the Logo area and a left offset of 200 pixels to clear the Nav area: <div style="position: absolute; width: 560px; top: 100px; left: 200px;"> Content </div>
|
the top of the layout. > <div style="position: absolute; width: 