How to set page size

@jigneshjsoniNov 16.2011

Native resolution of my computer screen is 1600 x 900
When I am trying to create an HTML page, its coming in this resolution of 1600 x 900
If I want the resolution of HTML page to be smaller, how can I do that ? If I want resolution to be 1280 x 720, where can I code this ?

Thanks

to post a comment

HTML

4 Comments(s) _↴

@Sup3rkirbyNov 16.2011 — #I don't think I'm entirely clear on what you are asking, but I'll take a guess.

On the most basic level, controlling the size of your webpage can be done by altering the styling of the document's body itself. You could try something like adding a little css(in to the <head> tag of the page).

[CODE]
 <style type="text/css">
 body {
 width: 1280px;
 height: 720px;
 }
 </style>
 [/CODE]

Of course you aren't really going to notice if you are using say, a white background with your browser full screen. Naturally the page itself is going to expand to fit your browser. Setting a width and height simply restrict the content within the webpage from expanding as well. The code above will set an absolute width and height which could prove to be a problem for browsers that are smaller than those bounds. In this case you may want to use '[I][COLOR="Teal"]max-width[/COLOR][/I]' and '[I][COLOR="Teal"]max-height[/COLOR][/I]' instead as it will allow the page to contract and expand, but only up to your maximum value.

Other methods depend on your template. For instance if you are using a <div> as your content area you would simply specify a size for that <div> to prevent it from being too big(or too small).

@KorNov 16.2011 — #Native resolution of my computer screen is 1600 x 900

When I am trying to create an HTML page, its coming in this resolution of 1600 x 900[/QUOTE]
No, unless you set that size by all means. And it is not true when it comes about the height.

By default, the BODY element of a document will take automatically the width 100%, thus in a 1280x720 display, it will take the width 1280px, and so on.

And the height is independent on the resolution. It will be the sum of the height of all the block non-floated (or the biggest if they are floated on the same row) elements, and if they are included in their parents' overflow.

@jigneshjsoniauthorNov 17.2011 — #I have been able to get page in center of screen using

&lt;style type="text/css"&gt;
 body {
 text-align: center;
 }
 
 <i>	</i>	#all {
 <i>	</i>			 margin: 0 auto;
 <i>	</i>			 width: 800px;
 <i>	</i>			}
 <i>	</i>	&lt;/style&gt;

With this code, image in the first line and text in second line also get aligned to center. When I use following code, text in third line gets aligned to the right of image in first line.

I need image in first line aligned to right of web page and space besides image shall be empty. In next line, image should be aligned to right of page and space to right of it should be empty. With this code, everything dcomes in one line only.

