Welcome to Gaia! ::

That's a pretty easy layout to make. I can feed you code right now if need be.

Do you want just the CSS styles or a full-blown HTML and CSS package?

Okay. Here Goes. This might come off as amateur for some people, but it's how I was taught.

CSS:

#container {width:1024px;}

#banner {width:1024px;
height:150px;
background-image: url(insert pic url here);}

#nav-horizontal {width:1024px;
height:50px;
background-color: #hexnumber;
background-image: url(insert url here);}

#nav-vertical {width: 100px;
height: 300px;
background-color: #hexnumber;
background-image: url(insert url);}

ul {width: whatever width your navigation is;
height: whatever height nav is;
background-color: #hexnumber;
background-image: url(insert url);}

li {width: 30-50px; <-depends on the size of the links
height: 20-30px; <-same as previous attribute
font: whatever font you choose. Normally arial helvetica, or times new roman
font-size: --px; <---whatever size you want as long as it fits
color: #hexnumber;
float:left;}

#content {width: 500-600px; <-depending on the nav you choose
height: ---px; <- can be left blank to let the actual content rule the height.

If you know how to work divs in HTML, then make sure everything below the #container goes in between . The container holds page stuff together inside it.

All the px sizes I listed are simple, rough estimations. Feel free to play with the size for a better fitting look. Just make sure not to exceed the container size or else it looks weird.

Background image and background color are listed in the attributes for if you want either color or a picture as background. I advise against using them both at the same time. It might do something weird to the page. Choose one and delete the other when using them.

ul and li are if you are using a list to help make the navigation links. The float attribute makes the links float up to the top of whatever holds them and go left. If this does not work or acts weird, add float left to the ul. If it still acts weird, add float: left to the nav.

Also, the floating rule only applies to if you want to use the horizontal nav strip below the banner. If you are doing the other nav style for navigation, do not add float: left.

Content will probably be done last. I adivse you pic a size that fits into that space and leave out the height so that whatever text or picutres you have in the content div will determine how long the page will be.