FIGURE 7. 2 The ?¬? nished Stylin??™
home page at minimum width.
STYLIN??™ WITH CSS - CHAPTER 7 234
Note the two text headings in the header. One is positioned to the
left and the other to the right. Their relationship changes as the page
width varies, as you can see by comparing Figures 7.1 and 7.2. You
can see a similar effect provided by right-positioned elements when
you size the liquid pages of both the Amazon and Jing sites that I
featured in Chapter 5.
The menu bar under the header is styled with the multi_level_
menu.css style sheet from the Stylib library, and you will notice if
you visit the Stylin??™ Web site that the drop-downs of this menu
are transparent and the underlying page is visible through them.
This transparency is created programmatically using the various
CSS opacity options of the different browsers.
On the left navigation bar is a transparent round-cornered box
that can increase in height as more content is added. The transparency
here is created not programmatically but graphically, by using
three .png background images with their transparency levels set in
Adobe Fireworks. The center area of the box can expand as content
is added, through the use of a repeat setting on the CSS for the background
of the element. I also added the small sign-in form that we
saw in Chapter 6 inside this area.
Pages:
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272