Working out positioning from a template to final website

[css_newbie]

Hi there,

I am a designer at heart and right now I want to start doing things in house, instead of relying on others to
code my designs…

The problem I have is I never know how to position all the images from the template to look exactly the same in the final css coded design as it does in the template.

Example…

http://csshowto.com/sanke-photography/i … anke-1.jpg (not my design)

There is a tutorial to go with the above template design but all the placement is already worked out for you
as in most of the tutorials I have come across. make such and such 700px etc.

Could there be a mathematical way I can work out where to place things on my page? or is it just trial and error?

It’s the only thing holding me back doing my own coding so I am hoping someone here can help me out.

many thanks

Emily

[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!

[Author]

Posts