text caption under thumbnails 1

[0211]

Hi everyone:
I have a simple table in HTML with thumbnails. Here is part of the code (of course I have JS code in the Head section). How do I put the name of each picture under/above it? Should it be another <td> or should I use CSS? If CSS, could someone help me out with it? I'll appreciate it very much. Thanks

<table align=center border=0 cellPadding=4 cellSpacing=0 width=&quot;55%&quot;>
<TBODY>
<TR>
<TD align=middle><a href=&quot;images/large/60076.jpg&quot; onClick=&quot;displayimage(this.href,'');return false;&quot;>
<img src=&quot;images/thumbs/60076.jpg&quot; width=&quot;106&quot; height=&quot;106&quot; alt=&quot;Presidential Savings&quot;></a></td>
<TD align=middle><a href=&quot;images/large/52648.jpg&quot; onClick=&quot;displayimage(this.href,'');return false;&quot;>
<img src=&quot;images/thumbs/52648.jpg&quot; width=&quot;106&quot; height=&quot;106&quot; alt=&quot;Scratch Off&quot;></a></td>
<TD align=middle width=&quot;50%&quot;><a href=&quot;images/large/62232.jpg&quot; onClick=&quot;displayimage(this.href,'');return false;&quot;>
<img src=&quot;images/thumbs/62232.jpg&quot; width=&quot;106&quot; height=&quot;106&quot; alt=&quot;Authorized Super Sale&quot;></a></td></tr>

 

[chappi]

Hi,

You need to put another Table row underneath the images. So something like this:


<table align=&quot;center&quot; border=&quot;0&quot; cellpadding=&quot;4&quot; cellspacing=&quot;0&quot; width=&quot;55%&quot;>
<tr>
<td><img src=&quot;image1&quot;></td>
<td><img src=&quot;image1&quot;></td>
<td><img src=&quot;image1&quot;></td>
</tr>
<tr>
<td>image1</td>
<td>image1</td>
<td>image1</td>
</tr>
</table>


I hope this makes some sense. Let me know if you need more information. I just simplified the above table.

J~

 

[philote]

Good info on doing this with css and no tables:

http://www.alistapart.com/articles/practicalcss/

Kevin
A+, Network+, MCP

 

[0211]

Thank you both for the info. Philote, I did check the site out and had some good info on CSS, however, I am not familiar with CSS that much. If you are, could you guide me through this? I have 12 thumbnails and I want them in 3 columns and 4 rows. I used the code in the site and it was for 3 images. How do I make the container larger do all 12 would fit and have spaces between them. They are kind of close to each other.
There is no attachment here so you could see my code. I could email it to you if you willing to take a look...
I'll appreciate any help I can get.
Thanks

 

[chappi]

Try this in the body:


<div class=&quot;float&quot;>
<img src=&quot;image1.gif&quot; width=&quot;100&quot; height=&quot;100&quot;
alt=&quot;image 1&quot; /><br />
<p>caption 1</p>
</div>

<div class=&quot;float&quot;>
<img src=&quot;image2.gif&quot; width=&quot;100&quot; height=&quot;100&quot;
alt=&quot;image 2&quot; /><br />
<p>caption 2</p>
</div>

<div class=&quot;float&quot;>
<img src=&quot;image3.gif&quot; width=&quot;100&quot; height=&quot;100&quot;
alt=&quot;image 3&quot; /><br />
<p>caption 3</p>
</div>

<div class=&quot;float&quot;>
<img src=&quot;image4.gif&quot; width=&quot;100&quot; height=&quot;100&quot;
alt=&quot;image 4&quot; /><br />
<p>caption 4</p>
</div>

<p class=&quot;break&quot;><br></p>

<div class=&quot;float&quot;>
<img src=&quot;image5.gif&quot; width=&quot;100&quot; height=&quot;100&quot;
alt=&quot;image 5&quot; /><br />
<p>caption 5</p>
</div>

