Member
I've been trying for at least four hours to get the thumbnails to center and cannot for the life of me. Would anyone be willing to take a look at my page and try to figure out why the thumbnails will not center?
the url is here http://www.nickgarmon.com/showcase/Belt_Buckles
album.php
`
<?php $startTime = array_sum(explode(" ",microtime())); if (!defined('WEBPATH')) die(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html>
<head>
<title><?php echo $conf['website_title']; ?> | Album: <?php printAlbumTitle(); ?></title>
<link rel="stylesheet" href="<?php echo $_zp_themeroot ?>/colour-showcase.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $_zp_themeroot ?>/orange_sunset.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $_zp_themeroot ?>/css/slimbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="<?php echo $_zp_themeroot ?>/js/mootools.js"></script>
<script type="text/javascript" src="<?php echo $_zp_themeroot ?>/js/slimbox.js"></script>
<script type="text/javascript" src="<?php echo $_zp_themeroot ?>/js/reflection.js"></script>
<?php zenJavascript(); ?>
</head>
<body>
<div id="main">
<div id="links"></div>
<div id="logo"></div>
<div id="content">
<div id="menu">
<?
include("/home/ascott9/nickgarmon.com/admin/config.inc.php");
content("main_menu_gallery");
?>
</div>
<div id="column2">
<h1><?php printAlbumTitle(true);?></h1>
<?php printAlbumDesc(true); ?>
<?php while (next_image()): ?>
<div class="imagethumb">
<a>" rel="lightbox[<?php printAlbumTitle();?>]" title="<?php echo getImageTitle();?>"><?php printImageThumb(getImageTitle(), "reflect rheight30 ropacity40"); ?></a>
</div>
<?php endwhile; ?>
</div>
</div>
<div id="footer">
copyright © 2007 Nick Garmon
</div>
</div>
</body>
</html>
'
Associated CSS file:
'
/* global */
html{height: 100%;}
body
{ font-family: verdana, arial, sans-serif;
padding: 0px;
margin: 0px;
font-size: .68em;
}
p
{ margin: 0px;
padding: 0px 0px 16px 0px;
line-height: 1.7em;
}
h1
{ font-family: arial, sans-serif;
letter-spacing: .1em;
}
h2
{ margin: 0px;
padding: 0px 0px 4px 0px;
font-size: 100%;
}
img{border: 0px;}
a{outline: none;}
/* image positioning - left, right and center */
.left
{ float: left;
padding: 0px 8px 0px 0px;
}
.right
{ float: right;
padding: 0px 0px 0px 8px;
}
.center
{ display: block;
text-align: center;
margin: 0 auto;
}
/* block quote */
blockquote
{ margin: 20px 0px 20px 0px;
padding: 10px 20px 0px 20px;
border-left: 8px solid;
}
/* unordered list */
ul
{ margin: 8px 0px 0px 16px;
padding: 0px;
}
ul li
{ list-style-type: square;
margin: 0px 0px 11px 0px;
padding: 0px;
}
/* ordered list */
ol
{ margin: 8px 0px 0px 24px;
padding: 0px;
}
ol li
{ margin: 0px 0px 11px 0px;
padding: 0px;
}
/* main container */
#main
{ width: 780px;
margin-left: auto;
margin-right: auto;
}
/* links above the logo / footer */
#links, #footer
{ margin-left: auto;
margin-right: auto;
padding: 10px 21px 0px 19px;
width: 720px;
height: 26px;
font-size: 94%;
text-transform: uppercase;
}
#links{text-align: right;}
#footer{text-align: center;}
#links a, #footer a{text-decoration: none;}
#links a:hover, #footer a:hover{text-decoration: underline;}
/* logo */
#logo
{ margin-left: auto;
margin-right: auto;
width: 760px;
height: 148px;
text-align: left;
}
#logo h1
{ margin: 0px;
padding: 41px 0px 0px 19px;
font-size: 150%;
letter-spacing: .2em;
}
/* navigation menu */
#menu
{ height: 42px;
width: 760px;
margin-left: auto;
margin-right: auto;
}
#menu ul{margin: 0px auto;}
#menu li
{ float: left;
margin: 0px;
padding: 0px;
}
#menu li a
{ display: block;
float: left;
height: 37px;
text-decoration: none;
padding: 3px 19px 2px 19px;
text-transform: uppercase;
}
/* main content */
#content
{ margin-left: auto;
margin-right: auto;
width: 760px;
height: auto;
padding: 0px;
overflow: hidden;
}
/* column 2 - page content */
#column2
{
width: 760px;
float: left;
padding: 12px 3px 12px 12px;
margin-left: auto;
margin-right: auto;
}
#column2 h1
{ padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-bottom: 1px solid;
font-size: 150%;
text-transform: uppercase;
font-weight: normal;
}
.sidebaritem a, #column2 a, .sidebaritem a:hover, #column2 a:hover
{ padding: 0px 0px 2px 0px;
text-decoration: none;
border-bottom: 1px dashed;
}
.sidebaritem a:hover, #column2 a:hover{border-bottom: 1px solid;}
.imagethumb {
float: left;
text-align: center;
margin-left: auto;
margin-right: auto;
height: 100px;
width: 140px;
cursor: pointer;
}
'
the url is here http://www.nickgarmon.com/showcase/Belt_Buckles
album.php
`
<?php $startTime = array_sum(explode(" ",microtime())); if (!defined('WEBPATH')) die(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html>
<head>
<title><?php echo $conf['website_title']; ?> | Album: <?php printAlbumTitle(); ?></title>
<link rel="stylesheet" href="<?php echo $_zp_themeroot ?>/colour-showcase.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $_zp_themeroot ?>/orange_sunset.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $_zp_themeroot ?>/css/slimbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="<?php echo $_zp_themeroot ?>/js/mootools.js"></script>
<script type="text/javascript" src="<?php echo $_zp_themeroot ?>/js/slimbox.js"></script>
<script type="text/javascript" src="<?php echo $_zp_themeroot ?>/js/reflection.js"></script>
<?php zenJavascript(); ?>
</head>
<body>
<div id="main">
<div id="links"></div>
<div id="logo"></div>
<div id="content">
<div id="menu">
<?
include("/home/ascott9/nickgarmon.com/admin/config.inc.php");
content("main_menu_gallery");
?>
</div>
<div id="column2">
<h1><?php printAlbumTitle(true);?></h1>
<?php printAlbumDesc(true); ?>
<?php while (next_image()): ?>
<div class="imagethumb">
<a>" rel="lightbox[<?php printAlbumTitle();?>]" title="<?php echo getImageTitle();?>"><?php printImageThumb(getImageTitle(), "reflect rheight30 ropacity40"); ?></a>
</div>
<?php endwhile; ?>
</div>
</div>
<div id="footer">
copyright © 2007 Nick Garmon
</div>
</div>
</body>
</html>
'
Associated CSS file:
'
/* global */
html{height: 100%;}
body
{ font-family: verdana, arial, sans-serif;
padding: 0px;
margin: 0px;
font-size: .68em;
}
p
{ margin: 0px;
padding: 0px 0px 16px 0px;
line-height: 1.7em;
}
h1
{ font-family: arial, sans-serif;
letter-spacing: .1em;
}
h2
{ margin: 0px;
padding: 0px 0px 4px 0px;
font-size: 100%;
}
img{border: 0px;}
a{outline: none;}
/* image positioning - left, right and center */
.left
{ float: left;
padding: 0px 8px 0px 0px;
}
.right
{ float: right;
padding: 0px 0px 0px 8px;
}
.center
{ display: block;
text-align: center;
margin: 0 auto;
}
/* block quote */
blockquote
{ margin: 20px 0px 20px 0px;
padding: 10px 20px 0px 20px;
border-left: 8px solid;
}
/* unordered list */
ul
{ margin: 8px 0px 0px 16px;
padding: 0px;
}
ul li
{ list-style-type: square;
margin: 0px 0px 11px 0px;
padding: 0px;
}
/* ordered list */
ol
{ margin: 8px 0px 0px 24px;
padding: 0px;
}
ol li
{ margin: 0px 0px 11px 0px;
padding: 0px;
}
/* main container */
#main
{ width: 780px;
margin-left: auto;
margin-right: auto;
}
/* links above the logo / footer */
#links, #footer
{ margin-left: auto;
margin-right: auto;
padding: 10px 21px 0px 19px;
width: 720px;
height: 26px;
font-size: 94%;
text-transform: uppercase;
}
#links{text-align: right;}
#footer{text-align: center;}
#links a, #footer a{text-decoration: none;}
#links a:hover, #footer a:hover{text-decoration: underline;}
/* logo */
#logo
{ margin-left: auto;
margin-right: auto;
width: 760px;
height: 148px;
text-align: left;
}
#logo h1
{ margin: 0px;
padding: 41px 0px 0px 19px;
font-size: 150%;
letter-spacing: .2em;
}
/* navigation menu */
#menu
{ height: 42px;
width: 760px;
margin-left: auto;
margin-right: auto;
}
#menu ul{margin: 0px auto;}
#menu li
{ float: left;
margin: 0px;
padding: 0px;
}
#menu li a
{ display: block;
float: left;
height: 37px;
text-decoration: none;
padding: 3px 19px 2px 19px;
text-transform: uppercase;
}
/* main content */
#content
{ margin-left: auto;
margin-right: auto;
width: 760px;
height: auto;
padding: 0px;
overflow: hidden;
}
/* column 2 - page content */
#column2
{
width: 760px;
float: left;
padding: 12px 3px 12px 12px;
margin-left: auto;
margin-right: auto;
}
#column2 h1
{ padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-bottom: 1px solid;
font-size: 150%;
text-transform: uppercase;
font-weight: normal;
}
.sidebaritem a, #column2 a, .sidebaritem a:hover, #column2 a:hover
{ padding: 0px 0px 2px 0px;
text-decoration: none;
border-bottom: 1px dashed;
}
.sidebaritem a:hover, #column2 a:hover{border-bottom: 1px solid;}
.imagethumb {
float: left;
text-align: center;
margin-left: auto;
margin-right: auto;
height: 100px;
width: 140px;
cursor: pointer;
}
'
Member
2 steps for me:
1) put a <div class="photos"> </div> around all of your image thumbnails
2) replace your orange_sunset.css file with this
`
/* global */
html{height: 100%;}
body
{ font-family: verdana, arial, sans-serif;
padding: 0px;
margin: 0px;
font-size: .68em;
}
p
{ margin: 0px;
padding: 0px 0px 16px 0px;
line-height: 1.7em;
}
h1
{ font-family: arial, sans-serif;
letter-spacing: .1em;
}
h2
{ margin: 0px;
padding: 0px 0px 4px 0px;
font-size: 100%;
}
img{border: 0px;}
a{outline: none;}
/* image positioning - left, right and center */
.left
{ float: left;
padding: 0px 8px 0px 0px;
}
.right
{ float: right;
padding: 0px 0px 0px 8px;
}
.center
{ display: block;
text-align: center;
margin: 0 auto;
}
/* block quote */
blockquote
{ margin: 20px 0px 20px 0px;
padding: 10px 20px 0px 20px;
border-left: 8px solid;
}
/* unordered list */
ul
{ margin: 8px 0px 0px 16px;
padding: 0px;
}
ul li
{ list-style-type: square;
margin: 0px 0px 11px 0px;
padding: 0px;
}
/* ordered list */
ol
{ margin: 8px 0px 0px 24px;
padding: 0px;
}
ol li
{ margin: 0px 0px 11px 0px;
padding: 0px;
}
/* main container */
#main {
width: 780px;
margin: 0 auto;
}
/* links above the logo / footer */
#links, #footer {
margin-left: auto;
margin-right: auto;
padding: 10px 21px 0px 19px;
width: 720px;
height: 26px;
font-size: 94%;
text-transform: uppercase;
}
#links{text-align: right;}
#footer{text-align: center;}
#links a, #footer a{text-decoration: none;}
#links a:hover, #footer a:hover{text-decoration: underline;}
/* logo */
#logo
{ margin-left: auto;
margin-right: auto;
width: 760px;
height: 148px;
text-align: left;
}
#logo h1
{ margin: 0px;
padding: 41px 0px 0px 19px;
font-size: 150%;
letter-spacing: .2em;
}
/* navigation menu */
#menu
{ height: 42px;
width: 760px;
margin-left: auto;
margin-right: auto;
}
#menu ul{margin: 0px auto;}
#menu li
{ float: left;
margin: 0px;
padding: 0px;
}
#menu li a
{ display: block;
float: left;
height: 37px;
text-decoration: none;
padding: 3px 19px 2px 19px;
text-transform: uppercase;
}
/* main content */
#content
{ margin-left: auto;
margin-right: auto;
width: 760px;
height: auto;
padding: 0px;
overflow: hidden;
}
/* column 2 - page content */
#column2
{
width: 760px;
padding:10px;
margin: 0 auto;
}
.photos {
width: 700px;
padding:0;
padding-left:30px;
margin: 0 auto;
}
#column2 h1
{ padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-bottom: 1px solid;
font-size: 150%;
text-transform: uppercase;
font-weight: normal;
}
.sidebaritem a, #column2 a, .sidebaritem a:hover, #column2 a:hover
{ padding: 0px 0px 2px 0px;
text-decoration: none;
border-bottom: 1px dashed;
}
.sidebaritem a:hover, #column2 a:hover{border-bottom: 1px solid;}
.imagethumb {
float: left;
text-align: center;
margin: 0 auto;
height: 100px;
width: 140px;
cursor: pointer;
}
`
1) put a <div class="photos"> </div> around all of your image thumbnails
2) replace your orange_sunset.css file with this
`
/* global */
html{height: 100%;}
body
{ font-family: verdana, arial, sans-serif;
padding: 0px;
margin: 0px;
font-size: .68em;
}
p
{ margin: 0px;
padding: 0px 0px 16px 0px;
line-height: 1.7em;
}
h1
{ font-family: arial, sans-serif;
letter-spacing: .1em;
}
h2
{ margin: 0px;
padding: 0px 0px 4px 0px;
font-size: 100%;
}
img{border: 0px;}
a{outline: none;}
/* image positioning - left, right and center */
.left
{ float: left;
padding: 0px 8px 0px 0px;
}
.right
{ float: right;
padding: 0px 0px 0px 8px;
}
.center
{ display: block;
text-align: center;
margin: 0 auto;
}
/* block quote */
blockquote
{ margin: 20px 0px 20px 0px;
padding: 10px 20px 0px 20px;
border-left: 8px solid;
}
/* unordered list */
ul
{ margin: 8px 0px 0px 16px;
padding: 0px;
}
ul li
{ list-style-type: square;
margin: 0px 0px 11px 0px;
padding: 0px;
}
/* ordered list */
ol
{ margin: 8px 0px 0px 24px;
padding: 0px;
}
ol li
{ margin: 0px 0px 11px 0px;
padding: 0px;
}
/* main container */
#main {
width: 780px;
margin: 0 auto;
}
/* links above the logo / footer */
#links, #footer {
margin-left: auto;
margin-right: auto;
padding: 10px 21px 0px 19px;
width: 720px;
height: 26px;
font-size: 94%;
text-transform: uppercase;
}
#links{text-align: right;}
#footer{text-align: center;}
#links a, #footer a{text-decoration: none;}
#links a:hover, #footer a:hover{text-decoration: underline;}
/* logo */
#logo
{ margin-left: auto;
margin-right: auto;
width: 760px;
height: 148px;
text-align: left;
}
#logo h1
{ margin: 0px;
padding: 41px 0px 0px 19px;
font-size: 150%;
letter-spacing: .2em;
}
/* navigation menu */
#menu
{ height: 42px;
width: 760px;
margin-left: auto;
margin-right: auto;
}
#menu ul{margin: 0px auto;}
#menu li
{ float: left;
margin: 0px;
padding: 0px;
}
#menu li a
{ display: block;
float: left;
height: 37px;
text-decoration: none;
padding: 3px 19px 2px 19px;
text-transform: uppercase;
}
/* main content */
#content
{ margin-left: auto;
margin-right: auto;
width: 760px;
height: auto;
padding: 0px;
overflow: hidden;
}
/* column 2 - page content */
#column2
{
width: 760px;
padding:10px;
margin: 0 auto;
}
.photos {
width: 700px;
padding:0;
padding-left:30px;
margin: 0 auto;
}
#column2 h1
{ padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-bottom: 1px solid;
font-size: 150%;
text-transform: uppercase;
font-weight: normal;
}
.sidebaritem a, #column2 a, .sidebaritem a:hover, #column2 a:hover
{ padding: 0px 0px 2px 0px;
text-decoration: none;
border-bottom: 1px dashed;
}
.sidebaritem a:hover, #column2 a:hover{border-bottom: 1px solid;}
.imagethumb {
float: left;
text-align: center;
margin: 0 auto;
height: 100px;
width: 140px;
cursor: pointer;
}
`
Member
Member
I have the same problem and tried everything.. does anybody have an idea