The navigation column is 140 pixels wide, with the red right border
on the inner div part being of that width, so the artwork I make
looks like this (Figure 5.12):
137 pixels
3 pixels
1000+ pixels total width
height = 30 pixels
FIGURE 5.12 The faux art work will be added to the mainwrapper div that
extends across the full width of the layout, so I made the artwork wider than the
max-width value; only the part that ?¬? ts within the div is visible. The CSS setting
repeat-y will make it repeat vertically down the page.
Now I add the artwork to the background of the main_wrapper div
like this:
BASIC PAGE LAYOUT 161
#main_wrapper {
max-width:960px;
min-width:720px;
margin-left:auto;
margin-right:auto;
text-align:left;
background:url(../../../chapter_5/code/images/2_col_faux_
art.gif) repeat-y;
}
The repeat-y setting makes the graphic repeat (???tile???) as many times
as needed in order to ?¬? ll the container. Because the main_wrapper
div encloses the entire layout, the graphic tiles the entire background.
In this way, it instantly ?¬? lls an area that could be thousands
of pixels high, yet it is really only 20 pixels high and downloads very
quickly. Note, because the entire background is ?¬? lled, you may want
to be sure that the header and footer have a background color, even
if that??™s white, so that the ???faux??? graphic doesn??™t show through them.
Pages:
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204