Images with titles?

[davej]

Is there a nice way to title images? I have been throwing the image and the title into a one-celled table, but that isn't very flexible. I just end up with the title centered under the image. I'd like to be able to put the title on top of the image, like text on top of a background. Thanks.

[thescientist]

that's one way to do it. I guess it all depends on how you want it to look. If you want the text then the picture, you could do the text, then have the image elements come after it but set it to display: block so it rests on the next line. You can probably get away without tables though. You could use a couple lists floated left set to display: inline-block stacked above each other.

[ShadowMage]

that's one way to do it. I guess it all depends on how you want it to look. If you want the text then the picture, you could do the text, then have the image elements come after it but set it to display: block so it rests on the next line. You can probably get away without tables though. You could use a couple lists floated left set to display: inline-block stacked above each other.

I think OP actually wants the text to sit on top of the image, as in overlap it. To do that you could put the title and the image in a div. Give the div position: relative and give the element containing the title (say maybe a span) absolute positioning to move it down over the top of the image.

[thescientist]

I think OP actually wants the text to sit on top of the image, as in overlap it. To do that you could put the title and the image in a div. Give the div position: relative and give the element containing the title (say maybe a span) absolute positioning to move it down over the top of the image.

right, but the option for text sitting over a picture could surely just be as easy as using the image as a background for the div, no?

[davej]

that's one way to do it. I guess it all depends on how you want it to look. If you want the text then the picture, you could do the text, then have the image elements come after it but set it to display: block so it rests on the next line. You can probably get away without tables though. You could use a couple lists floated left set to display: inline-block stacked above each other.

Well, it isn't easy to search for an answer because I keep finding discussions of alt="" and title="". The ideal solution would allow the text to be positioned above, below, or on top of the image (with an appropriate text bg), and stay with the image. Can absolute positioning perhaps be used? Thanks.

[davej]

I think OP actually wants the text to sit on top of the image, as in overlap it. To do that you could put the title and the image in a div. Give the div position: relative and give the element containing the title (say maybe a span) absolute positioning to move it down over the top of the image.

Yeah, but a div always grabs a full page width, doesn't it? I'd like the image to remain pretty much as it is -- a block item that doesn't grab the entire page width (not that I have a strong understanding of this phenomena, but that seems to be the way it works for me). Thanks.

[thescientist]

well, if you read about images, it will tell you what the alt text is for. (or search for it).http://www.w3schools.com/tags/tag_IMG.asptitle, following the above search advice, will yield http://www.w3schools.com/tags/att_standard_title.asp, but that's not what you want either.Dynamically wanting to position the text in any of those various positions just requires a little planning and knowing the size of your images. I'm guessing this is for an image gallery or something?I would say the easiest, especially if all the images are the same size, is to make the images the background of their own div container, and then position the text within that, using padding.

[thescientist]

Yeah, but a div always grabs a full page width, doesn't it? I'd like the image to remain pretty much as it is -- a block item that doesn't grab the entire page width (not that I have a strong understanding of this phenomena, but that seems to be the way it works for me). Thanks.

by default it will, but then that's what CSS is for. (height, width, etc).http://www.w3schools.com/css/default.aspand in particular, the box modelhttp://www.w3schools.com/css/css_boxmodel.asp

[ShadowMage]

right, but the option for text sitting over a picture could surely just be as easy as using the image as a background for the div, no?

Doh! Yeah, you're right. Guess I like to overcomplicate things...

[davej]

I would say the easiest, especially if all the images are the same size, is to make the images the background of their own div container, and then position the text within that, using padding.

Well, a table seems to resize down against the outer dimensions of an image, which is convenient. I can then set the dimensions of the image in html while looking at the path/name of the image. Can I make a div do that? I could also set the size of the table in html and set the image as a bg-image, but that also throws the image name into the head or css file and might have some limitations, such as not being able to make the image into a hot-link. I have never used AP. Thanks.

[thescientist]

Well, a table seems to resize down against the outer dimensions of an image, which is convenient. I can then set the dimensions of the image in html while looking at the path/name of the image. Can I make a div do that? I could also set the size of the table in html and set the image as a bg-image, but that also throws the image name into the head or css file and might have some limitations, such as not being able to make the image into a hot-link. I have never used AP. Thanks.

sorry, you kinda lost me with that post. :)edit: now that you updated it, it makes more sense, although I'm still lost on the bolded part.how are you planning on making this? If you are doing a server side implementation, you could probably use a method to determine the size of the image that way and add a dynamic size to the div that way. You still haven't addressed the nature of this topic at all. Are you planning on making an image gallery? Are we just talking about a static image? I'd still like to get some more background before committing to any practical solution.

[davej]

You still haven't addressed the nature of this topic at all. Are you planning on making an image gallery? Are we just talking about a static image? I'd still like to get some more background before committing to any practical solution.

Huh? I'm just talking about random images thrown into a web page that may need a visible title. See this silly web page;http://139a09.kahanweb.org/MetalShop/measure.htmlI added text below several of the images using the one-cell tables I mentioned -- but that doesn't seem ideal.

[ShadowMage]

Just get rid of the table, replace the p with a div, and then give the div appropriate styling. If you want it to "wrap tight" around the text and image just set padding to 0. You'll need to give it a width and height too. In some cases, when you have two (or more) images side by side, you may need to set the display to inline-block and put them in a container div. Avoid the use of positioning to move these divs around on the page. You should use margins to do that.