Hey guys,

I have this question which ive been dying to know the answer to for a long time. I want to have some 'blogs' and layouts on my site for other people to use, and I want to use div layers (or do I need something else for it??) for the text into the boxes (which i have already created into the image) BUT heres the big BUT..

How do I make(position) those div layers into the image without it being stuck on one place? as in, how can I create those div layers with the images without them being stuck on a certain place in the webpage, but if I
like put them left or right or center them, the div layer stays in the image without me having to decode them? or, the one using my layout without any html knowledge having to position it all over again?

Thanks for all your help :)

stephy

Maybe you could make the entire thing within another div layer. Like this:

<div id="blog1" style="background-image: url(pinksheep.jpg);">
<div id="bg"></div>
<div id="textbox"></div>
<div id="title"></div>
</div>

That way you can make the 'blog1' div be positionable anywhere and the inside stuff would stay the same. Would that work, you think?

I dont think I get what u mean. how am I supposed to position anything with that code ? :idea:



I know im not the brightest crayon in the box around here..:(

lol, sorry. My fault, I wasn't really clear. Let's say you have one blog layout you want to create. You said you already have the pic (I'll name it: pic1.jpg), right?

So if you make a div layer and set the background image to be pic1.jpg, you'd have a box on your screen with the pic in it and you could change the position to where ever you wanted. It would look like this, if you didn't use an external style sheet:

<div style="background-image: url(pic1.jpg); position: absolute; top: 100px; left: 100px;"></div>

If then, this div layer, you put more div layers with your text and title and whatever you wanted, where ever you put the main div layer, the boxes inside would go with it and you'd never have to reposition them! It would look something like this:

<div style="background-image: url(pic1.jpg); position: absolute; top: 100px; left: 100px;">
<div style="position: absolute; top: 5px; left: 5px;">TITLE Y'ALL!</div>
<div style="position: absolute; top: 65px; left: 35px;">text text text - hey!</div>
</div>

And from there you could position the inner divs so they'd be right on top of the boxes in the pic and add all sorts of cool borders and fonts to your heart's desire. ;)

This would be a basic layout you could use over and over, just changing the background pic and the position of the inner boxes. And your end user would just have to change the top:100px and left:100px in the outer div!

How's that?

I think thats it, thanks :D
but I have one question, in this code:

<div style="background-image: url(pic1.jpg); position: absolute; top: 100px; left: 100px;">
<div style="position: absolute; top: 5px; left: 5px;">TITLE Y'ALL!</div>
<div style="position: absolute; top: 65px; left: 35px;">text text text - hey!</div>
</div>


can I remove the top: 100px; left: 100px code? that its positionable with just a center tag or something?

Yes it would work just fine with that. You would just put <center></center> (or <p align="right"></p> or whatever you wanted) around the whole thing. :)

Ok thanks. I think I got them to work now. :)

Steph