Fitting web pages within the computer screen

[Php Beginner]

Hi there,

I have a couple of web pages created but when I am previewing them in internet browser, the web pages somehow not fitting the screen when I trying to display them with different pc.

Meaning to say, if I create web page using larger screen pc and the webpage cant be fully preview when using a smaller screen pc. How can I make my web pages fit the screen flexibly?

[samanime]

There are a couple different approaches. You can either used a smaller fixed width layout, or use a fluid layout.

However, all of those related to CSS, so I'll move this thread over there.

[RyanReese]

You'll find these articles extremely helpful

http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
http://www.smashingmagazine.com/2008...e-future/?cp=6

[ralph.m]

How can I make my web pages fit the screen flexibly?

The easiest way is not to use CSS at all.

[deathshadow60]

Without seeing the page in question and the code used to build it, we're guessing wildly as to the problem though it SOUNDS like you have what's called a "fixed width layout" - possibly from having some photoshop jockey drawing pretty pictures of a website then having the cojones to call themselves a "web designer." -- it is entirely likely the 'for screen' layout was designed without thinking about the possibility of it even HAVING different size screens, different device capabilities, or leveraging the entire reason HTML exists. FOR SOME WEIRD REASON people insist on thinking about the magical combination of screen size, OS, and available fonts/font sizes sitting in front of them, completely missing the POINT of HTML... and the people drawing pretty pictures and calling them web sites top the list of those making that mistake; resulting in broken websites that are quite often inaccessible and ultimately useless to visitors.

Basically, it's likely built wrong using flawed methodologies -- and probably has to be thrown out and started over.

But again, that's a wild guess and could be far, far off the mark without actually seeing the page in question. It is an educated guess, but still just pulling a conclusion out of one's rump without all the facts needed to give you any real answers.

We'd have to see it to say what's truly wrong with it.

[Php Beginner]

Here's one of many of my pages:

<?php require_once('Connections/connection.php'); ?>

<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}
?>
<?php
// *** Validate request to login to this site.
if (!isset($_SESSION)) {
  session_start();
}

$loginFormAction = $_SERVER['PHP_SELF'];
if (isset($_GET['accesscheck'])) {
  $_SESSION['PrevUrl'] = $_GET['accesscheck'];
}

