SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Captions under photos?

    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>

  2. #2
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <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
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  3. #3
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,458
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    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...

  4. #4
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you want the photos side by side or vertical?
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  7. #7
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The photo will be three cross and rows of three. I need a centered caption under each?

  8. #8
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use a list, like this:
    Code CSS:
    #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;
    }
    Code HTML4Strict:
    <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>
    Happy ADD/ADHD with Asperger's

  9. #9
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    sittin here on the Group W bench
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool! I learned something. thanks.

  10. #10
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    413
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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....

  11. #11
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Barnum
    ... I am in my late sixties, ...
    Age is of no importance in this game.
    Happy ADD/ADHD with Asperger's

  12. #12
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Code:
    #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%;
    }
    Code:
    #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%;
    }

  13. #13
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi needy, welcome to SitePoint.

    Quote Originally Posted by needy
    ...
    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:
    Code:
    ul.icons li {
      list-style-type: none;
      float: left;
     }
    In IE6 also the menu could need the same:
    Code:
     ul.menu li {
      float: left;
     }
    Before you have 10 posts write the links like: jacquescharoux.com.au


    .
    Happy ADD/ADHD with Asperger's

  14. #14
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •