Help with tables and CSS

**rajeevthomas** · 09-13-2010, 09:44 AM

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…

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>

My CSS is

Code:

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

**auntnini** · 09-13-2010, 09:20 PM

Code:

a, input {
outline-color: invert; outline-style: none; outline-width: medium; }

Did you mean "border?

The position: absolute; takes content out of regular HTML flow and lets you stack the z-index higher/lower than other z-indexes.

You can add margin and padding attributes to your .thumbs class and/or divs if that might help.

I used CSS layouts (no tables) at http://www.jacquimorgan.com/hist/index.html and http://www.josephdenaro.com/color/index.html and a table layout at http://www.chanit.com/people/oil.htm .

Thread: Help with tables and CSS

Thread Tools

Search Thread

Help with tables and CSS

Bookmarks

Bookmarks

Posting Permissions