I've made this design in photoshop and now it comes to code it and I'm not entirely sure where to start as I'm still a beginner.

 

A pointer to any tuts including similar layouts would be great.

 

The header image of the building is seperate to the clouds. Do I need to have them on seperate layers to center the whole thing as the clouds image is wide (1420px)so it fills most monitors. I'd rather clouds and pub stay together?

 

And the footer: should I use a gradient for the blue as a background image then split the rest into two halfs, top and bottom so the text in the 3 columns can push the whole footer down the page, I'm pretty stumped on this?

 

I'm o.k. with the navigation matrix as I've read up on this and implemented it into the current site (this is a re-design and my will be my second coded site).

 

cheers party people

t.c.

To center an image <img src="..."> or div or any other element, use a width and margin: 0 auto; where the auto margins will be equal and therefore center the element. If it's inside a header div:

#header { width: ??px; margin: 0 auto; }

 

<div id="header">
<img src="image.jpg" alt="description"/>
</div>

 

For a background-image in the body (or inside a div) use

body { background-image: url(image.jpg); background-position: top center; }

 

or the short code

body { background: url(image.jpg) top center; }

 

then the images and background will marry up.