Help with tables and CSS
Posted: 13 September 2010 10:35 AM   [ Ignore ]
Newbie
Rank
Total Posts:  1
Joined  2010-09-13

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">

htmlbodydivspanappletobjectiframeh1h2h3h4h5h6pblockquotepreaabbracronymaddressbigcitecodedeldfnemfontimginskbdqssampsmallstrikestrongsubsuptt, var, buicenterdldtddolullifieldsetformlabellegendtablecaptiontbodytfoottheadtrthtd {margin:0padding:0border:0outline:0font-size:100%; vertical-align:baselinebackground:transparent;} body {line-height1;}olul{list-style:none;} blockquoteq{quotes:none;} blockquote:beforeblockquote:afterq:beforeq:after{content:'';content:none;:focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapseborder-spacing:0;}

a
input {
outline
-colorinvert;
outline-stylenone;
outline-widthmedium;
}


body
{
    
background
-repeatno-repeat;
background-color:#000000;
}



a {
text
-decorationnone;
color#ff0000;
}

a
:visited {
color
#ff0000;
text-decorationnone;
}

a
:hover {
text
-decorationnone;
color#ffffff;
}

a
:active {
text
-decorationnone;
color#ff0000;
}

p {
font
-size20px;
margin-top10px;
}


p
.caption {
font
-size20px;
color#ff0000;
margin-top10px;
}

.navlinks{
font
-size20px;
color#ff0000;
padding-left5px;
}

.prevnext{
font
-size20px;
line-height25px;
padding-left595px;
}

p
.excerpt{ 
font
-size18px;
color#ffffff;
width750px;
border-top-stylesolid;
border-top-color#2C2C2C; 
background-color:#0F0F0F; 
border-top-width1px;
margin-top1px;
}

.categoryview{
margin
-top95px;
margin-left35px;
width680px;



}

.thumbs{
width
240px;
height200px;

}




</style
Profile