Login   Register  
PHP Classes
elePHPant
Icontem

File: css/photoalbum.css

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  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: 7 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;
}