View Full Version : Layout Help!


MzLala88
07-09-2006, 06:50 PM
ok can someone please help me im in major need!...ok the thing is i jus learned how to make a layout i imaged mapped it and the only thing i need to do to make it work is i need to know how do i place text in tha boxes i have made on my layout...the code is

<img src="http://img462.imageshack.us/img462/3572/layout1ur.jpg">

yes it will be greatly apperciated if some one can tell me what to do
please and thank you:)

bourdelson
07-09-2006, 06:53 PM
You can position div layers over the boxes and fit them to the size of your boxes.

http://www.lissaexplains.com/html7.shtml

MzLala88
07-09-2006, 07:04 PM
how do i get the measurements fot weidth/height/top/left ??

bourdelson
07-09-2006, 07:20 PM
The width and height, and the positioning from top and left, depend on the place where you want them.

If you open your image in whatever program you've used, there should be a way to find the coordinates of a particular spot, which is how you can determine the top and left.

To figure out the width and height, in your image program, make a selection of the area where you want the div to be, then copy and paste that into a new image. Then, whatever the dimensions of that selection are, use those numbers for your width and height. [This is how I've always done it.]

Don't worry if they're not exact, though. Play around with the numbers to get it exactly as you want. :)

MzLala88
07-09-2006, 07:35 PM
k you kina lost me...'
umm the program i have doesnt give me any dimensions for top left and the other stuff...is there something i can download to get the numbers from?...and also what do i put for padding and z-index?

bourdelson
07-09-2006, 07:48 PM
Padding you don't need and z-index you usually don't need, either, but it can be set to 1.

Okay, for your main box, it looks like the div should have a width of 474px and a height of 368px. Your position from the top should be 557px and your position from the left should be 79px.

I found this out by opening your image in Adobe ImageReady, making a rectangular selection in the main box of your image, and looking at the coordinates and measurements that show up in the Info window.

MzLala88
07-09-2006, 07:59 PM
ok thank you so much!

so overall should the code look like this??...

<div id=layer1 style="position:absolute; top:557; left:79; width:474; height:368; z-index:1; padding:5px; border: #000000 2px solid; background-color:#000000; background-image:url(http://img462.imageshack.us/img462/3572/layout1ur.jpg); layer-background-image:url(http://img462.imageshack.us/img462/3572/layout1ur.jpg);">

Content goes here (images, text)

</div>

bourdelson
07-09-2006, 09:11 PM
A little more like this:

<img src="http://img462.imageshack.us/img462/3572/layout1ur.jpg" style="position:absolute; top:0px; left:0px; border:0;" />
<div id=layer1 style="position:absolute; top:557px; left:79px; width:474px; height:368px; z-index:1;">

Content goes here (images, text)

</div>

You had some unnecessary stuff in your div tag. Not everything that was in the tag on the tutorial page is needed every time you create a div. Those are just showing some of the things that can be in there.

Also, you want your image you created to be your entire layout, not just the background of the div, so I gave it a separate image tag and positioned it right up at the top left corner, so that the positioning of the div wouldn't have to change.

MzLala88
07-09-2006, 09:28 PM
OMG THANK YOU SO MUCH I LOVE :heart: YOU!!! :D

bourdelson
07-09-2006, 09:50 PM
You're welcome! :)