<div class=&quot;float&quot;>
<img src=&quot;image6.gif&quot; width=&quot;100&quot; height=&quot;100&quot;
alt=&quot;image 6&quot; /><br />
<p>caption 6</p>
</div>

<div class=&quot;float&quot;>
<img src=&quot;image7.gif&quot; width=&quot;100&quot; height=&quot;100&quot;
alt=&quot;image 7&quot; /><br />
<p>caption 7</p>
</div>

<div class=&quot;float&quot;>
<img src=&quot;image8.gif&quot; width=&quot;100&quot; height=&quot;100&quot;
alt=&quot;image 8&quot; /><br />
<p>caption 8</p>
</div>

<p class=&quot;break&quot;><br></p>

<div class=&quot;float&quot;>
<img src=&quot;image9.gif&quot; width=&quot;100&quot; height=&quot;100&quot;
alt=&quot;image 9&quot; /><br />
<p>caption 9</p>
</div>

<div class=&quot;float&quot;>
<img src=&quot;image10.gif&quot; width=&quot;100&quot; height=&quot;100&quot;
alt=&quot;image 10&quot; /><br />
<p>caption 10</p>
</div>

<div class=&quot;float&quot;>
<img src=&quot;image11.gif&quot; width=&quot;100&quot; height=&quot;100&quot;
alt=&quot;image 11&quot; /><br />
<p>caption 11</p>
</div>

<div class=&quot;float&quot;>
<img src=&quot;image12.gif&quot; width=&quot;100&quot; height=&quot;100&quot;
alt=&quot;image 12&quot; /><br />
<p>caption 12</p>
</div>



...and this in the stylesheet:



div.float {
float: left;
width: 120px;
}

div.float p {
text-align: center;
}

p.break
{
display: block;
height:150px;
}



...and then just re-use the code if you have more images...

J~

 

[0211]

Chappy:
This is wonderful. It is exactly what I wanted. One question: How do I center the whole thing on the page? It is on the left side right now?
Thanks so much...

 

[chappi]

Just put center tags around the whole thing:

<center>...body stuff...</center>

J~

 

[0211]

Hey Chappi:
I have this code <BODY vLink=#000000 alink=#003300 bgColor=#ffffff> and then some more plain html codes (for other items in the page) and then the thumbnails starts. So, I put <STYLE type=text/css> and the code you gave me right after it. Now, where do I put the <center></center> tag? I tried putting it right before the <body vlink.....>tag, but nothing happened. I know this is simple but I don't know where it goes? Please help. THanks

 

[chappi]

Put it around your thumbnails. So place the opening <center> tag before the first <div> tag and place the closing </center> tag after the last </div> tag. This will center all your thumbnails.

 

[0211]

I did and it is not working... Is there anyway, you could please take a look at the whole coding and see what it is that is wrong? I could email it to you...
Thanks

 

[chappi]

Email it to jeannette@cbs-inc.net. I'll take a look

J~

 

[MichiganRon]

One note about an earlier post by chappi: The

<center>

