/*
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;
}
|