Making Elements Draggable (^) ❘ 329
left: 0 ;
overflow: auto;
}
The remaining style-sheet declarations set up the folders. The next rule puts the folders side by side
and gives each fi xed dimensions. The overflow: hidden; declaration prevents long folder names
from extending outside the boundaries of the container.
div.finderDirectory {
float: left;
width: 150px;
height: 100px;
overflow: hidden;
}
The next rule handles the display of the folder icon. The
element sets the dimensions of the
icon with the highlighting effect in mind, and the gray background applied to a selected folder is
applied to the
icon with the highlighting effect in mind, and the gray background applied to a selected folder is
applied to the
element. The background image is sized using the background-size property to
limit it to the actual dimensions of the folder’s icon. The background-position is set to center so that
it is centered both horizontally and vertically within the solid gray background color when the folder
is highlighted. The
limit it to the actual dimensions of the folder’s icon. The background-position is set to center so that
it is centered both horizontally and vertically within the solid gray background color when the folder
is highlighted. The
element is adjusted in position using top and bottom margin, and then it is
centered inside its container
centered inside its container
element using margin with auto as the value of the left and right
margins. The result is a folder icon that looks more like a real Finder icon in OS X. Although, if
you wanted to mimic Windows Explorer or another fi le management program, you might choose to
deploy some of the same techniques.
div.finderIcon {
background: url('images/Folder 48x48.png') no-repeat center;
background-size: 48px 48px;
height: 56px;
width: 54px;
margin: 10px auto 3px auto;
}
The following rule defi nes the style for a selected folder. The class name finderIconSelected is
applied to the
margins. The result is a folder icon that looks more like a real Finder icon in OS X. Although, if
you wanted to mimic Windows Explorer or another fi le management program, you might choose to
deploy some of the same techniques.
div.finderIcon {
background: url('images/Folder 48x48.png') no-repeat center;
background-size: 48px 48px;
height: 56px;
width: 54px;
margin: 10px auto 3px auto;
}
The following rule defi nes the style for a selected folder. The class name finderIconSelected is
applied to the
element with the class name finderIcon dynamically using jQuery.
div.finderIconSelected {
background-color: rgb(196, 196, 196);
border-radius: 5px;
}
The next rule centers the name of the folder.
div.finderDirectoryName {
text-align: center;
}
And fi nally, the last rule sets the style for the selected folder’s name. A blue background, a little
padding, white text, and rounded corners are added to make the folder name look more like the
real Finder.
span.finderDirectoryNameSelected {
background: rgb(56, 117, 215);
http://www.it-ebooks.info
div.finderIconSelected {
background-color: rgb(196, 196, 196);
border-radius: 5px;
}
The next rule centers the name of the folder.
div.finderDirectoryName {
text-align: center;
}
And fi nally, the last rule sets the style for the selected folder’s name. A blue background, a little
padding, white text, and rounded corners are added to make the folder name look more like the
real Finder.
span.finderDirectoryNameSelected {
background: rgb(56, 117, 215);
http://www.it-ebooks.info