overlaying captions on an image in div tags

[bonnie]

I'm trying to place a div tag with text captions over a div tag holding an image. (The text comes out much clearer this way than when it's part of the image.)

I've managed to get the effect I want in the PDF output (captions in a div of Z=2 overlaying the image in a div of Z=1), but in the WebHelp, the text captions don't overlay the image, they fall down below the image. Is it not possible to use div tags this way in WebHelp, or am I doing something wrong?

Or is there another way to do this?

Thanks very much in advance for any help on this.
Bonnie

[LTinker68]

No, it should work, but it might depend on the units of measure you're using to position the DIVs. Are you using pixels? If you use points then it'll affect the positioning because WebHelp is based on pixels, not points, and 1 pt does not equal 1 px.

And depending on how you set it up, you may need to set one of the DIVs to use relative positioning.

[bonnie]

it should work, but it might depend on the units of measure you're using to position the DIVs. Are you using pixels?

I am using pixels for positioning the DIVs. I have my image in div.text_box_Z_1, and my captions in div.text_box_Z_2 (shown below). I have used padding-top (in pixels) in the <img> tag to align the image with the captions.

Code: Select all

	div.text_box_Z_1
	{
		z-index: 1px;
		margin-left: 380px;
		margin-top: 0px;
		float: left;
	}

	div.text_box_Z_2
	{
		z-index: 2px;
		margin-left: 416px;
		margin-top: 0px;
		float: left;
	}

What I'm trying to accomplish is shown in the first figure (and this is what I get in my PDF). What I am getting in the Webhelp is shown in the second figure below.

div_overlays_pdf.png

div_overlays_webhelp.png

you may need to set one of the DIVs to use relative positioning

I have positioned my DIVs by trial-and-error. I'd sure appreciate it if you could could explain about the relative positioning.

Thanks, Lisa!
Bonnie

[LTinker68]

I only glanced at your post because the first thing that jumped out was the values for your z-index. You don't use units of measure in the z-index -- that's simply a whole number. The higher the number, the higher the "elevation" off the screen. I'm surprised Flare didn't throw an error about that being an invalid value. It should just be z-index:1; and z-index:2;. The browsers are probably ignoring the whole line because it's not valid and they don't know how to interpret the value, and if they ignore it then they're going with the default which is that they're both on the same level. I think you just got lucky on the PDF output.

Try changing the z-index values to what I indicated above and see if that works.

[LTinker68]

BTW, if you're using this caption method to add the text "Time options drawer" and "Var radio button", then I recommend you not do that. You should put the text with the lines in the graphic file itself. The reason why is this... If the end user modifies their font settings, then they've just screwed your display anyway -- the text will be out of alignment and/or cut off, depending on how you've positioned the elements and the font size they pick. And if they adjust the size of the browser window then it could screw up the elements, too. When I do callouts, I add them directly to the graphic and insert that graphic into the topic.

That's my recommendation anyway.

[bonnie]

You don't use units of measure in the z-index -- that's simply a whole number.

OK. Thanks for letting me know. I wondered about that. But if I enter a z-index value through the stylesheet editor, how do I get a unitless value? It automatically adds a unit of some kind when I enter a value. ( I will take out the unit in the Internal Text Editor.)

BTW, if you're using this caption method to add the text "Time options drawer" and "Var radio button", then I recommend you not do that. You should put the text with the lines in the graphic file itself. The reason why is this... If the end user modifies their font settings, then they've just screwed your display anyway -- the text will be out of alignment and/or cut off, depending on how you've positioned the elements and the font size they pick.

OK. I'll forget about this method, then. But I'm used to overlaying my captions on my images in FramMaker and getting really nice, crisp text in the PDFs. Text captions as part of the graphic turn out so smeary in comparison.

Anyway, I appreciate your recommendation, since you have saved me from a lot of wasted time.
Bonnie

[LTinker68]

But if I enter a z-index value through the stylesheet editor, how do I get a unitless value?

It might have done that to me, too. But to be honest, I edit the stylesheet manually quite a bit so I probably changed it manually without remembering. For some reason, I don't remember selecting "default" for the unit of measure working, or maybe doing so switched it back to px. There are definitely some fields in the Stylesheet Editor that I wish were text boxes instead of drop-down fields. Or maybe have drop-down fields but have it display the final line of code below so that you can tweak it if necessary.

Make sure you post a bug report about the Stylesheet Editor having a unit of measure drop-down field for the z-index when it shouldn't.

BTW, if you're using this caption method to add the text "Time options drawer" and "Var radio button", then I recommend you not do that. ...

OK. I'll forget about this method, then. But I'm used to overlaying my captions on my images in FramMaker and getting really nice, crisp text in the PDFs. Text captions as part of the graphic turn out so smeary in comparison.

That is one downside to single-sourcing content. Some things that can be done in online help simply can't be done in print and vice versa. So you either have to create alternate code for one method, or go a totally different route. In this case, graphics are the easiest workaround because they're supported in both medium. That said, you can still do two different versions of the graphic (especially if you use Capture). One graphic can be designed for online output and one for print.