(^344) ❘ CHAPTER 13 SORTABLE
helpful in the explanation for the style sheet in this example. Then, you also gratuitously give each
element class names, which makes it much easier to apply style or behavior to those specifi c ele-
ments, in addition to making it easier to identify the purpose of the element from the standpoint of
semantics. Each class name is chosen so that it conveys the exact purpose of the element.
Using CoreImage to Resize and Change Formats on the Fly
The application is designed so that sortable elements are contained in a single column that spans
the left side. The column is created by using the top and bottom offset properties in tandem to
imply height, which, in turn, lets you have a stretchy column that resizes fl uidly with the size of the
viewport.
In the style sheet, fi rst, you give the and elements 100 percent width and height, and
remove any default margin or padding from the element. (Some browsers apply default margin;
some apply default padding.)
html,
body {
width: 100%;
height: 100%;
}
body {
font: 12px 'Lucida Grande', Arial, sans-serif;
background: rgb(189, 189, 189)
url('images/Bottom.png')
repeat-x
bottom;
color: rgb(50, 50, 50);
margin: 0 ;
padding: 0 ;
}
In the next style-sheet rule, you create the left column by styling the
- element with the id name
finderCategoryFiles so that it spans the height of the left side of the document. The declaration top:
0; combined with the declaration bottom: 22px; causes the
- element to span the entire height
of the viewport, except for the bottom 22 pixels, which has a gradient background applied to that
space. The
- element is given a fi xed width of 300 pixels; otherwise, you would have a shrink-to-
fi t width because the
- element is absolutely positioned.
ul#finderCategoryFiles {
position: absolute;
top: 0 ;
bottom: 22px;
[http://www.it-ebooks.info](http://www.it-ebooks.info)