Re: Working out positioning from a template to final website

[Indubitable Turtle]

The problem with a mathematical approach s that it really is different for every design. For some designs absolute or relative positioning will work better, for some it is as simple as setting the an offset in the background property in the CSS, and for some you have to carefully plug in margin and padding values.

My advice is to keep studying these tutorials, especially those at sites like Six Revisions and NetTuts (in addition to CSS Tricks, of course) and noting the methods they use, then adapting to your own projects. With some understanding of CSS positioning, it really isn’t terribly difficult to get consistent results. Experience is the biggest factor—knowing when to use which methods.

Taking measurements from your Photoshop PSD file is an important factor. Use the ruler (click and hold on the Eyedropper tool to choose the Ruler tool) in Photoshop to measure out the distance between elements, take note of these numbers, and apply them in your CSS. In what way you will need to apply these differs by the type of element and the requirements of the project. For instance, a fixed-width design may benefit more from absolute positioning where a fluid width design may benefit more from margins or padding in em.

The best way to learn is by doing. Make up a few (drastically different) designs, then try your hand at coding them. Keep at it until you are comfortable with it.

I am of course no expert at any of this, still learning myself, but I wish you luck!