have you watched the latest video by Chris Coyier?
in that, he is creating a PSD for a website and has an idea of some of the things to be on the page
but does not seem to have a final layout in mind but rather works it out in the design as he creates
the psd. next video he will be taking the psd and converting it into HTML and CSS code to create
the web page.
I would conclude that the placement of images, etc is very variable dependent on what it looks like
in the final product.
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!
Viewing 3 posts - 1 through 3 (of 3 total)
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".