www.webdeveloper.com
Results 1 to 12 of 12

Thread: How do I add text under a picture?

  1. #1
    Join Date
    May 2006
    Posts
    4

    How do I add text under a picture?

    I have 6 pictures that I want to add text under. There are 3 pics on top and 3 pics on the bottom. What is the html code for this? Below is an example of how I want the pics and text to look. Also, if I wanted to add text ABOVE the picture, how would I do that? There is also an example of how this would look. I am new at html so any extra help would be appreciated. Thanks!

    Example 1:

    |pic| |pic| |pic|
    -txt---txt--txt-

    |pic| |pic| |pic|
    -txt---txt--txt-

    Example 2:

    -txt---txt--txt-
    |pic| |pic| |pic|

    |pic| |pic| |pic|
    -txt---txt--txt-

  2. #2
    Join Date
    May 2006
    Location
    Mountains of NC
    Posts
    2

    Text on Images

    http://www.cyber-junkie.com/tools/wordsonpics/

    If that doesn't work for you let me know..or you might try this.
    There is a great freeware program for this if you want to download it and give it a try. It took me a few minutes to figure it out but you can put text on any image anywhere you want and lots more. Great program. Photo Filter and I have linked you to snap files where you can read the reviews and so how good it.

    http://www.snapfiles.com/get/photofiltre.html


    If you still have problem send the images to me and I'll do it for you, I am one of those freeware nuts and if I can help I will.

    Visit FREE PIMS

  3. #3
    Join Date
    May 2006
    Posts
    4
    I don't really want text ON the picture, but right BELOW or ABOVE the picture. Sorry for any confusion. Is it possible to do that?

  4. #4
    Join Date
    May 2006
    Posts
    8

    use tables

    Embed each pic in a table with two rows and one column like this:

    <table border="0">
    <center>
    <tr>
    <td><img src="image.jpg"></td>
    </tr>
    <tr>
    <td>caption</td>
    </tr>
    </center>
    </table>

    If you add more columns you should see images side by side with captions under each. The only disadvantage to this method is that rows of images wider than the screen resolution will not wrap to new lines but will pan off the right side of the screen and require scrolling. Below is a code with 3 images and captions:


    <table border="0">
    <center>
    <tr>
    <td><img src="image1.jpg"></td>
    <td><img src="image2.jpg"></td>
    <td><img src="image3.jpg"></td>
    </tr>

    <tr>
    <td>caption1</td>
    <td>caption2</td>
    <td>caption3</td>
    </tr>
    </center>
    </table>

  5. #5
    Join Date
    Apr 2003
    Location
    Rosemount, MN
    Posts
    2,287
    Do you know any css?

    I wouldn't reccomend tables to do this, so if you know CSS, there is a way that will make this alot easier, and it looks like this:

    The CSS
    Code:
    <style type="text/css">
    .image{
    	float:left;
    	margin-top:250px;
    	padding:12px;
    	width:200px;
    }
    .text{
    	float:left;
    	margin-top:250px;
    	padding:12px;
    	margin-bottom:50px;
    	width:35%;
    	font-weight:bold;
    	font-size:13px;
    }
    </style>


    The HTML
    HTML Code:
    <div class="image">
    <img alt="img 1" src="image1.jpg">
    </div>
    <div class="text">
    text for image 1
    </div>
    
    <div class="image">
    <img alt="img 2" src="image2.jpg">
    </div>
    <div class="text">
    text for image 2
    </div>
    
    <div class="image">
    <img alt="img 3" src="image3.jpg">
    </div>
    
    <div class="text">
    text for image 3
    </div>
    My settings

    Browser :: FireFox 1.5
    Resolution :: 1152x864
    Connection :: Cable Modem 2Mbs

  6. #6
    Join Date
    May 2006
    Location
    Mountains of NC
    Posts
    2

    The Only Way I Use

    If you are like me and don't know html that well a program like Photo Filter comes in handy in situations like this. I wish I knew all the coding but I don't. I came along a little late in the www. '

    Photo Filter. Try it you'll love it.

    This is what you are trying to do, I think.
    Black Jack

    Sorry I couldn't help but looks like these guys have you on the right track.
    FREE PIMS
    Over 180 Now
    Tons of more Freeware

  7. #7
    Join Date
    May 2006
    Posts
    4
    The Little Guy - I don't know anything about CSS or HTML. I used the HTML Code you gave me but I had the height and width of the pictures set and when I use the code you gave me it changes the pictures back to their original size. Below is what my HTML Code looks like for the first three pictures:

    <img src="http://us.movies1.yimg.com/movies.yahoo.com/images/hv/photo/contrib_pix/o/p/hds/oprah_winfrey.jpg" height="120px" width="110px">

    <img src="http://us.movies1.yimg.com/movies.yahoo.com/images/he/photo/movie_pix/venice/venice_film_festival_2003_photos/kate_hudson/venice6.jpg" height="120px" width="100px">

    <img src="http://us.ent1.yimg.com/images.launch.yahoo.com/000/003/498/3498288.jpg" height="120px" width="120px">

  8. #8
    Join Date
    Jun 2004
    Location
    England
    Posts
    2,972
    The little guy's example isn't bad, but I'd recomend this one for ease of use.

  9. #9
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    Even easier example:
    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    
    <style>
    .imgText { 
      float: left;
      margin:5px;
    }
    </style>
    
    </head>
    
    <body>
    
    <img src="test1.gif"><div class="imgText">Hi Bob1</div>
    <img src="test2.gif"><div class="imgText">Hi Bob2</div>
    
    </body>
    </html>

  10. #10
    Join Date
    May 2006
    Posts
    4
    Slaughters - I think your HTML is the closest to what I'm looking for. But is there anyway to add the height and width of the pictures into that HTML? Then I think it would work perfectly.

  11. #11
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    I've not tried it, but I think that just adding the height= and width= attributes to the img tag should work.

  12. #12
    Join Date
    May 2005
    Posts
    1

    Kinda the same thing

    I am looking to do pretty much the same thing. But how do you include text under a photo if the photo is in the middle of a newsletter article?

    Thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles