Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Apr 2005
    Posts
    315
    Thanks
    18
    Thanked 2 Times in 2 Posts

    Caption under image?

    I want to add a caption under an image on one of my pages. The page is coded entirely in CSS, no tables.

    I can't seem to find any information. Any suggestions.

    Thanks,

  • #2
    New Coder
    Join Date
    Sep 2007
    Posts
    24
    Thanks
    4
    Thanked 1 Time in 1 Post
    I'm not really sure if this will work, because I'm not sure what your code looks like, but you can create a div that is about 15px taller than the image. Then you can put the image in the div, and place the text in a separate div, or p tag under the image.

  • #3
    Regular Coder
    Join Date
    Apr 2005
    Posts
    315
    Thanks
    18
    Thanked 2 Times in 2 Posts
    Thanks dDare, I think I'll just go ahead and make the caption part of the image.

  • #4
    Regular Coder
    Join Date
    Jul 2007
    Posts
    571
    Thanks
    25
    Thanked 28 Times in 28 Posts
    Hey, I would not suggest adding your caption to the image. The reason are numerous... just a few are: 1-the search engines wont be able to read it, 2-you can not add links to it, 3- you can not style it with css.

    here is a tutorial on adding caption & position images: Adding Captions

  • #5
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Last edited by effpeetee; 10-30-2007 at 06:50 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Here's the css[


    CODE]* { margin: 0;
    padding: 0; }

    html, body {
    margin: 0px;
    padding: 0px;
    display: inline-block;
    background-color: #CCCCCC;
    color:white; }

    .wrapper {
    text-align: center;
    background-color: #cccccc;
    color:white;
    margin-top:0px; }

    .wrapper p {
    display: inline;
    font-size: 70% }

    .wrapper span {
    margin: .5em;
    vertical-align: bottom;
    width: 120px;
    height: 100px;
    display: table-cell;
    display: inline-block; }

    .wrapper p span {
    vertical-align:top; }

    .wrapper p img {
    margin-bottom: 0px;
    border: none;
    margin-top: 0px;
    }
    .wrapper a {
    text-decoration: none;
    color: #000; }
    [/CODE]
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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