PSD to HTML5/CSS

[TheN00b]

Hi Guys

Just to get my web design skills stronger, I have decided to tackle a PSD web layout and turn it into a perfectly valid HTML5 / CSS Layout.

I would greatly appreciate any help. Here is the layout:

http://i54.tinypic.com/2rdjjuu.jpg

As you can see, I have divided the layout in Photoshop. The coloured boxes are my proposed divs. Before I go and create the Divs in Coda, I want to know .. Is my division of the layout OK ? Can I make it better, easier to work with ?

I would greatly appreciate some help.

Thank You.

N00b

[Cyanoxide]

This seems like a good place to start, I would advise that you separate the two main content sections as well just for ease of access

make something similar to this

Over-header
Header
Feature
Main-content
additional-content
footer

I personally would make the header sections then footer then set out some space for the feature for later then add in the content and finish up with the feature. Hope that helps, you may need more divs as you go on but starting with these would be a good start.

[TheN00b]

Cool, I’ll do that now and get back with the result.

Cya Later :D

[TheN00b]

Hi Cyanoxide

I am BACK ! :) Here are the divs. Do they look OK ? is there anything that needs changing ?

The next thing that I want to do is center the web page, while at the same time having bits that extend outwards ! if that makes sense.

e.g. the { #overhead } needs to be full width, but the text within { #overhead } needs to be where it is Here in the layout.

I’d greatly appreciate some help.

Thank you.

[skielbasa]

As a fan of utility classes, I would make a wrapper class and apply it to the content you want centered.

Something like:

css



.page-wrap { width: 960px; margin: 0 auto; }



html







Grapfpedia




...

and so on.

[TheN00b]

So every single thing that I want centered, I would give it the { .page-wrap } class ??

I’m sure there was a way where I would only apply a style to a wrapper div and it will centre the whole thing ! though I can’t remember the code :(

[skielbasa]

Not everything so to speak just a wrapper in each section. Depending on how you do your backgrounds you could get away with 2 or 3 wrappers. The way I described it you would need 5, which I know is more code, but makes the most sense to me and gives a bit more flexibility.
Also, it’s the same code for the single wrapper, its just how its used if that makes any sense the margin: 0 auto; is whats doing the centering (needs a width to work obviously).

[virtual]

margin: 0 auto;
is what you are looking for to center, and also give it a width.

What srkD is saying is to put the larger bg image within a centered wrapper say #grafpedia, then within that div put another div say #maincontent with bg image, which you also center relative to its containing div.

Read this it might help you
http://css-discuss.incutio.com/wiki/Centering_Block_Element

[TheN00b]

Hello Virtual I missed ya :D

How come the forum has changed by the way ? It is like a Complex Commenting System now !!

Anyways here is what I have done:

CSS:

#wrap {



text-align: left;

width: 1220px;

margin: 0 auto;



}

Result:

ScreenShot

Is that OK ? I mean is it a good way of achieving the goal ? Also Is the Width a sensible value ?

[jamygolden]

It looks good to me.

Websites default the text-align to left so you can leave that out. Also, why the 1220px width? 960px – 980px would be fine for 1024×760 monitors.

Note: You have closed off the body element with </div>.

[TheN00b]

Thanks for that Jamy-Za

Here is what I have so far:

http://www.webpagescreenshot.info/img/5335-96201090916PM

Before moving on .. do you see anything wrong ? anything that I can do in a better way ?

Can someone tell me how I can do the bottom (transparent) bit of the [ #feature ] block please :( I know it’ll have to be CSS3 but I don’t know what code to use :(

Thanks

[Bob]

You can either create a gradient image in photoshop, or indeed use CSS3 gradients.

[TheN00b]

Hi Bob

There is no gradient for the bit that I am talking about ! It is just a transparent black bar !

Where it says { Premium, Graphics, Tutorials ..etc } … to the base of the iMac vector. That’s the bar I am talking about.

Isn’t there a way to get that with CSS3 ?

Thanks

[virtual]

I think this is what you are looking for
http://www.w3schools.com/Css/css_image_transparency.asp

[TheN00b]

Thanks Virtual it is looking a lot better.

I have uploaded the site to my server to make things easier.

The next thing I can’t figure out is how do I get these separators between my lists !

http://i53.tinypic.com/w8ot9j.png

I’d greatly appreciate any help.

Thanks

[Author]

Posts