Forum Moderators: buckworks

Message Too Old, No Replies

Auto Resize Website Body Width Based On Resolution?

         

olimits7

11:27 pm on Feb 16, 2010 (gmt 0)

10+ Year Member



Hi,

I'm currently using a <div> tag to set the width to 100% which works fine but I noticed that since it's a percentage as I make my browser window smaller everything on my website collapses instead of staying static.

Then when I set the width using a pixel (px) value; even if I make my browser window smaller the website content still remains in the same place...which is exactly what I want to happen.

However, setting a pixel (px) value based on my resolution is fine only for users who have the same resolution. If another user has a different resolution then the website doesn't show properly anymore.

Does anyone know of a way to auto resize your website based on a user's resolution setting?

Thank you,

olimits7

rachel123

1:19 am on Feb 17, 2010 (gmt 0)

10+ Year Member



in firefox you can use the min-width property. for IE you will need to use width.expression in your css to change the width (either % or px) based on the client width.

olimits7

1:37 am on Feb 17, 2010 (gmt 0)

10+ Year Member



Ok, I think I almost figured it out by using javascript and css.

I created a javascript file called "styleSheetsbyResolution2.js" with the following:

// JavaScript Document
var winW = 0, winH = 0;

if (parseInt(navigator.appVersion)>3) {
if (navigator.appName=="Netscape") {
winW = window.innerWidth-16;
winH = window.innerHeight-16;
}
if (navigator.appName.indexOf("Microsoft")!=-1) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
}
if (winW <= 1600) {
document.write('<link rel="stylesheet" type="text/css" href="1600.css">');
}
if (winW <= 1280) {
document.write('<link rel="stylesheet" type="text/css" href="1280.css">');
}
if (winW <= 1024) {
document.write('<link rel="stylesheet" type="text/css" href="1024.css">');
}
if (winW <= 800) {
document.write('<link rel="stylesheet" type="text/css" href="800.css">');
}
if (winW <= 640) {
document.write('<link rel="stylesheet" type="text/css" href="640.css">');
}


I then created a *.css file for each resolution size; for example:


/* CSS Document */
#styleSheetsbyResolution2 {
text-align: center; margin: 0; width: 1024px;
text-align: center; margin: 0px auto; width: 1024px;
}


And then in my header of my website I added the following:


<script type="text/javascript" src="styleSheetsbyResolution2.js"></script>

<div id="styleSheetsbyResolution2">


My only issue now is I checked my current computer's resultion and I'm currently at 1024 x 768; this is why I used 1024px in my 1024.css file.

However, when I refresh my website I'm seeing a horizontal scroll bar because the website is still slightly too large for 1024px.

Shouldn't 1024px be the perfect pixel size for a 1024 x 768 resolution?

I don't understand why my website is still slighly larger than the IE window.

Thank you,

olimits7

rachel123

3:24 am on Feb 17, 2010 (gmt 0)

10+ Year Member



oh boy - I think you made it way harder than it is. :)

body {
min-width: 1000px;
/*force horizontal scroll for widths <1000*/
width:expression(document.body.clientWidth < 1000 ? "998px" : "auto" );
/*set min-width for ie*/
}