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 8 of 8
  1. #1
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Picture Captions?

    Is there a way to put a caption, or a note underneath a picture, without having to try and just align things so that they look like they would work?

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

    Eh?

    Could you be a liiitle more specific?
    If the image and caption are enclosed in a surrounding element, it wouldn't be too hard to use some styles to get things to line up as desired; some more insight in the markup you wish to use would help, though.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok... I'll do my best.

    I've gotten a bit of advice from another forum that I could use divs to section off a little piece and size it to my needs... I'm still trying to make it work.

    if you go to www.marconid.com/aboutus.html you will see a picture of a lady with the word "caption" underneat it... That's what I'm trying to move. I need it placed on about that line,on the right side, with text flowing around it.

    Here's some code from my CSS that should be relevant to the situation:

    Code:
    #left {
    	position: absolute;
    	width: 147px;
    	background-image: url(Pictures/crackback.gif);
    	float: left;
    	margin-right: 20px;
    	height: 100%;
    }
    #content{
    	margin: 0px 0px 0px 150px;
    	padding: 0 10px 10px;
    }
    
    #right {
            width: 75%;
            float: right;
    }
    #elaine
    {
            text-align: center;
            width:169;
    }
    .floaty {
            float: right;
            padding:5px;
    }
    I hope that helps....

  • #4
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, I appreciate your help, but it looks like I got it figured out! Thanks!

  • #5
    New to the CF scene
    Join Date
    Aug 2005
    Location
    Sydney, Australia
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I could really use some help with this too, please.

  • #6
    New to the CF scene
    Join Date
    Aug 2005
    Location
    Sydney, Australia
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, I worked it out this is what I got:


    <div style="float:right;width:190px;height:360px;margin-top:0px;margin-bottom:5px;margin-left:10px;font-family: Arial,Helvetica,Georgia;font-size:10px;line-height:18px;color:black;text-align: right;">
    <img src="image.jpg" width="190" height="360" style="float:right;"><br>Caption</a><br></div>
    <div style="text-align: left;">
    Main body text
    </div>
    <div style="clear:both;"></div>

  • #7
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    something I did and it worked:

    Code:
    <span class="subhead"><img src="?">text</span>
    Code:
    .subhead {
    display: block;
    width: 125px;
    text-align: center;
    float: left;
    margin-left: 4px;
    }
    'course the images were all 125px wide and the margin was to space them out as they displayed inline but a little tinkering and it might work for what you need.
    Last edited by harbingerOTV; 08-17-2005 at 08:11 AM.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #8
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It would offcourse be ideal if you could use this:
    Code:
    <img src="blabla.gif"><caption>Text above an image</caption></img>
    But that's not the case.

    You could also display a title for the image, wich is IMO, quite better. And offcourse the alt attribute.

    Code:
    <img
        src="blabla.gif"
        title="This image is called blabla.gif"
        alt="This image is called blabla.gif" 
    />
    CATdude about IE6: "All your box-model are belong to us"


  •  

    Posting Permissions

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