Forum Moderators: open
I'm building a couple of pages for an online shop, one page I can't get quite right is a category index.
It consists of 5 categories, each is displayed horizontally in a row, in a table. Cell spacing is set to 10, so there's a gap between each, and there's a border round each. Each cell contains a thumbnail and caption.
The problem is, the thumbnails are or varying heights, which I can solve by wrapping them in a fixed height div. The only thing I can't do is get the images bottom aligned.
The only way I can think of, and that I have done for now, is splitting the table into a top and bottom row, the top row containing the images with a bottom alignment. But then the cell spacing gets in the way and I need a dummy cell to act as a spacer.
It works but is untidy, I can't help thinking there's an easier and more dignified way.
The only thing I can't do is get the images bottom aligned.
img.thumbnail {
vertical-align:bottom;
} May be I'm missing something? Is the problem related to your caption sometimes wrapping onto more than 1 line perhaps?
Trace sorry, to clarify the images are all varying height, so unless I went through them and set each one individually the reaults would be unpredctable.
When I tried the DIV wrapper, I set the div to 80px height, as that is the height of the tallest image. I did try then setting the image to vertical align bottom but the images remained at the top.
.vab{
vertical-align:bottom;
}or
.vabl{
vertical-align:baseline;
}
If you have a table with cellspacing = 10 you get the exact same result with img{margin:5px} No matter the size of the image, the margin will always be the same.
<style type="text/css">
img{
margin:10px;
}
.cellbottom{
text-align:center;
vertical-align:bottom;
}
</style><table cellspacing="0">
<tr>
<td class="cellbottom"><img src="sadf" height="15"><br>something</td>
<td class="cellbottom"><img src="sadf" height="55"><br>something</td>
<td class="cellbottom"><img src="sadf" height="35"><br>something</td>
<td class="cellbottom"><img src="sadf" height="75"><br>something</td>
<td class="cellbottom"><img src="sadf" height="15"><br>something</td>
</tr>
</table>
What am I missing?
The only way I can think of (...) is splitting the table into a top and bottom row, the top row containing the images with a bottom alignment. But then the cell spacing gets in the way and I need a dummy cell to act as a spacer.
You've done the right thing with splitting the table into two rows, however I don't understand what the problem is with the cellspacing. Is it that you want the text closer to the graphics, avoiding the bottom cellspacing?
From your description and adapting Traces example above, I would do something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title></title>
<style type="text/css">
.thumbs th {
border:1px solid gray;
text-align:center;
vertical-align:bottom;
padding:10px;
}
.thumbs td {
vertical-align:top;
}
</style>
<table cellspacing="10" class="thumbs">
<tr>
<th id="img1"><img src="green.jpg" width="50" height="15" alt=""></th>
<th id="img2"><img src="green.jpg" width="50" height="55" alt=""></th>
<th id="img3"><img src="green.jpg" width="50" height="35" alt=""></th>
<th id="img4"><img src="green.jpg" width="50" height="75" alt=""></th>
<th id="img5"><img src="green.jpg" width="50" height="15" alt=""></th>
</tr>
<tr>
<td headers="img1">something</td>
<td headers="img2">something<br>more<br>more</td>
<td headers="img3">something</td>
<td headers="img4">something<br>more</td>
<td headers="img5">something</td>
</tr>
</table>Note: don't forget to associate the labels with the images for accessibility reasons, see the guide Accessible Tables [webmasterworld.com] for more information.
<added> Example corrected as mentioned by penders in the next post, thank you for spotting my deliberate mistake ;) </added>
[edited by: encyclo at 11:11 am (utc) on Jan. 4, 2008]
<th><img src="green.jpg" width="50" height="15" alt="" id="img1"></th>
:
<td headers="img1">something</td>
:
Note: don't forget to associate the labels with the images for accessibility reasons, see the guide Accessible Tables for more information.
Just a minor point... I thought the headers attribute refers to a list of cells as opposed to elements within those cells?
To quote DrDoc:
This [headers] attribute specifies the list of header cells that provide header information for the current data cell. and is therefore typically applied to TD elements. ... The value of this attribute is a space-separated list of cell IDs. Each ID refers to a corresponding TH which serves as a header for the cell in question.
Below is what I've used:
HTML:
<div class="image">
<dl>
<dt style="background-image: url(thumbnail.jpg);"><a href="product-thumbnail.html"><img src="/images/transparent.gif" width="150" height="150" alt="Caption"></a></dt>
<dd>Caption</dd>
</dl>
</div>
CSS:
.image {
border: 2px solid #000000;
float: left;
margin: 8px;
}
.image DL {
width: 150px;
margin: 0;
}
.image DT {
height: 150px;
border-bottom: 2px solid #000;
background: #bad4e0 no-repeat center bottom;
// I used center iso bottom to have the thumbnail centered
}
.image DT IMG {
border: 0;
width: 150px;
height: 150px;
}
.image DD {
font-family: Arial, Helvetica, Sans-Serif;
height: 40px;
margin: 0;
padding: 2px;
font-size: 13px;
text-align: center;
color: #000;
}
(Dis)advantage is that when people try to save the image using rightclick, they will save the transparent gif and not the image.
When you add the cellpadding the border is split into 2 boxes, one around the image(s) and one around the caption(s). So I removed the cellpadding and added a dummy cell for spacing. The border on the top cell is then set on the left, top and right, and the bottom cell is set to left, bottom, right.
adb64 thanks for the suggestion, but apart from not being SEO friendly, doesn't this method require separate CSS for every thumbnail?
When you add the cellpadding the border is split into 2 boxes, one around the image(s) and one around the caption(s).
Perhaps... rather than rely on cellpadding, which sets the padding on every cell, set cellpadding="0" and instead set padding in the CSS for the two different cell types:
td.thumbnail {
padding:10px;
}
td.description {
padding:0 10px;
} adb64: I rather like your idea for centering the thumbnail, but how do you manage image borders? Presumably any border would need to be made part of the image? Or (just thought) may be have a fixed border on your transparent gif?
table{
border-collapse:collapse;
}
Perhaps... rather than rely on cellpadding
Sorry, I meant to say cellspacing!
And yes pageoneresults I do have border's collapsing.
There is no need for a separate stylesheet per image, the only difference per image in the background-image style definition in the DT tag. All common styles are in the CSS file.
With regards to being SEO friendly or not. I use this method only in a thumbnail gallery. When clicked on the thumbnail the larger image shows which is displayed normally using an IMG tag.
@Penders:
Indeed it is not possible to add a border around the thumbnail image itself. Unless you include it in the image itself or in the transparent GIF. In the latter case this would mean that all images have to be the same size.
