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 9 of 9

Thread: image captions

  1. #1
    Senior Coder
    Join Date
    May 2004
    Posts
    1,464
    Thanks
    15
    Thanked 0 Times in 0 Posts

    image captions

    I have a article and want to add images like this

    <img src=http://www.test.com/images/article1d.jpg hspace="5" vspace="5" border="0" align="left" >

    without having to use tables.
    This works nicely but what if I want a caption under the images.
    Is there anyway to do it without using a table?
    Last edited by WA; 03-17-2005 at 10:09 AM.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    The page?

    Without seeing the actual page layout and markup ("code"), it's hard if not impossible to give definitive answers.
    However, using floats will probably give the best results; enveloping the image itself and its caption in a surrounding element, which is then floated to the proper side shouldn't be too hard to do.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    Senior Coder
    Join Date
    May 2004
    Posts
    1,464
    Thanks
    15
    Thanked 0 Times in 0 Posts
    all I wnat to do is have a paragraph of text around the picture.

    My problem is right now I cannot put a caption under the picture and still keep the space aroudn teh pictures.

    How would I do it with floats?

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Flow?

    all I wnat to do is have a paragraph of text around the picture
    You mean, you want the text to flow around the picture? Then float is your friend.
    Encase the picture and caption in a surrounding element, sort of like:
    Code:
    <div class="picboxleft">
      <img src="thesource.jpg" alt="alternativedescription" />
      <p>The caption text goes here.</p>
    </div>
    
    <p>This is the normal text flowing around the picture and caption</p>
    If you then float the picbocleft div either left or right (in which case, picboxright may be a better class name... ), the following text will flow around this box. Style rules, using the class handle picboxleft, can be applied to taste. Just a quick example:

    Code:
    .picboxleft {
    float: left;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 0.5em;
    }
    
    .picboxleft img {
    width: 200px;
    height: 150px;
    display: block;
    }
    
    .picboxleft p {
    font-size: 0.8em;
    text-align: center;
    }
    for a left floated box with half an em padding, a white background and a light grey border, an image with the presumed dimensions 200 x 150 pixels (adjust to need), and a slighty smaller, center-aligned caption text.
    Last edited by ronaldb66; 02-14-2005 at 03:11 PM.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #5
    Senior Coder
    Join Date
    May 2004
    Posts
    1,464
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Thumbs up

    Thanks for your help.

    This is exactly what I needed.

    Is there any specific book you would recommend on css to learn all these css techniques?

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    http://realworldstyle.com/thumb_float.html

    I stumbled across this page just now and remebered seeing your question this morning.

    just a little more options depending on what you want to do

  • #7
    Regular Coder
    Join Date
    May 2004
    Location
    Berkeley, California Age: 15
    Posts
    398
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I was just working on a similar idea for my portfolio pages....Check out:

    http://jalenack.com/port/portfolio.php

    Also try one of the inner pages. I used a different float method for that.

    I used definition lists...which I was under the impression are more semantic...and pretty easy to work with.
    Jalenack.com .:. YWDA Founder .:. Rounded Corners Maker 1.1! .:. My Blog
    The hardest thing about teaching is not knowing the right answers, but knowing the right questions - Elisabeth Klein
    Pretty buttons does not a great website make.

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Semantics

    are more semantic
    You're most likely right; I just did that of the top of my head to give an example.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts
    that depends on whether you want a single image embedded into the text, or a series of images, such as a gallery.

    In the case of a gallery the dl is more semantic, but for a one off the div and p are a better option.
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)


  •  

    Posting Permissions

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