[Guide] From PSD to HTML - CSS

[CriticalError]

Hello to all, well today we look at desktop publishing layout of the PSD (Photoshop file) to the valid code and cross-browser HTML / CSS. Just analyze a couple of fixes for Internet Explorer 6.

 

Concept Design

 

 

Designed by Chris Spooner is a layout for a blog on WordPress. Gray background, combined with splashes of different colors in the header and the various buttons and links provide an excellent effect.

 

Cutting PSD

Layout always starts with the cutting layout. First of all let's get down to the background of those in the header. Since the image contains a variety of gradients and colors, then save it as JPEG.

 

 

In the same way cut out each element in the design. In some cases, you have to turn off the upper layers, for example, the background for the button with the date.

 

 

Once you're done with pulling out pictures, you will have a folder with all images. Some of them will be repeated in the background when the others will serve as a common graphical components.

 

 

First, let's those zeroes styles that will not allow browsers to add arbitrary padding. Then set the font and background for a tag body. For the block-container we specify margin: 0 auto;, so it appears on the screen.

 

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, blockquote { 
    margin: 0; padding: 0; border: 0; 
} 

body { 
    font-family: Helvetica, Arial, Sans-Serif; line-height: 24px; 
    background: #eee url(images/body-bg.jpg) center top no-repeat; 
} 

#container { 
    width: 925px; margin: 0 auto; padding: 143px 0 0 0; 
}  

 

Now let's cap. The only thing I would like to mention here - the category should be transformed to uppercase letters in accordance with the design.

 

#header { 
    background: url(images/header-bg.png) rightright bottombottom no-repeat; overflow: hidden; 
    padding: 0 0 50px 0; 
} 

    #header h1 { 
        float: left; 
    } 

    #header ul#categories { 
        float: rightright; list-style: none; margin: 16px 0 0 0; 
    } 
        #header ul#categories li { 
            float: left; margin: 0 0 0 40px; 
        } 
            #header ul#categories li a { 
                display: block; 
                font-size: 14px; font-weight: bold; text-transform: uppercase; color: #a42988; 
                text-shadow: 0 2px 0px #fff; text-decoration: none; 
            } 
                #header ul#categories li a:hover { 
                    color: #006ab1; 
                }  

 

Our layout now beginning to take shape.

 

 

Further customize our content and sidebar. Since these two columns are arranged side by side, one would have to specify the float, and set overflow value to hidden. Will also need to set styles for references. We have to set the date of the map background and positioning around the unit relevant news.

 

#content { 
    background: url(images/content-bg.png) rightright top repeat-y; overflow: hidden; 
} 

    #content a { 
        font-weight: bold; text-transform: uppercase; color: #a42988; 
        text-shadow: 0 2px 0px #fff; text-decoration: none; 
    } 
        #content a:hover { 
            color: #006ab1; 
        } 

    #content #main { 
        width: 685px; float: left; padding: 55px 0 0 0; 
    } 
        #content #main h2 { 
            margin: 0 0 16px 0; 
        } 

        #content #main p { 
            margin: 0 0 25px 0; color: #474747; font-size: 15px; 
        } 
#content #main .post { 
    background: url(images/post-divider.png) rightright bottombottom no-repeat; 
    padding: 0 47px 55px 0; margin: 0 0 55px 0; 
    overflow: hidden; 
} 
    #content #main .post .date { 
        width: 62px; height: 57px; float: left; padding: 15px 0 0 0; margin: 0 20px 0 0; 
        background: #0085cc url(images/date-bg.jpg); 
        text-align: center; 
    } 
        #content #main .post .date p { 
            font-size: 40px; font-weight: bold; color: #fff; 
            text-shadow: 0 2px 3px #006ab1; 
        } 
            #content #main .post .date p span { 
                margin: 5px 0 0 0; 
                display: block; font-size: 17px; font-weight: normal; text-transform: uppercase; 
            } 
#content #main .post .post-content { 
    width: 556px; float: left; 
} 
    #content #main .post .post-content ul.post-meta { 
        width: 515px; height: 21px; list-style: none; padding: 14px 20px; 
        background: #d6d6d6 url(images/meta-bg.jpg); 
    } 
        #content #main .post .post-content ul.post-meta li { 
            float: left; margin: 0 40px 0 0; 
            font-size: 15px; font-weight: bold; text-transform: uppercase; color: #fff; text-shadow: 0px 2px 3px #b8b8b8; 
        } 
            #content #main .post .post-content ul.post-meta li.read-more { 
                float: rightright; margin: 0 0 0 0; 
            } 
                #content #main .post .post-content ul.post-meta li a { 
                    color: #fff; text-shadow: 0px 2px 3px #b8b8b8; 
                } 
                    #content #main .post .post-content ul.post-meta li a:hover { 
                        color: #eee; 
                    }

 

Quite a lot still needed for content, but this is the main part! So far we have obtained all just fine.

 

 

Since the content we're finished, proceed to the sidebar. It is necessary to ask oborazhenie link-buttons with the background and give them a beautiful display. Just do not forget about the subscription button (on setting this up, I wrote earlier).

 

