designing for different screen resolutions (800X600, 1024X768, etc.)

@DJsACSep 02.2006 — #you could insert a php & javascript that selects a certain stylesheet based on the users' resolution.

Here's one I used for one of my sites:

[code=php]<?php 
 print "<script type="text/javascript">
 <!--
 function writeCookie() 
 {
 var today = new Date();
 var the_date = new Date("December 31, 3005");
 var the_cookie_date = the_date.toGMTString();
 var the_cookie = "users_resolution="+ screen.width +"x"+ screen.height;
 var the_cookie = the_cookie + ";expires=" + the_cookie_date;
 document.cookie=the_cookie
 location = '".$_SERVER['REQUEST_URI']."';
 }";
 
 if (isset($HTTP_COOKIE_VARS["users_resolution"]))
 { $res = $HTTP_COOKIE_VARS["users_resolution"];
 print "			var php_screen_res = "".$res."";
 var js_screen_res = screen.width +"x"+ screen.height;
 if (js_screen_res != php_screen_res)
 {
 writeCookie();
 }
 //-->
 </script>";
 }
 else
 { 
 print "		writeCookie();
 //-->
 </script>
 " ;
 } 
 if(!isset($res))
 {
 $res = "0x0";
 $size = "Javascript is off";
 echo "n<link href="stylesheet_default.css" rel="stylesheet" type="text/css" />n";
 }
 list($res_width,$res_height) = explode("x",$res);
 switch (true) {
 case (($res_width != 0) AND ($res_width <= 800)):
 $size = "800 or lower";
 echo "n<link href="stylesheet_800.css" rel="stylesheet" type="text/css" />n";
 break;
 case (($res_width>800) AND ($res_width<=1024)):
 $size = "800 to 1024";
 echo "n<link href="stylesheet_1024.css" rel="stylesheet" type="text/css" />n";
 break;
 case (($res_width>1024) AND ($res_width<=1280)):
 $size = "1024 to 1280";
 echo "n<link href="stylesheet_1280.css" rel="stylesheet" type="text/css" />n";
 break;
 case ($res_width>1280):
 $size = "bigger than 1280";
 echo "n<link href="stylesheet_1600.css" rel="stylesheet" type="text/css" />n";
 break;
 }
 
 
  ?>[/code]

Just place it in the header and rename the page to .php

Another option is to make the page fluid. Don't use sizes in pixels, but use percentages or em's.

@Rossario123Sep 02.2006 — #correctly code your css layout.

use this a guideline to position each div element.

replace XX with a numerical value.

to center the page just make margin-left:-450px;

<i>
 </i>.MyClassSelector{position:absolute;left:50%;top:XXpx;margin-left:XXpx;z-index:XX;}

designing for different screen resolutions (800X600, 1024X768, etc.)

2 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

designing for different screen resolutions (800X600, 1024X768, etc.)

2 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #CSS _↴