Search code examples
htmlcssxhtmlphotoshoppsd

PSD to XHTML/CSS Conversion

If I have a psd and trying to figure out what is the best diminsions to use for the html conversion what would be best. Just do the psd image size?

I have my site and the page to what my image should look like below.

Website: http://kansasoutlawwrestling.com

Mockup jpg: http://kansasoutlawwrestling.com/assets/images/wrestling.jpg

I went to psd2htmlconverter.com paid 3 bucks and got something but the html and css shows correctly but its not separated like it should be.

http://kansasoutlawwrestling.com/crap/admintemp/testing/index.html

But I'm really trying to work off of the main website css.

Solution

  • Not entirely sure what you're asking, but if you're talking about how to slice the PSD, I wouldn't slice everything at set dimensions. Let the layout dictate where to slice, and try to slice it logically by section, in such a way that reassembling it with HTML/CSS is easy.

    Start by mentally diving the layout into sections, e.g. top banner, left column, right column, content area, footer, etc. After sectioning the layout, just start slicing it logically into small or medium sized images.

    It might help to create a skeleton in HTML/CSS so you have an idea of how you need to slice the template. This tends to work out well because you're not just slicing it randomly, but rather you're slicing it to fit the skeleton that you created. Obviously, you may need to slice a big image like a top banner into a few parts, but that doesn't really change anything - you're still fitting the sections of the template to the sections of your skeleton.

    Here's something I put together really quickly, just to illustrate how to go about slicing the image. I wouldn't use my exact example, but it should point you in the right direction:

    That's probably the best advice I can give with the provided information. I'll expand on my answer if you provide more details.

    EDIT

    Looking at the source on your page, it looks like you just need to float div#middle so the right sidebar doesn't drop below it.

    CSS table layouts are really good for this kind of stuff. Give something like this a shot:

    <style type="text/css">  
#container {   
    display:table;   
    border-collapse:collapse;   
}        
#layout {   
    display:table-row;   
}          
#left-sidebar, #right-sidebar, #content {   
    text-align:left;
    display:table-cell;   
}          
</style>  

<div id="container">   
    <div id="layout">   
        <div id="left-sidebar">   
            <!-- left sidebar-->
        </div>   
        <div id="content">
            <!-- content -->
        </div>
        <div id="right-sidebar">   
            <!-- right sidebar -->   
        </div>   
    </div>  
</div>

    Here are some articles discussing table-based layouts in CSS2: