• Choose a category
• All
• Classic-Fiction

margin-top: 48px;

font: 10px verdana, arial, helvetica;

text-align: center;

}

Using CSS for styling

The second job performed by CSS is the visual styling of the elements. The graphics used by the items in the folder are assigned by class name, for example: div.folder{

background:

transparent url(images/folder.png)

top left no-repeat;

}

div.file{

background:

transparent url(images/file.png)

top left no-repeat;

}

div.special{

background:

transparent url(images/folder_important.png)

top left no-repeat;

}

Licensed to jonathan zheng

42

CHAPTER 2

First steps with Ajax

The background property of the icon styles is set to not repeat itself and be positioned at the top left of the element, with transparency enabled. (Figure 2.2 is rendered using Firefox. Transparency of .png images under Internet Explorer is buggy, with a number of imperfect proposed workarounds available. The forthcoming Internet Explorer 7 fixes these bugs, apparently. If you need crossbrowser transparent images, we suggest the use of .gif images at present.) Individual items declare two style classes: The generic item defines their layout in the container, and a second, more specific one defines the icon to be used. For example:

All the images in the styling are applied as background images using CSS. The titlebar is styled using an image as tall as the bar and only 1 pixel wide, repeating itself horizontally:

div.titlebar{

background-color: #0066aa;

background-image: url(images/titlebar_bg.png);

background-repeat: repeat-x;

...

}

The full HTML for this widget is presented in listing 2.1.

Listing 2.1 window.html

href='window.css' /> stylesheet

The HTML markup defines the structure of the document, not the look. It also defines points in the document through which the look can be applied, such as class names, unique IDs, and even the tag types themselves. Reading the HTML, we can see how each element relates to the other in terms of containment but not the eventual visual style. Editing the stylesheet can change the look of this document considerably while retaining the structure, as figure 2.2 has demonstrated. The complete stylesheet for the widget is shown in listing 2.2.

Listing 2.2 window.css

div.window{

position: absolute;

overflow: auto;

background-color: #eeefff;

border: solid #0066aa 2px;

margin: 8px;

padding: 0px;

width: 420px;

b Geometry

of element

height: 280px;

}

div.titlebar{

background-color: #0066aa;

background-image:

c Background

texture

url(images/titlebar_bg.png);

background-repeat: repeat-x;

Licensed to jonathan zheng

44

CHAPTER 2

First steps with Ajax

color:white;

border-bottom: solid black 1px;

width: 100%;

height: 16px;

overflow:hidden;

}

span.titleButton{

position: relative;

height: 16px;

width: 16px;

padding: 0px;

margin: 0px 1px; 0px 1px;

float:right; d Flow layout

}

span.titleButton#min{

background: