View Full Version : Web Page Size

02-16-2008, 04:37 PM
Hi I'm Trying to set a Web Page to be able to View @ 480 and 272 , is so people can view it on PSP , Could you please show me some code on how to do this , I'm fairly new to HTML & CSS and could really use the help .........

02-16-2008, 05:20 PM
You can set the height and width on your body and html div's but you cannot influence the resolution set by the person viewing. They in turn are only able to use the resolution settings of their monitors.

Why do you need to do this?


02-16-2008, 05:29 PM

<style type="text/css">body {width:480px;}</style>


Content Here



The body will this fix itself to 480 pixels wide.

You can't fix the height unless you put the content of the page inside one div, but making it a set height won't allow much room for content.


<style type="text/css">body {width:480px;}

#Gwhole {width:480px; height:272px;}</style>


<div id="Gwhole">
Content Here</div>



I'm not exactly sure of what you want. If you want a page viewable on the psp without scrolling left / right, but want users to scroll down/up, then use code 1.

If you want a page viewable on the psp without scrolling AT ALL. Then use code 2.

BUT, if you want people to view it from the psp AND the computer with the sizes increasing for computer, and then decreasing for psp. then you cannot. Sorry

02-16-2008, 05:33 PM
It would be good if you showed us what you have so far.

Now, I suppose a PSP goes through as handheld device, and hence it should render stylesheets declared as such. You can write different stylesheets for different devices and apply different sizes in each:

<!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-US" xml:lang="en-US">
<title>Website Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
<link rel="stylesheet" href="handheld.css" type="text/css" media="handheld" />
<div id="container">
[your content here]

In screen.css you would write:

#container {width: 800px;}

and in handheld.css you could write:

#container {width: 450px;}

and it would be displayed accordingly in each device.