(^328) ❘ CHAPTER 12 DRAGGABLE AND DROPPABLE
Applications
The style sheet does all the work of making this raw lump of structural markup into a Finder-
imitating document. The following reviews each rule in the style sheet and explains why each is
needed. The and element are each given 100 percent width and height so that these
both automatically take up the entire viewport.
html,
body {
width: 100%;
height: 100%;
}
In the next rule, you give the Finder a Lucida Grande font, which is a Mac font used for most
Apple-created Mac applications. If that font isn’t available, you can use Arial, which is present on
Windows. If that font is not present, use the generic sans-serif font. The background is set to a shade
of gray; then an image is tiled across the bottom of the window so that this document looks a little
more like a real Finder window. The font color is set to a dark gray. Finally, the default padding
and margin are removed from the element, which is necessary to avoid scrollbars that would
appear on the viewport due to the application of 100% width and height with the preceding style
sheet rule.
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 ;
}
The next rule positions the
element with the id name finderFiles, which contains all the
folders. This
folders. This
element is positioned absolutely and is set to take up nearly the entire viewport,
except the bottom 23 pixels, and that is done by specifying opposing offset properties, which when
present imply width and height. The background is set to white; there is a dark gray border placed
across the bottom of the container; and fi nally, the overflow: auto; declaration is added so that
when you have more folders and fi les than the container can hold, a scrollbar appears so that you
can access folders and fi les off-screen.
div#finderFiles {
border-bottom: 1px solid rgb(64, 64, 64);
background: #fff;
position: absolute;
top: 0 ;
right: 0 ;
bottom: 23px;
[http://www.it-ebooks.info](http://www.it-ebooks.info)
except the bottom 23 pixels, and that is done by specifying opposing offset properties, which when
present imply width and height. The background is set to white; there is a dark gray border placed
across the bottom of the container; and fi nally, the overflow: auto; declaration is added so that
when you have more folders and fi les than the container can hold, a scrollbar appears so that you
can access folders and fi les off-screen.
div#finderFiles {
border-bottom: 1px solid rgb(64, 64, 64);
background: #fff;
position: absolute;
top: 0 ;
right: 0 ;
bottom: 23px;
[http://www.it-ebooks.info](http://www.it-ebooks.info)