PDA

View Full Version : How to set page size


jigneshjsoni
11-16-2011, 03:14 AM
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

domedia
11-16-2011, 04:13 AM
Hi.. Let me call you Johnson ;-) and welcome to the forum!

If you want a fixed width, which many of us prefer in order to make things simple, you can put your web site inside a DIV that is 1200 pixels wide.

HTML:
<div id="wrapper">
All content here
</div>

CSS:
#wrapper {
margin: 0 auto;
width: 1200px;
}

jigneshjsoni
11-16-2011, 08:53 PM
Thanks.
It did work to reduce the width of page. But it stays aligned to left. I want to keep it in center. I have tried
#wrapper {
margin: 0 auto;
align="center"
width: 1200px;
}
But that did not work. I tried align attribute <div id="wrapper" align="center">, b ut that did not work either.

What shall I do ?

Thanks

gentleone
11-16-2011, 10:07 PM
#wrapper {
margin: 0 auto;
align="center"
width: 1200px;
}
align="center" is not a css property... it's a HTML attribute, which is deprecated and therefore shouldn't be used anyway.

If you remove that align thing from your #wrapper rule, your content should be centered.

jigneshjsoni
11-17-2011, 02:34 AM
I have been able to align page in center of the screen, but an image and text below that image in the page which should be left aligned is also displaying in the center.

So how can I keep web pae in center of screen and image aligned to left in page (not screen, but web page)

Code is specified below
<html>
<head>
<style type="text/css">
body {
text-align: center;
}
#all {
margin: 0 auto;
width: 800px;
}
</style>
<script type="text/javascript">
function defaultDisplay(){
document.getElementById('111').style.visibility = 'hidden';
document.getElementById('222').style.visibility = 'hidden';
document.getElementById('333').style.visibility = 'hidden';
}
function working(){
var s = document.getElementById("menu1");
if (s.options[s.selectedIndex].value=="eating"){
document.getElementById('111').style.visibility = 'visible';
document.getElementById('222').style.visibility = 'hidden';
document.getElementById('333').style.visibility = 'hidden';
}
else {
if (s.options[s.selectedIndex].value=="tv"){
document.getElementById('111').style.visibility = 'hidden';
document.getElementById('222').style.visibility = 'hidden';
document.getElementById('333').style.visibility = 'visible';
}
else {
document.getElementById('111').style.visibility = 'hidden';
document.getElementById('222').style.visibility = 'visible';
document.getElementById('333').style.visibility = 'hidden';
}

}
}
</script>
</head>
<body onload="defaultDisplay()">
<div id="all">
<div id="header">
<h3>Following is left image</h3>
<img src="C:\Users\Jig\Desktop\Pics & Movies\IMG_4606.jpg" ¸width="300" height="200"/>
<p>Lets see if this image has been aligned to right or not</p>
<h3 align="right">Following is Right image</h3>
<p><img id="111" style="float:right" src="C:\Users\Jig\Desktop\Pics & Movies\IMG_5118.jpg" ¸width="200" height="135" /></p>
<p><img id="222" style="float:right" src="C:\Users\Jig\Desktop\Pics & Movies\IMG_4729.jpg" ¸width="200" height="135" /></p>
<p><img id="333" style="float:right" src="C:\Users\Jig\Desktop\Pics & Movies\IMG_4606.jpg" ¸width="200" height="135" /></p>
<p> Select image for display on right</p>
</div>
<div id="middle">
<select id="menu1" onchange="working()">
<option value="noimage">Select Image</option>
<option value="eating">eating</option>
<option value="tv">watching</option>
<option value="biting">Biting</option>
</select>
</div>
</div>
</body>
</html>

Thanks

Corrosive
11-17-2011, 07:30 AM
Try;


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

jigneshjsoni
11-17-2011, 12:51 PM
I have been able to get page in center of screen using <style type="text/css">
body {
text-align: center;
}
#all {
margin: 0 auto;
width: 800px;
text-align: left;
}
</style>
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. <html>
<head>
<style type="text/css">
body {
text-align: center;
}
#all {
margin: 0 auto;
width: 800px;
}
</style>
<script type="text/javascript">
function defaultDisplay(){
document.getElementById('111').style.visibility = 'hidden';
document.getElementById('222').style.visibility = 'hidden';
document.getElementById('333').style.visibility = 'hidden';
}
function working(){
var s = document.getElementById("menu1");
if (s.options[s.selectedIndex].value=="eating"){
document.getElementById('111').style.visibility = 'visible';
document.getElementById('222').style.visibility = 'hidden';
document.getElementById('333').style.visibility = 'hidden';
}
else {
if (s.options[s.selectedIndex].value=="tv"){
document.getElementById('111').style.visibility = 'hidden';
document.getElementById('222').style.visibility = 'hidden';
document.getElementById('333').style.visibility = 'visible';
}
else {
document.getElementById('111').style.visibility = 'hidden';
document.getElementById('222').style.visibility = 'visible';
document.getElementById('333').style.visibility = 'hidden';
}

}
}
</script>
</head>
<body onload="defaultDisplay()">
<div id="all">
<div id="header" width="800">
<h3 align="left">Following is left image</h3>
<img src="C:\Users\gn\Desktop\Pics & Movies\IMG_4606.jpg" ¸width="300" height="200" align="left"/>
</div>
<div id="middle">
<p>Lets see if this image has been aligned to right or not</p>
<h3 align="right">Following is Right image</h3>
<p><img id="111" style="float:right" src="C:\Users\gn\Desktop\Pics & Movies\IMG_5118.jpg" ¸width="200" height="135" /></p>
<p><img id="222" style="float:right" src="C:\Users\gn\Desktop\Pics & Movies\IMG_4729.jpg" ¸width="200" height="135" /></p>
<p><img id="333" style="float:right" src="C:\Users\gn\Desktop\Pics & Movies\IMG_4606.jpg" ¸width="200" height="135" /></p>
<p> Select image for display on right</p>

<select id="menu1" onchange="working()">
<option value="noimage">Select Image</option>
<option value="eating">eating</option>
<option value="tv">watching </option>
<option value="biting">Biting </option>
</select>
</div>
</div>
</body>
</html>