Skip navigation
rattlesue
rattlesue
Currently Being Moderated

how do i add a caption under and aligned right, to photos that scroll left and right?

Jan 16, 2012 2:04 PM

here's the link...i hope i'm doing this correctly.  just learning this program, and my first time asking a ? here.  i've spent 2 days trying to add captions under each photo...i'm sure it's simple, to someone anyway!  here's the link.  thanks anyone for help!

 

https://acrobat.com/#d=x0HMd-nCtJSrCu3x1ZRW7Q

5038 Views   7 Replies   Latest reply: John Waller, Jan 17, 2012 10:49 AM
 
Replies
  • adninjastrator
    Currently Being Moderated
    1. adninjastrator,
    Jan 16, 2012 6:28 PM   in reply to rattlesue
    Report

    Easy as pie! Put your image in a separate <div> and then add the image plus the caption text.... </div> such as:

    <div class="img_right">

       <img src="images/400/bts_SequimBay1.jpg" alt="Sequim Bay State Park" title="Sequim Bay State Park" width="400" height="225" />

       <p class="img_captions"><strong>Sequim Bay State Park</strong></p>

       </div>

    and the CSS:

    .

    img_right {

    float: right;

    padding: 5px 5px 0px 5px;

    margin:0 10px 5px 10px;

    background-color: #14476b;

    }

    .img_captions {

    text-align:center;

    color: #ffffff;

    font-size: .85em;

    margin: 0px;

    padding: 4px;

    }

    Here it is on line:

    http://www.olympicdiscoverytrail.com/trail_maps/blyn_sequim.html

    scroll down and view the photo.

    Of course you will need to adjust CSS as needed.

    Best wishes,

    Adninjastrator

     
    |
    Mark as:
  • rattlesue
    Currently Being Moderated
    2. rattlesue,
    Jan 17, 2012 9:21 AM   in reply to adninjastrator
    Report

    THANK YOU!  but, here's my problem...this site is mainly for photos and artwork.  I want the images to scroll left to right in a straight line, with a caption under each photo.  Your solution works for the first image great.  when i try to put the next image in, because of the oil on canvas, 1 LINCOLN PLAZA LOBBY



    !../IMAGES/WEB/SGS projects/02-callums-room-2.jpg|height=500|alt=appliques on plaster, private residence|width=693|class=photos2|src=../IMAGES/WEB/SGS projects/02-callums-room-2.jpg!


     

    again, thanks for the help!!

     
    |
    Mark as:
  • rattlesue
    Currently Being Moderated
    3. rattlesue,
    Jan 17, 2012 9:31 AM   in reply to adninjastrator
    Report

    hi again..

     

    also, when i try to repeat, the text goes under the original text instead of photo...with this code...

     

       


    !../IMAGES/WEB/SGS projects/01-lincoln-plaza-lobby-A3.jpg|height=500|alt=1 lincoln plaza lobby, oil on canvas|width=366|class=photos|src=../IMAGES/WEB/SGS projects/01-lincoln-plaza-lobby-A3.jpg!

     

     

     

    oil on canvas, 1 LINCOLN PLAZA LOBBY



    !../IMAGES/WEB/SGS projects/02-callums-room-2.jpg|height=500|alt=appliques on plaster, private residence|width=693|class=photos2|src=../IMAGES/WEB/SGS projects/02-callums-room-2.jpg!

    *appliques on plaster, PRIVATE RESIDENCE, NYC
    *



     

    confused!

     
    |
    Mark as:
  • rattlesue
    Currently Being Moderated
    4. rattlesue,
    Jan 17, 2012 9:41 AM   in reply to adninjastrator
    Report

    here's the link on acrobat.com, i hope...

     

    https://acrobat.com/#d=kIsovuYqV3aEXmdupClXCg

     
    |
    Mark as:
  • adninjastrator
    Currently Being Moderated
    5. adninjastrator,
    Jan 17, 2012 9:41 AM   in reply to rattlesue
    Report

    The idea is to treat each <div> which contains the image and the caption as your image "element" if you want to call it that.

    So in whatever your slide show mechanics is, you add a number of these image element, in your slideshow container and float those image element up against each other.... so they line up horizontally.

    Do you have a slideshow? or are you starting from scratch and have no mechanics to do the scroll?

    If you have no slideshow and are not sure how to create on, then I'd suggest you use a ready made one... tons of them on line, like this one:

    http://javabyexample.wisdomplug.com/web-programming/47-javascript/85-3 0-best-jquery-photo-plugins-sliders-slideshow-galleries-and-scrollers. html

    Adninjastrator

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    6. Nancy O.,
    Jan 17, 2012 9:42 AM   in reply to rattlesue
    Report

    Are you trying to do this in Dreamweaver or Acrobat?  If Acrobat, check with Acrobat Forums.

    If Dreamweaver, use CSS to style your image container (paragraph) and captions.

     

    CSS:

     

    /**this styles image container**/

    #thumbs p {

    float:left;

    width: 180px;

    height: 12.5em;

    margin: 10px;

    padding: 10px;

    border: 1px solid silver;

    /**this styles caption text**/

    font: italic 14px/1.5 Geneva, Arial, Helvetica, sans-serif;

    color: #666;

    text-align:right;

    }

     

    /**recommend using same size images**/

    #thumbs img {

    width:  160px; /**adjust width to photo**/

    height: 120px; /**adjust height to photo**/

    margin-bottom: 1.5em;

     

    HTML:

     

    <div id="thumbs">

     

    <p><img src="image1.jpg" alt="description" /> <br />

    Caption 1

    </p>

     

    <p><img src="image2.jpg" alt="description" /> <br />

    Caption 2

    </p>

     

    <p><img src="image3.jpg" alt="description" /> <br />

    Caption 3

    </p>

     

    </div>

     

    For a live demo

    http://alt-web.com/TEMPLATES/CSS-Semi-liq-photo-sheet.shtml

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • John Waller
    Currently Being Moderated
    7. John Waller,
    Jan 17, 2012 10:49 AM   in reply to Nancy O.
    Report

    Nancy O. wrote:

     

    Are you trying to do this in Dreamweaver or Acrobat?  If Acrobat, check with Acrobat Forums.

     

    It's a DW question.

     

    Acrobat.com is merely being used, per the guidance given by Adobe in the Forum FAQ, to upload file attachments for us to download.

    http://forums.adobe.com/message/3994281

     

    I always prefer to view a link to a live page on the web and leave Acrobat.com out of it.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Incoming Links

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points