PHP Classes

File: css/photoalbum.css

Recommend this page to a friend!
  Classes of Andy Loftus   Photo Album   css/photoalbum.css   Download  
File: css/photoalbum.css
Role: Auxiliary data
Content type: text/plain
Description: Defines layout, look and feel of PhotoAlbum elements
Class: Photo Album
Display interactive photo album
Author: By
Last change: Fixed to match default_layout.jpg screenshot.
Date: 17 years ago
Size: 1,324 bytes
 

Contents

Class file image Download
/* body{ color: #333; font-size: 11px; font-family: verdana; } a{ color: #333; display: block; font-weight: bold; text-decoration: none; } a:hover{ background: #fff; } h3{ margin: 0; padding: 5px; font-size: 14px; } p{ margin: 0; padding: 5px; line-height: 1.5em; } */ /* *** SETTING CSS WIDTHS *** 1. Choose width for #nav element 2. Find stretcher width: stretcher_width = (thumbnail_max_size x cells_per_row) + (8 x cells_per_row) 3. Find wrapper width: wrapper_width = nav_width + stretcher_width + (fudge_factor x cells_per_row) [NOTE: try fudge_factor=6 to start, play around with it to get the look you want] Example: (assume cells_per_row=5, thumb_max_size=100, fudge_factor=6) NAV_WIDTH = 200 STRETCHER_WIDTH = (100 * 5) + (8 * 5) = 500 + 40 = 540 WRAPPER_WIDTH = 200 + 540 + (6 * 5); = 200 + 540 + 30 = 770 */ #nav{ width: 200px; float: left; } #wrapper{ margin: 0 auto; width: 770px; } #right{ float: right; } .tab{ color: #333; padding: 3px; margin: 0 1px 1px 0; text-align: center; background-color: #6FB9E9; } .stretcher{ background-color: #F5DEB3; text-align: center; } TABLE.thumbs { padding: 4px; border-width: 0; }