how to make a site like this in css

[tali96]

whats the best way to design a site that looks like the attatchment? i am a noob and need a little help. thanks

[grumpyoldtechs]

google the CSS box model.

also I would use absolute positioning and have the image of the house as a layer over the header. and the header being a gradient which is a 1px wide gradient with background-repeat:repeat-x;

[tali96]

i am trying but i cant get the image to stay on top of the gradient..even when i use z positioning

[holyhttp]

First create a mainbox (#mainbox) set at a width equal to the total witdth of your web page:
#mainbox{
width:793px;
height: auto;
overflow:hidden;
background:url(path to the to background layer) repeat-x 0px;
position: relative;
top:10px ; /*redefine it yourself*/
left: 10px; /*redefine it yourself*/
}

#housebox{ /* contains the whole picture of the house */
position: absolute;
z-index:3;
width: 250px ; /* need to be ajusted to fit the house picture width */
height: 500px; /* need to be ajusted to fit the house picture height */
top:0px;
left:400px; /*redefine to position it on the right spot */
background:url(path to the house picture) repeat-x 0px;
}

#navigation { /* this will contain your links */
position: absolute;
width: 250px;
height: 100px; /* set to the same height as the top gradient bg */
top:0px;
left: 100px; /* redefine */
}

#pagecontent{
position: relative;
top: 110px; /* if top bg image height is about 100px */
left: 0px;
width: 450px;
height: auto;
overflow: visible;
}


Of course this is just a pointer as I do not mesure the positions of different elements in your mockup.
The white vertical line can be just a graphic inside the #navigation area.

Setting the #pagecontent to relative will allow you to position some of its content with "absolute";

Use this advice and work your way out. That's the best way to learn and gain experience.

Let us know how it goes.

[tali96]

thanks i will work with this...then i will show you all how it goes and what i had before.

[holyhttp]

Do not forget to make sue all the oher boxes (#navigation, #pagecontent) are part of mainbox. Something like this:

<DIV id="mainbox">
<DIV id="housebox">...</DIV>
<DIV if="navigation">...</DIV>
<DIV id="pagecontent">...</DIV>

</DIV>