Skip navigation
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!

  • Currently Being Moderated
    Jan 16, 2012 6:28 PM   in reply to rattlesue

    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>


    and the CSS:


    img_right {

    float: right;

    padding: 5px 5px 0px 5px;

    margin:0 10px 5px 10px;

    background-color: #14476b;


    .img_captions {


    color: #ffffff;

    font-size: .85em;

    margin: 0px;

    padding: 4px;


    Here it is on line:

    scroll down and view the photo.

    Of course you will need to adjust CSS as needed.

    Best wishes,


    Mark as:
  • Currently Being Moderated
    Jan 17, 2012 9:41 AM   in reply to rattlesue

    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: 0-best-jquery-photo-plugins-sliders-slideshow-galleries-and-scrollers. html


    Mark as:
  • Currently Being Moderated
    Jan 17, 2012 9:42 AM   in reply to rattlesue

    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.




    /**this styles image container**/

    #thumbs p {


    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;




    /**recommend using same size images**/

    #thumbs img {

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

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

    margin-bottom: 1.5em;




    <div id="thumbs">


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

    Caption 1



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

    Caption 2



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

    Caption 3





    For a live demo


    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists

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

    Nancy O. wrote:


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


    It's a DW question.

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


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

    Mark as:

More Like This

  • Retrieving data ...

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