Conversely, you want to ensure that the columns have a background
color of transparent, so the faux column artwork does show through
them (Figure 5.13).
FIGURE 5.13 A two-column liquid layout with faux columns from the Stylib library.
sets maximum layout width
sets minimum layout width
centers layout in browser
centers layout in browser
resets the centering hack for IE6 on
the body tag
The ../ in the ?¬? le path means ???up
one folder level.??? In my current ?¬? le
organization, the chapter_5 folder
is three levels up from this CSS ?¬? le.
Your path from the CSS to the image
may need to be different.
STYLIN??™ WITH CSS - CHAPTER 5 162
Even though the navigation column is still the same short length as
in the two-column liquid layout earlier in this chapter, the visual
result is very different??”the columns now appear to extend fullheight
each side of the content area. All it takes is a little care with
the artwork to ensure that the horizontal dimensions of the elements
in the piece of artwork match the widths of the columns.
THREE-COLUMN LIQUID LAYOUT WITH FAUX COLUMNS
If you need to add faux columns to the liquid three-column layout
that we saw prior to this exercise, you will need to make separate
graphics to visually extend the left and right columns, like this
(Figure 5.14):
FIGURE 5.14 To create faux columns
for the liquid three-column layout,
these two pieces of artwork can be
added to the twocolumnwrap and
threecolumnwrap divs respectively.
Pages:
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205