logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 11-16-2011, 04:14 AM   #1
jigneshjsoni
 
Join Date: Nov 2011
Posts: 4
Default How to set page size

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
jigneshjsoni is offline   Reply With Quote
Old 11-16-2011, 05:13 AM   #2
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

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:
HTML Code:
<div id="wrapper">
All content here
</div>
CSS:
Code:
#wrapper {
 margin: 0 auto;
 width: 1200px;
}
domedia is offline   Reply With Quote
Old 11-16-2011, 09:53 PM   #3
jigneshjsoni
 
Join Date: Nov 2011
Posts: 4
Default

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
jigneshjsoni is offline   Reply With Quote
Old 11-16-2011, 11:07 PM   #4
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Quote:
Originally Posted by jigneshjsoni View Post
HTML Code:
#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.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 11-17-2011, 03:34 AM   #5
jigneshjsoni
 
Join Date: Nov 2011
Posts: 4
Default

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
Code:
<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
jigneshjsoni is offline   Reply With Quote
Old 11-17-2011, 08:30 AM   #6
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Try;

Code:
<style type="text/css">
  body {
   text-align: center;
  }
  #all {
     margin: 0 auto;
     width: 800px;
text-align: left;
    }
  </style>
Corrosive is offline   Reply With Quote
Old 11-17-2011, 01:51 PM   #7
jigneshjsoni
 
Join Date: Nov 2011
Posts: 4
Default

I have been able to get page in center of screen using
Code:
<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.
Code:
<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>
jigneshjsoni is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 11:04 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com