&lt;html&gt;
 &lt;head&gt;
 
 <i>	</i>	&lt;style type="text/css"&gt;
 <i>	</i>	body {
 <i>	</i>	 text-align: center;
 <i>	</i>	}
 
 <i>	</i>	#all {
 <i>	</i>			 margin: 0 auto;
 <i>	</i>			 width: 800px;
 <i>	</i>			}
 <i>	</i>	&lt;/style&gt;
 <i>	</i>	&lt;script type="text/javascript"&gt;
 <i>	</i>		function defaultDisplay(){
 
 <i>	</i>			document.getElementById('111').style.visibility = 'hidden';
 <i>	</i>			document.getElementById('222').style.visibility = 'hidden';
 <i>	</i>			document.getElementById('333').style.visibility = 'hidden';
 <i>	</i>		}
 
 <i>	</i>		function working(){
 
 <i>	</i>		 		 var s = document.getElementById("menu1");
 
 <i>	</i>				 if (s.options[s.selectedIndex].value=="eating"){
 
 <i>	</i>						 document.getElementById('111').style.visibility = 'visible';
 <i>	</i>						 document.getElementById('222').style.visibility = 'hidden';
 <i>	</i>						 document.getElementById('333').style.visibility = 'hidden';
 <i>	</i>						}
 
 <i>	</i>				else {
 <i>	</i>						if (s.options[s.selectedIndex].value=="tv"){
 <i>	</i>							 document.getElementById('111').style.visibility = 'hidden';
 <i>	</i>							 document.getElementById('222').style.visibility = 'hidden';
 <i>	</i>							 document.getElementById('333').style.visibility = 'visible';
 <i>	</i>							}
 
 <i>	</i>						else {
 <i>	</i>							 document.getElementById('111').style.visibility = 'hidden';
 <i>	</i>							 document.getElementById('222').style.visibility = 'visible';
 <i>	</i>							 document.getElementById('333').style.visibility = 'hidden';
 <i>	</i>						}
 
 
 <i>	</i>		 			}
 <i>	</i>			}
 <i>	</i>	&lt;/script&gt;
 <i>	</i>&lt;/head&gt;
 <i>	</i>&lt;body onload="defaultDisplay()"&gt;
 <i>	</i>&lt;div id="all"&gt;
 <i>	</i>	&lt;div id="header" width="800"&gt;
 
 <i>	</i>	&lt;h3 align="left"&gt;Following is left image&lt;/h3&gt;
 <i>	</i>			&lt;img src="C:UsersgnDesktopPics &amp; MoviesIMG_4606.jpg" ¸width="300" height="200" align="left"/&gt;
 
 <i>	</i>	&lt;/div&gt;
 
 <i>	</i>	&lt;div id="middle"&gt;
 
 <i>	</i>			&lt;p&gt;Lets see if this image has been aligned to right or not&lt;/p&gt;
 
 <i>	</i>	&lt;h3 align="right"&gt;Following is Right image&lt;/h3&gt;
 
 <i>	</i>				&lt;p&gt;&lt;img id="111" style="float:right" src="C:UsersgnDesktopPics &amp; MoviesIMG_5118.jpg" ¸width="200" height="135" /&gt;&lt;/p&gt;
 <i>	</i>				&lt;p&gt;&lt;img id="222" style="float:right" src="C:UsersgnDesktopPics &amp; MoviesIMG_4729.jpg" ¸width="200" height="135" /&gt;&lt;/p&gt;
 <i>	</i>				&lt;p&gt;&lt;img id="333" style="float:right" src="C:UsersgnDesktopPics &amp; MoviesIMG_4606.jpg" ¸width="200" height="135" /&gt;&lt;/p&gt;
 
 <i>	</i>	&lt;p&gt; Select image for display on right&lt;/p&gt;
 
 
 <i>	</i>	&lt;select id="menu1" onchange="working()"&gt;
 <i>	</i>				&lt;option value="noimage"&gt;Select Image&lt;/option&gt;
 <i>	</i>				&lt;option value="eating"&gt;eating&lt;/option&gt;
 <i>	</i>				&lt;option value="tv"&gt;watching &lt;/option&gt;
 <i>	</i>				&lt;option value="biting"&gt;Biting &lt;/option&gt;
 <i>	</i>	&lt;/select&gt;
 <i>	</i>	&lt;/div&gt;
 <i>	</i>&lt;/div&gt;
 
 <i>	</i>&lt;/body&gt;
 &lt;/html&gt;

@Sup3rkirbyNov 17.2011 — #If I understand you correctly then you are going to want to use the 'display' attribute instead of 'visibility'.

[CODE]
 document.getElementById('111').style.display = 'none';
 document.getElementById('222').style.display = 'inline';
 document.getElementById('333').style.display = 'none';
 [/CODE]

The 'visibility' attribute simply hides elements within the document, but the elements themselves still exist and thus take up the same space they normally would if you were able to see them. The 'display' attribute completely removes an element from the document and so all space that it takes up is now free and the document adjusts.

Also in #HTML _↴

Slow Flashing Effect?To go back to the page you were on [RESOLVED] Which Scripting Language

Success!

Help @jigneshjsoni spread the word by sharing this article on Twitter...

Tweet This

How to set page size

4 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

How to set page size

4 Comments(s) ↴

Also in #HTML ↴

Success!

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

Social

Version

4 Comments(s) _↴

Also in #HTML _↴