need help with display

[zed420]

Hi All

 

Can some please put me in right direction I've created my first site, the problem is when you change the monitor resolutions it doesn't streach with it. It's seems fine at 1024 x 768 but if you change the reslustion to 1080 x 1024 there quite a lot of empty space on right side, Why ????  I've created two big divs and kept all others inside them.

 

#banner { 
	position: relative;
	height: 150px;
	width: 986px;
}
#main { 
	position: relative;
	height: 19cm;
	width: 26.2cm;
}

[Sverri]

It is because you are using pixels ('px'). Pixels are a precise measurement, much like centimeters are. Pixels will not strech if you change the resolution, so 100px will always be 100px no matter what resolution you are using.

 

What you need is to use either percentages (%) or not set the width at all, in which case the browser will figure it out itself.

 

You could do it like this with percentages:

 

#banner { 
	position: relative;
	height: 150px;
	width: 80%;
                        margin-left: 10%;
                        margin-right: 10%;
}
#main { 
	position: relative;
	height: 19cm;
	width: 20%;
}

 

The above code is just an example. You will need to adjust the numbers yourself.

 

If you do not set the width yourself, you can instead give BODY some left and right padding:

 

body { 
	padding-left: 5%;
	padding-right: 5%;
}

 

Also: You should not use centimeters ('cm') in your stylesheets. They should only be used in stylesheets for printers. Instead you can use: px, em, ex and %.

[zed420]

Sverri Thank you very much that was a greate help

 

Zed