Captions under photos?

[Barnum]

Putting photos together in table, but having difficult getting captions underneath. Any suggestins...?

Looks like this (I have prior codes, html, head, body etc. okay)

<table align="center">
<tr>
<td><img src="images/IMG_2776smaller.jpg" width="340" height="225" border="4px" color="white"></td>
<td><img src="images/IMG_2442smaller.jpg" width="340" height="225" border="4px" color="white"></td>
<td><img src="images/IMG_2393smaller.jpg" width="340" height="225" border="4px" color="white"></td>
</tr>
</table>

[Nick]

<table align="center">
      <tr>
 <td><img src="images/IMG_2776smaller.jpg" width="340" height="225" border="4px" color="white"></td>
<td><img src="images/IMG_2442smaller.jpg" width="340" height="225" border="4px" color="white"></td>
<td><img src="images/IMG_2393smaller.jpg" width="340" height="225" border="4px" color="white"></td>
      </tr>
<tr>
<td>Caption for image 1</td>
<td>Caption for image 2</td>
<td>Caption for image 3</td>
</tr>
</table>

Try that out

[Dark Tranquility]

Pay attention... are these photos related in some way that enables you to put them in table rows or columns?
I mean the photos in a same row or column have something in common to consider them as a tabular data?
If not... don't use a table to hold them...

[Barnum]

The first suggestion didn't work, but appreciate the quick response. I decided to put them into tables because there will be vertical and horizontal photos, and tables tend to keep things in perspective (balanced).....??

I can type captions after each row, but the are not centered under photo.... Seems like an easy thing to do, but I am just having difficult with it.

[Barnum]

Okay, took away the table code...now what?

I have this:

<img src="images/IMG_2776smaller.jpg" width="340" height="225" border="4px" color="white">
<img src="images/IMG_2442smaller.jpg" width="340" height="225" border="4px" color="white">
<img src="images/IMG_2393smaller.jpg" width="340" height="225" border="4px" color="white">

<img src="images/shootingsmaller.jpg" width="340" height="225" border="4px" color="white">
<img src="images/with-camerasmaller.jpg" width="340" height="225" border="4px" color="white">
<img src="images/faysanfran.jpg" width="340" height="225" border="4px" color="white">

What I want are captions under photos/centered.

[Nick]

Do you want the photos side by side or vertical?

[Barnum]

The photo will be three cross and rows of three. I need a centered caption under each?

[Erik J]

You can use a list, like this:

#gallery{
	margin:0;
	padding:0;
	width:1074px;
}
#gallery li{
	float:left;
	margin:10px 5px;
	text-align:center;
}
#gallery img{
	display:block;
	margin:0 0 5px;
	border:4px ridge #fff;
}

<ul id="gallery">
	<li><img src="images/IMG_2776smaller.jpg" width="340" height="225" alt="picturing the image">Image caption</li>
	<li><img src="images/IMG_2442smaller.jpg" width="340" height="225" alt="picturing the image">Image caption</li>
	<li><img src="images/IMG_2393smaller.jpg" width="340" height="225" alt="picturing the image">Image caption</li>
	<li><img src="images/shootingsmaller.jpg" width="340" height="225" alt="picturing the image">Image caption</li>
	<li><img src="images/with-camerasmaller.jpg" width="340" height="225" alt="picturing the image">Image caption</li>
	<li><img src="images/faysanfran.jpg" width="340" height="225" alt="picturing the image">Image caption</li>
</ul>

[D9r]

cool! I learned something. thanks.

[Barnum]

Erik,

Thank you very much. Your solution did the trick, and of course after looking at it for a while I begin to understand it all. I am in my late sixties, and afraid dementia is creeping in. Thanks again to all of you. This forum has been a godsend in my learning experience. Hopefully someday I can help someone although right now that seems a long way down the road....

[Erik J]

... I am in my late sixties, ...

Age is of no importance in this game.

[needy]

Hi - its my first time posting here. I have a similar design and have managed to get my titles centred underneath but had to use </br> to get the titles to move underneath for IE.

The strange thing is that now the images (3 across) show up with an increasing padding on the top for each image. (in IE) They step down as you go along.
I am not allowed to post a link so please go to jacquescharoux dot com dot au and use the 2000 link for an example of this step down. Other links show the page without </br>

I am quite perplexed. The home page works OK in IE? I am using mac and have to keep getting screen shots which is slowing down the solution to this problem.
Thank is advance. Needy

#container {
  background-color: #ffffff; 
}
#header { 
  background: none;
}
#mainContent h2 {
text-align: right;
 }
/*resume sytles*/
p.header {
  font-size: 105%;
  font-weight: bold;
  line-height: 1.2em; 
}
span.date {
  font-weight: bold; 
}
span.pub {
  font-style: italic;
  font-weight: bold; 
}
p.link a {
  color: #66635b;
  padding-left: 2em; 
}
p.link a:hover {  text-decoration: underline;
}
ul.icons {
  list-style-type: none;
  padding: 0em;
  margin: 0em;
  text-align: center;
  margin-top: 1.5em;
}
ul.icons li a {
  list-style-type: none;
  float: left;
  display: block;
  width: 112px; 
  text-align: center;
  padding: 16px 27px 16px 27px;
 }
ul.icons li span.title { 
  color: #66635b;
 }
ul.icons li a img {
  border: 1px #66635b solid;
 }
#mainContent p.quote {
  clear: left; 
}
.title {
  font-size: 70%;
}

#container {
  background-color: #ffffff; 
}
#header { 
  background: none;
}
#mainContent h2 {
text-align: right;
 }
/*resume sytles*/
p.header {
  font-size: 105%;
  font-weight: bold;
  line-height: 1.2em; 
}
span.date {
  font-weight: bold; 
}
span.pub {
  font-style: italic;
  font-weight: bold; 
}
p.link a {
  color: #66635b;
  padding-left: 2em; 
}
p.link a:hover {  text-decoration: underline;
}
ul.icons {
  list-style-type: none;
  padding: 0em;
  margin: 0em;
  text-align: center;
  margin-top: 1.5em;
}
ul.icons li a {
  list-style-type: none;
  float: left;
  display: block;
  width: 112px; 
  text-align: center;
  padding: 16px 27px 16px 27px;
 }
ul.icons li span.title { 
  color: #66635b;
 }
ul.icons li a img {
  border: 1px #66635b solid;
 }
#mainContent p.quote {
  clear: left; 
}
.title {
  font-size: 70%;
}

[Erik J]

Hi needy, welcome to SitePoint.

...
The strange thing is that now the images (3 across) show up with an increasing padding on the top for each image. (in IE) They step down as you go along. ...

In IE6 I assume.

In the 2000 page I think you need to kill the white-space in the list-items, best done by floating them:

ul.icons li {
  list-style-type: none;
  float: left;
 }

In IE6 also the menu could need the same:

 ul.menu li {
  float: left;
 }

Before you have 10 posts write the links like: jacquescharoux.com.au


.

[needy]

thanks for that - I dropped that li and float somewhere in my angst ridden searching to solve another problem. Very logical.
cheers
PS - That method of posting a link before having 10 posts does not work unfortunately - I just tried it again now.