View Full Version : Picture Captions?

03-14-2005, 11:17 PM
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?

03-15-2005, 09:24 AM
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.

03-15-2005, 09:18 PM
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:

#left {
position: absolute;
width: 147px;
background-image: url(Pictures/crackback.gif);
float: left;
margin-right: 20px;
height: 100%;
margin: 0px 0px 0px 150px;
padding: 0 10px 10px;

#right {
width: 75%;
float: right;
text-align: center;
.floaty {
float: right;

I hope that helps....

03-15-2005, 09:41 PM
Ok, I appreciate your help, but it looks like I got it figured out! Thanks!

08-17-2005, 05:16 AM
I could really use some help with this too, please.

08-17-2005, 06:41 AM
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 style="clear:both;"></div>

08-17-2005, 08:09 AM
something I did and it worked:

<span class="subhead"><img src="?">text</span>

.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.

08-17-2005, 06:09 PM
It would offcourse be ideal if you could use this:

<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.

title="This image is called blabla.gif"
alt="This image is called blabla.gif"