#content #side { 
    width: 200px; float: left; padding: 5px 20px; 
} 

    #content #side p#subscribe a { 
        display: block; height: 30px; font-size: 20px; color: #fff; padding: 7px 0 0 45px; margin: 0 0 15px 0; 
        text-shadow: 0px 2px 3px #b8b8b8; 
        background: url(images/rss-icon.png) left no-repeat; 
    } 
        #content #side p#subscribe a:hover { 
            color: #eee; 
        } 

    #content #side ul#pages { 
        list-style: none; margin: 0 0 30px 0; 
    } 
        #content #side ul#pages li { 
            margin: 0 0 5px 0; 
        } 
            #content #side ul#pages li a { 
                display: block; width: 157px; height: 23px; padding: 12px 20px; text-align: center; 
                background: #eee url(images/sidebar-btn.png); 
            }

 

We almost came close to an end. Just a couple of steps ahead of him.

 

 

Now do the social bookmarks. In HTML code, we asked them the usual list, but by now we give the list of styles they are more or less human form. Also a search form. Here we choose to display the button inside the field.

 

#content #side h3 { 
    font-size: 20px; text-transform: uppercase; color: #fff; margin: 0 0 5px 0; 
    text-shadow: 0px 2px 3px #b8b8b8; 
} 
    #content #side ul#follow-me { 
        overflow: hidden; list-style: none; margin: 0 0 30px 0; 
    } 
        #content #side ul#follow-me li { 
            float: left; margin: 0 8px 8px 0; 
        } 
            #content #side ul#follow-me li a { 
                display: block; width: 32px; height: 32px; 
                text-indent: -9999px; 
            } 
                #content #side ul#follow-me li a.twitter { 
                    background: url(images/social-icons/twitter_32.png); 
                } 
                #content #side ul#follow-me li a.facebook { 
                    background: url(images/social-icons/facebook_32.png); 
                } 
                #content #side ul#follow-me li a.flickr { 
                    background: url(images/social-icons/flickr_32.png); 
                } 
                #content #side ul#follow-me li a.youtube { 
                    background: url(images/social-icons/youtube_32.png); 
                } 
                #content #side ul#follow-me li a.vimeo { 
                    background: url(images/social-icons/vimeo_32.png); 
                } 
#content #side form#search { 
    margin: 0 0 30px 0; 
} 
    #content #side form#search input.search-bar { 
        width: 135px; height: 43px; padding: 1px 45px 0 15px; float: left; 
        background: #eee url(images/search-bar.png); 
        font-size: 15px; color: #474747; 
    } 
    #content #side form#search input.search-btn { 
        width: 27px; height: 27px; float: rightright; margin: -36px 15px 0 0; cursor: pointer; 
        background: url(images/search-btn.png); text-indent: -9999px; padding: 0 0 0 27px; 
    }

 

That we have already happened?

 

 

Mend IE 6

 

All browsers are displayed very well except .... true - Internet Explorer 6.

 

 

For him, we need to create a separate file and write back some clarification. Proceed.

 

#content #side, #content #main .post .date, #content #main .post .post-content ul.post-meta { 
    overflow: hidden; 
} 

#content, #footer, #header  { 
    height: 100%; 
}

 

The HTML code between the head tags to add a connection to IE 6.

 

<!--[if IE 6]> 
<link href="css/ie6.css" rel="stylesheet" type="text/css" media="screen" /> 
<![endif]-->

 

Final result

On this work with the layout is finished. Uh ... Now we have finished svertanny layout.

 

 

To bring to perfection

When everything is ready, it is worth to think about functionality. To page opens in the browser faster, use the compressor package

 

webjoe

 

PD: but someone tell you to do this in this section, is wrong, but why? because the web that provide PSD bone here many are only skin on the web, with this in may build the website from PSD, hope you find it helpful.

 

Credits by Gotessa for post and webjoe for guide

[g@k]

Lol, Crap sh1* Nice dude, i really thanks you for this

[SoRa]

Lol, Crap sh1* Nice dude, i really thanks you for this

[MixMasteR]

Very nice CE!

I like your guides!

Thanks again.

[Reptant_]

Very nice CE!

I like your guides!

Thanks again.

He can find nice guides/shares in web,indeed

It should go @ Offtopic too

 

 

anyway,thanks

[CriticalError]

He can find nice guides/shares in web,indeed

It should go @ Offtopic too

 

 

anyway,thanks

so what's the problem about this if only what I bring to help others,better worry about yourself before you throw shit to others, only allows people to leave forum.

[Reptant_]

so what's the problem about this if only what I bring to help others,better worry about yourself before you throw shit to others, only allows people to leave forum.

Never said you are not helping ,or that sharing things is bad,even not yours

 

just mentioned this fact :P

[Warmaster™]

nice guide bro

 

usefull for newbies :)

[Intrepid]

1st wrong section

2nd its useless because nobody use IE 6 anyway

[TonyRadeoN]

awesome o.O /joke hehe ;P

 

nice but useless

[CrystaleK]

nice guide but i dont know who use IE :))

[Panagos.Kallithea]

Very good man!!!

[+cs.tribal]

Good one! But i have read some really better in web when i was searching for something like that!...

anyways. it's wrong section!

[VeNoM™]

Lol, Crap sh1* Nice dude, i really thanks you for this