Positioning problem - newbie!

Problem positioning div's where I want them.

[RTLdan]

Hello Everyone,
I'm pretty new to CSS.

My site has a tiled background, and then a picture ontop of that. I'm trying to get my text to sit ontop of the picture. I have more than one DIV for my text that I'm trying to position.
I know my site design may not be the very best, but I'm trying to make it work...

Here is my problem:
I was able to get the text lined up correctly over the picture, but I found that when I changed, for example,
the "margin-top" value for one of the divs containing text, the div tags that came after it would be affected too!

So I can't figure out how to position them independently from each other.

I can provide the coding that I've done if requested. Hope this question isn't written too confusingly.

Thanks in advance!
-Daniel

[edited by: RTLdan at 8:07 pm (utc) on May 5, 2007]

[Xapti]

I'm really not sure what you're asking...

One way to get objects stacked on top of eachother is to do this:
Note: this is not real HTML
<div1>
<img><div2>text</div2>
</div1>

div1 is just a container. It should have the style position:relative.
img or div2 (prefferably not both, and preferrably the smallest one) should be set to position:absolute;top:0;left:0.
If you want more content to go after that stack, but for it to not be stacked, just add another div afterwards And it will start after the largest object. If you want the next object stacked with another image, just do the same thing, just it will be nested.
this can be done with ANYTHING, not just images and text. (text on text, flash object on java object, whatever)

For just Text on top of image I'll show you something much easier.

Are you saying you want two divs with text both overtop the same image? While that is possible, why don't you just put them in one div? or just use spans? if they use different styles, you can just style the text with spans... no need for two divs.

To get that, it's pretty easy... Just Make a container div (like last time), with the style background-image:url(file.extn), and then put your text you want inside it. It's as simple as that!
So for two divs on top of 1 image (although it seems pointless if all you'll have in them is text)
<div BG-I:image.jpg>
<div1>text</div1>
<div2>text</div2>
</div>

[edited by: Xapti at 9:28 pm (utc) on May 5, 2007]