Div Positioning using Photoshop

Div Positioning using Photoshop

You need the following:

Photoshop CS4

A profile, or sothing you want to place a div onto.

A pen/pencil

A piece of scrap paper

Step 1
Open up the profile you will be coding in Photoshop.




Step 2
Select the Slice Tool (), which is located under the crop tool.



Step 3
The layout I am coding is non-scrolling and has two columns. We will first need to select one of the columns to slice. I have choose the right column to code first.

The right column is a Rounded Rectangular Shape and is on its own layer (Shape 4), therefore I can hold down the Ctr key and select the layer with the left mouse button and the whole rectangle will be selected.





Step 4
With the layer selected go to Select > Modify > Contract. I usually input 4px into this box. Then click OK.



Photoshop will then subtract 2px from each side of the rectangle selection except from the bottom since the shape reached beyond the bottom. This will not hurt the outcome since the layout will be non scrolling.




Step 5
Use the slice tool to create a box within the dotted lines as boundary lines. You may have to Zoom in to get the slices to match up with the selection.





Step 6
Repeat Steps 3 through 5 for the remaining column(s).






Step 7
Now for the positioning part!

With the slice tool still selected, press the Ctrl key and double click the column you wish to position. This time I am using the left column. A Slice Options box should open up listing the information for the slice you have just selected.



The only part that we will be interested in the the Dimensions Box.

Here is what the values mean for your CSS:
X: Left
Y: Top
W: Width
H: Height

Since this layout is non-scrolling you will not need the height value however if the box will be scrolling, you will need it.

Write down these values because we will need them to code in the column!



Step 8
Repeat step 7 for any remaining columns that you have!



Step 9
Now for the coding part of the tutorial. Using the values in Step 7, the code for the column will look like this:

CSS:

#column1{
position: absolute;        
left: 56px;
       top: 312px;
       width: 235px;
       margin: 0px;
       padding: 0px;
       }



Now if your box is scrolling, the coding will look like this:

CSS:

#column1{
       position: absolute;
       left: 56px;
       top: 312px;
       width: 235px;
       height: 448px;
       overflow: auto;
       margin: 0px;
       padding: 0px;
       }


Your columns should now be positioned perfectly!