Positioning problems with position:absolute;

[shoppe]

Hey and a happy new year!

Have you ever experienced problems with positioning div's inside a div?
This is my HTML:

Code: Select all

<div style="position:relative;">
  <img src="../Resources/Images/Topics/030000019.png" style="height: 133px;width: 496px;" class="img_4" />
  <div style="position:absolute;top:25px;left:120px;">❶</div>
</div>

I need to place the number one above the image in a certain position. Therefore the parent div got the attribute position:relative. The child div with the number the attribute position:absolute with top and left information.

Do you guys know, why this isn't working at all in Flare? I don't have any problems even in Internet Explorer

Thanks in advance!

Sebastian

[NorthEast]

What do you mean when you say it's not working in Flare?

If you mean it's not displaying as you expect it to in Flare's XML editor, then that wouldn't surprise me. It should look as you expect in the actual output though, assuming that's a web-based output like WebHelp or HTML5 help.

[shoppe]

Ok - due to my bad explanation I've uploaded two images.

And I used this simple HTML Code:

Code: Select all

<div style="position:relative">
<span style="position:absolute;top:25px;left:120px;">❶</span>
<div style="width:300;height:200px;background:green"></div>
</div>

example_positioning.png
You can see that Flare does not display the span-tag with its absolute property.

example_output.png
On the left hand-side you can see the HTML5 and on the other side the PDF output.

Well, I can live with the bad preview in the XML Editor but certainly not with the generated PDF.
I really need a lot to position absolute.

[NorthEast]

So the issue is just the PDF output?
I'd expect positioning to work in HTML/web-based outputs only (i.e. WebHelp, HTML5, HTML Help), but unfortunately not for PDF (or non-HTML outputs).

You might be better off using tables for the positioning.

[sfoley]

I need to place the number one above the image in a certain position. Therefore the parent div got the attribute position:relative. The child div with the number the attribute position:absolute with top and left information.

You can fudge it by making the image a background and using padding:

Code: Select all

<div style="background: url('../Resources/Images/Topics/030000019.png'); height: 133px; width: 496px;">
	<div style="padding-top: 25px; padding-left: 120px;">❶</div>
</div>

Note that since you'll no longer have an alt attribute, you'll need to include a separate image caption for accessibility purposes in HTML output.

[i-tietz]

I'd try to float the "1" character: Add a float:left; to the styles of the first element in row (in your example the span). The following element (in your example the div) should then start at exactly the same position as the span.
Floating allows you to bring elements beside each other or overlaying one with the other. You might have to switch the order of the two elements, because the image might cover the span ...

[sfoley]

I'd try to float the "1" character: Add a float:left; to the styles of the first element in row (in your example the span). The following element (in your example the div) should then start at exactly the same position as the span.
Floating allows you to bring elements beside each other or overlaying one with the other. You might have to switch the order of the two elements, because the image might cover the span ...

This is incorrect; your suggestion would cause the image to move to the left or right of the text.

By itself, the float property does not allow one element to overlay or intersect with other elements. It merely allows subsequent elements to wrap or flow around the floated element.

[shoppe]

Thank you guys for your help, but I solved the problem by using screenshots with the arranged div-containers. A quick-and-dirty solution

I need to place the number one above the image in a certain position. Therefore the parent div got the attribute position:relative. The child div with the number the attribute position:absolute with top and left information.

You can fudge it by making the image a background and using padding:

Code: Select all

<div style="background: url('../Resources/Images/Topics/030000019.png'); height: 133px; width: 496px;">
	<div style="padding-top: 25px; padding-left: 120px;">❶</div>
</div>

Note that since you'll no longer have an alt attribute, you'll need to include a separate image caption for accessibility purposes in HTML output.

This would only work for one "positioned" element. If you add more div's they would be placed under the higher one - what I didn't want.

[LTinker68]

This would only work for one "positioned" element. If you add more div's they would be placed under the higher one - what I didn't want.

The z-index attribute controls the stack order of the DIVs, regardless of the order they're added to the topic. So if you do want layered DIVs, then you can do it.

The downside is that they won't work for print output, so if you're trying to single-source, then you might have problems. And, FYI, when you try to add a number to the z-index attribute in the stylesheet, Flare throws in "px", so a z-index of 2 would be added to the stylesheet as 2px. I submitted a bug report about that before, but you'd need to open the stylesheet file in the Internal Text Editor to remove the px text.

[shoppe]

I know that I can layer the div's. But as you said, it won't work in print output.

Thanks for your bug-report about z-index. I haven't seen any bugs so far