Grow your CSS skills. Land your dream job.

Working out positioning from a template to final website

  • # September 18, 2009 at 7:28 am

    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

    # September 18, 2009 at 9:46 am

    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.

    Al

    # September 18, 2009 at 5:42 pm

    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".