Jump to content

Images with titles?


davej
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 Edited by thescientist
Link to comment
Share on other sites

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... :)
Link to comment
Share on other sites

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. Edited by davej
Link to comment
Share on other sites

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. Edited by thescientist
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...