Databases
StackOverflow2013
Postsdbo
POWant to make my web page resolution dependent?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWant to make my web page resolution dependent?
    text
    copied!<p>I am creating one website in which I have created single page. The page displaying perfect in 1366 X 768 screen resolution.</p> <p>But when I am opening the same page in 1024 X 768 resolution the Buttons and some text goes down.</p> <p>I want to write a CSS in a way so it adjust or work properly in both the resolution. Below screen shot shows my problem.</p> <p>In 1366 X 768 Resolution Page Looks Perfct! -> <a href="http://i50.tinypic.com/ac6blc.jpg" rel="nofollow">http://i50.tinypic.com/ac6blc.jpg</a></p> <p>In 1024 X 768 Resolution Some elements goes down!!! -> <a href="http://i50.tinypic.com/2vxnjva.png" rel="nofollow">http://i50.tinypic.com/2vxnjva.png</a></p> <p>Can some one look my code and suggest me changes to make page display properly on both resolution.</p> <p>Thanks a lot.</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; /*=======Global Styles==========*/ body { font-family:Geordia, serif; margin:0; padding:0; } a { color:#3E97FB; } /*==============Container=========*/ div#container { position:relative; width:100%; } #header { position:absolute; top:5px; width:100%; background:#FFFFFF; } /*========Header 1=========*/ #header1 { position:absolute; background:url(images/images/headerbg.png) repeat-x; width:100%; height:111px; left: 0px; top: 96px; } #header1 #form { float:left; margin-left:8%; margin-top:8px; height:70px; width:665px; } #form .email { float:left; margin-right:190px; font-family:Arial; font-size:12px; font-weight:bold; color:#FFF; } #form .password { float:left; margin-right:2%; font-family:Arial; font-size:12px; font-weight:bold; color:#FFF; } .clear { clear:both; } #form .input { float:left; width:200px; padding:7px 7px; margin-right:5px; width:200px; border-bottom: 1px double #171717; border-top: 1px double #171717; border-left:1px double #333333; border-right:1px double #333333; } #header1 .seprator { float:left; margin-left:30px; background:url(images/images/line.png); width:2px; height:72px; margin-top:15px; } #header1 .register { float:left; margin-left:6%; margin-top:8px; width:280px; height:70px; } .register .noac { color:#FFF; font-family:"Trebuchet MS"; font-weight:bold; text-align:center; } .loginbtn { float:left; display: inline-block; width:186px; height:40px; } .advertiserbtn { display: inline-block; margin:10px; } .publisherbtn { display: inline-block; margin:10px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="content"&gt; &lt;div id="header-line"&gt;&lt;/div&gt; &lt;div id="header"&gt;&lt;/div&gt; &lt;!--End header--&gt; &lt;div id="header1"&gt; &lt;div id="form"&gt; &lt;div class="email"&gt;Email:&lt;/div&gt; &lt;div class="password"&gt;Password:&lt;/div&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;input type="text" class="input" /&gt; &lt;input type="text" class="input" /&gt; &lt;input type="button" class="loginbtn" value="Login" /&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/div&gt; &lt;!--From Div End --&gt; &lt;div class="seprator"&gt;&lt;/div&gt; &lt;div class="register"&gt; &lt;div class="noac"&gt;Don't have an account yet!&lt;/div&gt; &lt;input type="button" class="advertiserbtn" value="Free Register" /&gt; &lt;input type="button" class="publisherbtn" value="Premium Registration" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;!--End header1--&gt; &lt;div id="footer"&gt;&lt;/div&gt; &lt;/div&gt; &lt;!--End footer--&gt; &lt;/div&gt; &lt;!--End Content Div--&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload