Home› Themes

CSS problems creating Zen theme, trying to center thumbnails

austin Member
in Themes
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">
" rel="lightbox[<?php printAlbumTitle();?>]" title="<?php echo getImageTitle();?>"><?php printImageThumb(getImageTitle(), "reflect rheight30 ropacity40"); ?>
</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;
}
'

Comments

  • aitf311 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;

    }

    `

  • austin Member
    almost but no cigar

    http://www.nickgarmon.com/showcase/Belt_Buckles
  • hamsterbacke82 Member
    I have the same problem and tried everything.. does anybody have an idea
Sign In or Register to comment.