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
`
| Album: 2 steps for me:
- put a around all of your image thumbnails
- 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;}
`
almost but no cigar
I have the same problem and tried everything.. does anybody have an idea