if (isset($_POST['admin_id'])) {
  $loginUsername=$_POST['admin_id'];
  $password=$_POST['password'];
  $MM_fldUserAuthorization = "student_id";
  $MM_redirectLoginSuccess = "manage_student.php?student_id=$loginUsername";
  $MM_redirectLoginFailed = "index.php?error=e";
  $MM_redirecttoReferrer = true;
  mysql_select_db($database_connection, $connection);
      
  $LoginRS__query=sprintf("SELECT student_id, student_pass, student_id FROM student WHERE student_id=%s AND student_pass=%s",
  GetSQLValueString($loginUsername, "int"), GetSQLValueString($password, "text")); 
   
  $LoginRS = mysql_query($LoginRS__query, $connection) or die(mysql_error());
  $loginFoundUser = mysql_num_rows($LoginRS);
  if ($loginFoundUser) {
    
    $loginStrGroup  = mysql_result($LoginRS,0,'student_id');
    
    //declare two session variables and assign them
    $_SESSION['MM_Username'] = $loginUsername;
    $_SESSION['MM_UserGroup'] = $loginStrGroup;          

    if (isset($_SESSION['PrevUrl']) && true) {
      $MM_redirectLoginSuccess = $_SESSION['PrevUrl'];    
    }
    header("Location: " . $MM_redirectLoginSuccess );
  }
  else {
    header("Location: ". $MM_redirectLoginFailed );
  }
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FENG Mentor Mentee System</title>


<script type="text/javascript" src="image/swfobject.js"></script>
<script type="text/javascript" src="image/prototype.js"></script>
<script type="text/javascript" src="image/scriptaculous.js"></script>
<script type="text/javascript" src="image/effects.js"></script>
<script type="text/javascript" src="image/lightbox.js"></script>
<link rel="stylesheet" href="image/lightbox.css" type="text/css" media="screen">

<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationPassword.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationPassword.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="image/clogo.PNG" type="image/x-icon"/>


</head>

<body background="image/background.jpg">
<!-- BodyFrame -->
<table width="1250" border="0" align="center" cellpadding="0" cellspacing="0">

    <!-- Banner -->
    <tr>
    <td width="1250" height="120" align="center" valign="top"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1250" height="120" id="FlashID" title="banner">
      <param name="movie" value="banner.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="6.0.65.0" />
      <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="banner.swf" width="1250" height="120">
        <!--<![endif]-->
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="6.0.65.0" />
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
        <div>
          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
        </div>
        <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </object></td>
    </tr>
    <!-- Banner -->
    
    <!-- TopBorder -->
    <tr>
    <td width="1250" height="30"  background="image/Header.png"><strong style="color: #FFF;">&nbsp;&nbsp;&nbsp;Welcome to Mentor Mentee System of Faculty of Engineering</strong></td>
  </tr>
    <!-- TopBorder -->

    <!--BodyMenuOut-->
    <tr>
    <td>
    <table width="1250" align="center" valign="top">

    <!--BodyMenuIn-->
    <tr>

        <!--BodyMenuLeft-->
        <td width="410" align="center" valign="top">                            
            <table width="420" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="420" height="18">
                        <!--BorderGray-->
                        <table width="420" border="0" align="center" cellpadding="0" cellspacing="0">
                            <tr>
                                <td width="420" height="23"  style="font-size: 12px"></td>
                            </tr>
                        </table>
                        <!--BorderGray-->
                    </td>
                <tr><!--XXX-->
                    <td width="420" align="left" valign="top">
                        <form action="<?php echo $loginFormAction; ?>" method="POST" name="frmLogin" id="frmLogin" style="font-size: 12px;">
                        <table width="420" border="0" align="center" cellpadding="0" cellspacing="0">
                            <!--StudentLecturer-->
                            <tr>
                                <td height="32" colspan="4">
                                <strong>&nbsp;
                                <a href="login_admin.php"style="color:#FFFFFF; font-size: 13px">Administrator</a> | <a href="login_lecturer.php" style="color:#FFFFFF; font-size: 13px">Lecturer</a></strong></td>
                            </tr>
                            <!--StudentLecturer-->
                            <!--LoginStudent-->
                            <tr>
                                <td height="23" colspan="4"> <strong style="color: #FFD700; font-size: 13px;">&nbsp;&nbsp;&nbsp;Login Student</strong></td>
                            </tr>
                            <!--LoginStudent-->
                            <tr>
                                <td height="6" colspan="4"></td>
                            </tr>
                            <!--UserID-->
                            <tr>
                                <td width="40" height="23"></td>
                                <td width="75" height="23"><strong style="color: #FFFFFF; font-size: 12px;">UserID</strong></td>
                                <td width="15"><strong style="color: #FFFFFF; font-size: 12px;">:</strong></td>
                                <td width="290" style="font-size: 12px">
                                <span id="sprytextfield1">
                                <label>
                                    <input style="font-family: Verdana, Geneva, sans-serif; font-size: 11px; color: #009;" name="admin_id" type="text" id="admin_id" size="11" maxlength="100" />
                                </label>
                                </span>
                                </td>
                            </tr>
                            <!--UserID-->
                            <!--Password-->
                            <tr>
                                <td width="40" height="23"></td>
                                <td width="75" height="23"><strong style="color: #FFFFFF; font-size: 12px;">Password</strong></td>
                                <td width="15" height="23"><strong style="color: #FFFFFF; font-size: 12px;">:</strong></td>
                                <td width="290" style="font-size: 12px">
                                <span id="sprypassword1">
                                <label>
                                    <input style="font-family: Verdana, Geneva, sans-serif; font-size: 11px; color: #009;" name="password" type="password" id="password" size="11" maxlength="100" />
                                </label>
                                </span>
                                </td>
                            </tr>
                            <!--Password-->
                            <tr>
                                <td height="6" colspan="4"></td>
                            </tr>
                            <!--LoginButton-->
                            <tr>
                                <td height="21" colspan="3"></td>
                                <td width="290" height="21">
                                <label>
                                    <input type="image" src="image/button_login.gif" name="Login" id="Login" value="Login" />
                                </label>
                                </td>
                            </tr>
                            <!--LoginButton-->
                        </table>
    
                        <!--InvalidUser-->
                        <?php if(isset($_REQUEST['error']) && ($_REQUEST['error']== 'e')) { ?>
                        <table width="300" border="0" align="left" cellpadding="0" cellspacing="0">
                            <tr>
                                <td width="300" height="5" colspan="2"></td>
                            </tr>
                            <tr>
                                <td width="40" height="3"></td>
                                <td width="260" height="3"></td>
                            </tr>
                            <tr>
                                <td width="40" height="20"></td>
                                <td width="260" height="20" style="color:#C00; text-align:center; font-weight: bold; font-size: 12px;">Invalid UserID or Password !!!</td>
                            </tr>
                            <tr>
                                <td width="40" height="20"></td>
                                <td width="260" height="20" style="color:#C00; text-align:center; font-weight: bold; font-size: 12px;">Please Try Again !!!</td>
                            </tr>
                            <tr>
                                <td width="40" height="3"></td>
                                <td width="260" height="3"></td>
                            </tr>
                        </table>
                         <!--InvalidUser-->
                        <?php }?>
                        </form>
                    </td>
                </tr>
            </table>
        </td>
        <!--BodyMenuLeft-->

        <!--BodyMenuRight-->
        <td width="828" align="center" valign="top">
            <table width="818" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td height="23" colspan="3" align="center"><strong style="font-size: 14px; color: #E0FFFF;">Student Session</strong></td>
                </tr>
                <tr>
                    <td height="32" align="right" colspan="3"><strong style="color: #FFD700;">Date: </strong><strong style="font-size: 12px; font-weight: normal; color: #FFFFFF;"><?php
echo date("l, d-m-Y");
?></strong>  <strong style="color: #FFD700;">Time: </strong><strong style="font-size: 12px; font-weight: normal; color: #FFFFFF;"><?php
date_default_timezone_set('Asia/Singapore');
echo date('h:i A'); 
?></strong></td>
                </tr>
                <tr>
                    <td width="37" rowspan="3"></td>
                    <td width="744" height="6"></td>
                    <td width="37" rowspan="3"></td>
                </tr>
               <tr align="center">
                    <td width="744"><p class="style32" align="left"><span style="color: #000; font-weight: bold; font-size: 12px;font-weight: bold; color: #FFD700;">Welcome to Mentor Mentee System - Student Session</span></span></p>
                      <p style="font-size: 12px; text-align: justify; font-weight: normal; color: #FFFFFF;">In this session, student's can fully access their own personal information and make necessary  amendments  when needed.</p>
                  <p style="font-size: 12px; text-align: justify; font-weight: normal;color: #FFFFFF;">At the same time, student's can view their  academic information and academic progress along with a bar graph for each  academic session that they have completed thus far.</p></td>
                </tr>
                <tr>
                  <td width="744" height="6"></td>
                </tr>
                <tr>
                    <td height="32" colspan="3">&nbsp;</td>
                </tr>
            </table>
        </td>
        <!--BodyMenuRight-->

    </tr>
    <!--BodyMenuIn-->

    </table>
    </td>
    </tr>
    <!--BodyMenuOut-->

</table>
<!-- BodyFrame -->

<!-- BottomBorder -->
<table width="1250" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td width="1250" height="23"></td>
    </tr>
    <tr>
      <td height="23"></td>
    </tr>
    <tr>
      <td height="23"></td>
    </tr>
    <tr>
      <td height="23"></td>
    </tr>
    <tr>
        <td width="1250" height="23"></td>
    </tr>
    <tr>
        <td width="1250" height="23"></td>
    </tr>
    <tr>
        <td width="1250" height="500" align="center" valign="top" style="font-size: 10px;">
        <strong style="font-style: italic; color: #FFFFFF; font-weight: bold;">Faculty of Engineering Mentor Mentee</strong>
        <strong><a href="login_admin.php" style="font-style: italic; color:#FFFFFF; font-weight: bold;">System</a></strong>
        <strong style="font-style: italic; color: #FFFFFF;"> @ Copyright 2012</strong><br />
        <strong style="font-style: italic; color: #FFFFFF;">Designed by Kuan Ee Liang</strong><br />
        <strong style="font-style: italic; color: #FFFFFF;">Revised by Dr Mohd Saufee Muhammad</strong></td>
    </tr>
</table>
<!-- BottomBorder -->

<script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1");
var sprypassword1 = new Spry.Widget.ValidationPassword("sprypassword1");
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>

The page is slightly larger than the screen of my laptop as I am using my larger screen desktop to design this page. I want to make an adjustment so that every pc can view this page without need the horizontal slider.

[deathshadow60]

Ooph, that's painfully bad. Most of your 'issue' is right here:

width="1250"

Fixed width -- fixed widths will NEVER fit all displays properly regardless of what number you throw in there. It's a broken sitebuilding methodology that while many "designers" will tell you is fine, as you just encountered, well... no it isn't. Throws the entire concept of accessibility out the window.

But that's just the tip of the iceberg in terms of your 'issues' -- tables for layout? That's a method that has no business being even ON a website for over a decade. Inlined style? Strong on elements that there's no reason to be emphasizing? Inlined presentational CSS? illegibly small fixed metric (px) fonts? Attributes like BACKGROUND and BORDER that aren't even valid in modern documents? Empty table rows doing padding's job? Of course all that SPRY bull and annoying scripting bloat isn't helping matters either.

I'd have to see the page live, but I'd axe the stupid flash banner thing for a constructed set of static images so it can be fluid width (another of those "not viable for web deployment" concepts), lose ALL of the tables since none of them seem to serve any purpose besides wasting markup on nothing, swing an axe at all the annoying bloated scripting, and on the whole drag the markup kicking and screaming into THIS decade... instead of two decades ago as your tranny doctype is proclaiming for all to see.

I'd not even try to make sense of that gibberish apart from saying throw it out and start over again with semantic markup, separation of presentation from content, and coding methodologies that are slightly less than a decade out of date... losing the flash and all the scripting for nothing in the process as to be brutally frank, there's nothing there I'd even try to salvage.

Without seeing it live I couldn't even fathom a guess as to what the proper markup for that content would be. I'd suspect that the "welcome to mentor" text should be a h1, but I could be wrong depending on what that flashtard thing is... the table following it has so many unneccesary elements I can't even fathom a guess as to what's what on the page, though I do end up wondering where your fieldset and labels are if this is supposed to be a form...

Ok, guessing COMPLETELY wild, there's little reason for your markup to be a whole lot more than:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<link
	rel="shortcut icon"
	href="image/clogo.PNG"
/> 

<title>
	FENG Mentor Mentee System
</title> 

</head><body>

<div id="pageWrapper">

	<!--[if IE]>
		<object
			classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			width="1250" height="120"
			id="FlashID"
			title="banner"
		> 
	<![endif]-->
	<!--[if !IE]>--> 
		<object
			type="application/x-shockwave-flash"
			data="banner.swf"
			id="FlashID"
			width="1250" height="120"
		> 
	<!--<![endif]-->	
		<param name="movie" value="banner.swf" /> 
		<param name="quality" value="high" /> 
		<param name="wmode" value="opaque" /> 
		<param name="swfversion" value="6.0.65.0" /> 
		<param name="expressinstall" value="Scripts/expressInstall.swf" /> 
		<p>
			Content on this page requires a newer version of Adobe Flash Player.
		</p><p>
			<a href="http://www.adobe.com/go/getflashplayer">
				<img
					src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
					alt="Get Adobe Flash player"
					width="112" height="33"
				/>
			</a>
		</p> 
	</object>
	
	<h1>
		Welcome to Mentor Mentee System of Faculty of Engineering
	</h1>
	
	<form
		action="<?php echo $loginFormAction; ?>"
		method="POST"
		name="frmLogin"
		id="formLogin"
	>
		<ul>
			<li><a href="login_admin.php">Administrator</a></li>
			<li><a href="login_lecturer.php">Lecturer</a></li> 
		</ul>
		<fieldset>
			<legend>Login Student</legend>
			<label for="admin_id">User ID :</label>
			<input
				type="text"
				name="admin_id"
				id="admin_id"
				size="11"
				maxlength="100"
			/><br />
			<label for="password">Password :</label>
			<input
				name="password"
				type="password"
				id="password"
				size="11"
				maxlength="100"
			/>
			<input
				type="submit"
				class="submit"
				value="Login"
			/> 
		</fieldset>
<?php
	if(isset($_REQUEST['error']) && ($_REQUEST['error']== 'e')) { 
		echo '
			<div class="errorBox">
				<h2>Invalid UserID or Password !!!</h2>
				<p>Please Try Again !!!</p>
			<!-- .errorBox --></div>';
	}
?>
	</form>
		
	<div id="content">
	
		<!-- not sure if what this is, heading? just some random text?!? -->
		<div class="sessionType">Student Session</div>
		
		<div class="dateTime">
			<b>Date:</b> <?php echo date("l, d-m-Y"); ?>
			<b>Time:</b> <?php date_default_timezone_set('Asia/Singapore'); echo date('h:i A');	?>
		</div>
		
		<h2>Welcome to Mentor Mentee System - Student Session</h2>
		<p>
			In this session, student's can fully access their own personal information and make necessary	 amendments	 when needed.
		</p><p>
			At the same time, student's can view their	 academic information and academic progress along with a bar graph for each	 academic session that they have completed thus far.
		</p>
		
	<!-- #content -->
		
	<div id="footer">
		Faculty of Engineering Mentor Mentee
		<a href="login_admin.php">System</a>
		&copy; 2012<br />
		Designed by Kuan Ee Liang><br /> 
		Revised by Dr Mohd Saufee Muhammad
	<!-- #footer --></div>
	
<!-- #pageWrapper --></div>

</body></html>

Though that's a wild guess as to be honest, I can't even figure out what/where half of what's on that page is even supposed to go. EVERYTHING else you are trying to do belongs in an external stylesheet, or doesn't belong on a website at all if you actually care about people being able to use it. SPRY and flash just being the tip of the iceberg when you have tables for layout, fixed widths on everything, and elements that I couldn't even figure out what they were so as to be able to apply the proper markup to them.

Even with that rewrite, that still leaves making the layout in CSS, and even running what you had locally I couldn't figure out what it was that was being attempted.

Oh, and the @ sign is not a copyright symbol... and if you meant it to be such, then you were saying copyright copyright, which is a bit redundant.