This would be the case if we were working
with one of the ?¬? xed-width templates.
Note that we are now putting background images over background
images. We earlier added a background graphic, full_arc.gif, into
the two_col_wrap div, which visually appears as the background for
the nav div. Now, we are about to add the three pieces of artwork for
the transparent box into divs inside the nav div. These pieces of artwork
will appear over the artwork in the two_col_wrap div because
their divs are descendants of two_col_wrap and therefore appear on
top of it. This will mean that the furthest-back image in two_col_
wrap, which is the circles, will show through the transparent box in
the nav column??”a nice visual effect.
ADDING THE TRANSPARENT BACKGROUND GRAPHIC TO THE
COLUMN
So the next question is: Where do we add these background box
graphics? Here is the plan: I am going to add the center background
graphic into the nav_inner div. I??™ll add two more divs into the
markup, one immediately before the inner div starts to hold the top
curve of the box, and one right after the inner div to hold the curved
bottom of the box. In this way, the curved pieces of the top and bottom
of the box will sit directly above and below the center of the
box, and look like part of it.
STYLIN??™ WITH CSS - CHAPTER 7 260
Let??™s add the extra divs into the markup.
Pages:
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301