How to float one image over another with with text in the right

[stiffler120]

Hi there, great forum :)
I would like some help, i want to How to float one image over another with with text in the right. (using html)
How can this be done?
From your site i found the way to float an image over one other like this
<style type="text/css">
.imgA1 { position:absolute; top: 25px; left: 25px; z-index: 1; }
.imgB1 { position:absolute; top: 25px; left: 25px; z-index: 3; }
</style>

<img class=imgA1 src="http://example.com/imageA.jpg">
<img class=imgB1 src="http://example.com/imageB.jpg">

But exept of this i want to ad text in the right so that it can be shown like in this picture :
<snip>

How can i do it ?

[edited by: bill at 7:24 am (utc) on Oct. 24, 2009]

[edited by: incrediBILL at 2:47 pm (utc) on Oct. 24, 2009]
[edit reason] No links to examples or images please [/edit]

[swa66]

You can position your text exactly like you position your images.

[stiffler120]

what do you mean, can you give me an example with html code
if the
image 1 is : http://example.com/immage1.jpg
image 2 is : http://example.com/immage2.jpg
text: demo text blah blah blah

[edited by: incrediBILL at 2:48 pm (utc) on Oct. 24, 2009]
[edit reason] exemplified - only use example.com [/edit]

[stiffler120]

Anyway i found it...
Here is the html code
<style type="text/css">
.imgA1 { position:absolute; top: 0px; left: 0px; z-index: 1; }
.imgB1 { position:absolute; top: 0px; left: 0px; z-index: 3; }
.texB1 { position:absolute; top: 0px; left: 100px; z-index: 3; }
</style> <img width="100" height="100" align="left" alt="" class="imgA1" src="http://example.com/imageA.jpg" /> <img width="90" height="90" align="left" alt="" class="imgB1" src="http://example.com/imageB.jpg" />
<p class="texB1" style="top: 0px; left: 100px; width: 790px; height: 72px;">Demo Text</p>

[edited by: incrediBILL at 2:48 pm (utc) on Oct. 24, 2009]
[edit reason] exemplified - only use example.com [/edit]

[swa66]

FWIW: I'd most likely wrap these elements in a div in this case and
give that div position by setting "position:relative;" on it.
That way I get a box that the absolutely positioned children will use as a reference in positioning themselves.

Also I probably will use one of the images as a background via the CSS and that would also make sure I can do without having to set z-indexes.

In your code: your css in the header is being partically overridden by inline CSS (but it's got the same settings). I'm unsure why you add it inline and not move it all to the CSS in the header (or external file - even better-).

[stiffler120]

Swa66 youre right... I changed a bit the code...
The new code i used that worked for me is this :
<style type="text/css">
.temptesting {
width:100px;
height:100px;
background:url('background.png') repeat;
}
</style>
<div style="float: left; margin-right: 10px;" class="temptesting">&#9;<img width="92" height="92" alt="" src="http://image.over-the.background/image.jpg" /></div>
Blah Blah Text