tag has been depricated (

http://www.w3.org/TR/REC-html40/conform.html#deprecated)

and may not be supported by all current or future browsers.

In lieu of that tag, I'd suggest using a different method. If you are using div tags with CSS, place

style="margin: auto;"

in your main div. All standards-compliant browsers will center it on the page.

Some browsers, like IE5.x for Windows ignore this, but will (incorrectly) center DIVs that have a text-align of center. To center DIVs in these browsers you can wrap a DIV with TEXT-ALIGN set to center, around another DIV that sets MARGIN to auto (and TEXT-ALIGN to left so text will align correctly).

So:

<div style=&quot;text-align: center;&quot;>
<div style=&quot;margin: 0px auto;&quot;>

<div class=&quot;float&quot;>
  <img src=&quot;image1.gif&quot; width=&quot;100&quot; height=&quot;100&quot;
  alt=&quot;image 1&quot; /><br />
  <p>caption 1</p>
</div>

<div class=&quot;float&quot;>
  <img src=&quot;image2.gif&quot; width=&quot;100&quot; height=&quot;100&quot;
  alt=&quot;image 2&quot; /><br />
  <p>caption 2</p>
</div>

<div class=&quot;float&quot;>
  <img src=&quot;image3.gif&quot; width=&quot;100&quot; height=&quot;100&quot;
  alt=&quot;image 3&quot; /><br />
  <p>caption 3</p>
</div>

<div class=&quot;float&quot;>
  <img src=&quot;image4.gif&quot; width=&quot;100&quot; height=&quot;100&quot;
  alt=&quot;image 4&quot; /><br />
  <p>caption 4</p>
</div>

<p class=&quot;break&quot;><br></p>

<div class=&quot;float&quot;>
  <img src=&quot;image5.gif&quot; width=&quot;100&quot; height=&quot;100&quot;
  alt=&quot;image 5&quot; /><br />
  <p>caption 5</p>
</div>

<div class=&quot;float&quot;>
  <img src=&quot;image6.gif&quot; width=&quot;100&quot; height=&quot;100&quot;
  alt=&quot;image 6&quot; /><br />
  <p>caption 6</p>
</div>

<div class=&quot;float&quot;>
  <img src=&quot;image7.gif&quot; width=&quot;100&quot; height=&quot;100&quot;
  alt=&quot;image 7&quot; /><br />
  <p>caption 7</p>
</div>

<div class=&quot;float&quot;>
  <img src=&quot;image8.gif&quot; width=&quot;100&quot; height=&quot;100&quot;
  alt=&quot;image 8&quot; /><br />
  <p>caption 8</p>
</div>

<p class=&quot;break&quot;><br></p>

<div class=&quot;float&quot;>
  <img src=&quot;image9.gif&quot; width=&quot;100&quot; height=&quot;100&quot;
  alt=&quot;image 9&quot; /><br />
  <p>caption 9</p>
</div>

<div class=&quot;float&quot;>
  <img src=&quot;image10.gif&quot; width=&quot;100&quot; height=&quot;100&quot;
  alt=&quot;image 10&quot; /><br />
  <p>caption 10</p>
</div>

<div class=&quot;float&quot;>
  <img src=&quot;image11.gif&quot; width=&quot;100&quot; height=&quot;100&quot;
  alt=&quot;image 11&quot; /><br />
  <p>caption 11</p>
</div>

<div class=&quot;float&quot;>
  <img src=&quot;image12.gif&quot; width=&quot;100&quot; height=&quot;100&quot;
  alt=&quot;image 12&quot; /><br />
  <p>caption 12</p>
</div>

</div>
</div>

Hope this helps,
-Ron

*Portions of this post were taken from

http://www.alistapart.com/articles/practicalcss/.

-We all play from the same deck of cards, it's how we play the hand we are dealt which makes us who we are.

 

[philote]

Darkshadeau, I don't think that'll work, at least it didn't in my tests. I believe this is because the size for the div is not set. I haven't found a way to center a variable width div. You'll have to specify the size of the div like so:

<div style=&quot;margin: 0px auto; width: 400px&quot;>

It would be four times the width of your thumbnails ( or the divs that contain the thumbs and caption if you set the size of those).
Setting the width of the div like I did also has another slight benefit. You don't have to add in the

<p class=&quot;break&quot;>

lines. This would then allow you to change how many thumbnails you want in a row by only changing the style sheet and not your html. For example, if your images were 100px wide and you wanted 4 on a row, your div would be 400px like I showed above. Suppose you later wanted to have 5 thumbs on a row. You'd simply change the width of the div to 500px.

A word of warning. If you put a border around the big div (the one that contains all the thumbnails), this will cause IE to put one less image on a line than you expected. The easiest way to fix this is to add to the size of the div the size of the left border plus the size of the right border.

Kevin
A+, Network+, MCP