Automatic page adjustment question

Hi guys,

I kinda want my website to look like this: http://img242.imageshack.us/img242/8544/leijgraaffj7.jpg

It doesn't matter which resolution you have, whether you use 1024 * 768 or 1280 *1024, I want my page to adjust itself to the resolution.

I heard that you'd have to work with percentages and position: absolute or something, but I'm kinda new to CSS and hopefully you guys can help me out.

This is my site, which hasn't been public released yet, cause it's still in beta: http://www.landerd.nl/site

The CSS code:

body {
font-family: verdana;
background: #A4A4A4;
}
#banner {
width: 800px;
height: 90px;
background-image: url(../images/banner800s.jpg);
background-repeat: no-repeat;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
}
.logo {
width: 113px;
height: 90px;
background-image: url(../images/logo2.png);
background-repeat: no-repeat;
float: left;
}
#menu {
width: 800px;
height: 30px;
background: #FFFAAD;
background-image: url(../images/logo3.png);
background-repeat: no-repeat;
color: black;
font-size: 10px;
font-family: verdana;
text-decoration: none;
text-align: right;
border-bottom: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
}
#content {
width: 800px;
height: 380px;
background-repeat: no-repeat;
background-color: #FFFBC6;
position: static;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
overflow: auto;
background-image: url(../images/cont.png);
background-attachment: fixed;
}
#footer {
width: 800px;
height: 25px;
background-color: #FFEC6C;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
font-family: verdana;
font-size: 10px;
background-image: url(../images/uitleg.png);
background-position: right;
background-repeat: no-repeat;
}

Hopefully you guys can help me out.
I'm looking forward to your reply, cause I'm stuck right now lol.

Thanks,

Daanh

 

You'll probably have to rework a few things but this is what I always do when in your situation...

I make a DIV with class 'site-container'...

<div class="site-container">
  content
</div>

Code (markup):

And use simple CSS to set the sizing and center it...

.site-container{
width: 85%;
margin: 0 auto;
}

Code (markup):

Setting margins this way will center a div no matter the resolution and the width of the div will always be 85% of the page (unless you size it narrower than any single object inside it).

Hope it helps.

 

Tnx for your reply, but I want my website to look good in the height just as the image I posted. I already took care of the top by adding: margin-top: 0px; in the body of the css, but I don't know how to get further.

 

It would seem you have an insufficient knowledge base. Work through some tutorials on html and css (Google is your friend). The tutorials at htmldog are especially good.

cheers,

gary

 

Create something similar using this online tool, then examine the CSS to see how they did it:

http://csscreator.com/?q=tools/layout

Hope this helps,
Paul