I have three columns and three rows images on my thumbnail page. My problem is I cannot position my thumbnail block (as whole), where I want it to be. The only CSS property that works for me is ‘width’. When I use width it spreads out my thumbnails.
Is there anyway I can position my thumbnail block in exact location without increasing the space in between the thumbnails..? ( in another words.. moving ...the whole block of three rows and columns left to right without increasing the space between the thumbnails. ) Does absolute positioning work with tables?
Thank you for any help that you can give me…
My HTML code…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Photography</title>
</head>
<body>
<table border='0' style='margin: 0px ; padding: 0px ;'>
<tr>
<td>
<span class='navlinks'><a href=viewgallery.php>Albums</a></span><font color=#ff0000> >></font>
<span class='navlinks'><a href=viewgallery.php?cid=1>Abstract</a></span><br><br/><br/><br/></td>
</tr>
<td class=thumbs ><a href='viewgallery.php?cid=1&pid=240'><center/><img
src='photos/tb_240.jpg' border='0' alt='End Of Day' class='img'/></a></td>
<td class=thumbs ><a href='viewgallery.php?cid=1&pid=239'><center/><img
src='photos/tb_239.jpg' border='0' alt='A Photographer's Dream' class='img'/></a></td>
<td class=thumbs ><a href='viewgallery.php?cid=1&pid=238'><center/><img
src='photos/tb_238.jpg' border='0' alt='Heaven's View' class='img'/></a></td>
<td class=thumbs ><a href='viewgallery.php?cid=1&pid=237'><center/><img
src='photos/tb_237.jpg' border='0' alt='Colorful World ' class='img'/></a></td>
</tr>
<tr class=thumbs>
<td class=thumbs ><a href='viewgallery.php?cid=1&pid=241'><center/><img
src='photos/tb_241.jpg' border='0' alt='' class='img'/></a></td>
<td class=thumbs ><a href='viewgallery.php?cid=1&pid=242'><center/><img
src='photos/tb_242.jpg' border='0' alt='' class='img'/></a></td>
<td class=thumbs ><a href='viewgallery.php?cid=1&pid=243'><center/><img
src='photos/tb_243.jpg' border='0' alt='' class='img'/></a></td>
<td class=thumbs ><a href='viewgallery.php?cid=1&pid=244'><center/><img
src='photos/tb_244.jpg' border='0' alt='' class='img'/></a></td>
</tr>
<tr class=thumbs>
<td class=thumbs ><a href='viewgallery.php?cid=1&pid=245'><center/><img
src='photos/tb_245.jpg' border='0' alt='' class='img'/></a></td>
<td class=thumbs ><a href='viewgallery.php?cid=1&pid=246'><center/><img
src='photos/tb_246.jpg' border='0' alt='' class='img'/></a></td>
</table>
</body>
And CSS is
<style type="text/css">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}
a, input {
outline-color: invert;
outline-style: none;
outline-width: medium;
}
body
{
background-repeat: no-repeat;
background-color:#000000;
}
a {
text-decoration: none;
color: #ff0000;
}
a:visited {
color: #ff0000;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #ffffff;
}
a:active {
text-decoration: none;
color: #ff0000;
}
p {
font-size: 20px;
margin-top: 10px;
}
p.caption {
font-size: 20px;
color: #ff0000;
margin-top: 10px;
}
.navlinks{
font-size: 20px;
color: #ff0000;
padding-left: 5px;
}
.prevnext{
font-size: 20px;
line-height: 25px;
padding-left: 595px;
}
p.excerpt{
font-size: 18px;
color: #ffffff;
width: 750px;
border-top-style: solid;
border-top-color: #2C2C2C;
background-color:#0F0F0F;
border-top-width: 1px;
margin-top: 1px;
}
.categoryview{
margin-top: 95px;
margin-left: 35px;
width: 680px;
}
.thumbs{
width: 240px;
height: 200px;
}
</style>