Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Oct 2010
    Posts
    274
    Thanks
    8
    Thanked 1 Time in 1 Post

    Textboxes move around when go from fullscreen to window screen

    My textboxes and the text above them are moving around when I change windows size in internet explorer and chrome. I dont want it to move at all but stay in upper right corner just like facebook is set up. No matter if you make window fullscreen or smaller window. Heres images of it happening in chrome and internet explorer below.
    Also it does validate
    Here my html and css

    html
    <!DOCTYPE HTML>

    <head>
    <title>WEBSITE NAME</title>
    <script type="text/javascript">

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-19766501-3']);
    _gaq.push(['_trackPageview']);

    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

    </script>

    <meta http-equiv="content-type" content="text/html;charset=utf-8" />

    <meta name="description" content="Your description about your website for search engines.">
    <meta name="keywords" content="keywords, to, find, your, website, on, search, engines,">
    <link href="data1.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="loginbutton">
    <img src="login.jpg" alt="login"/>
    </div>
    <div id="wrapper">
    <div id="header" class="bold txt_center">Registration</div>
    <div id="login">
    <form>
    <p>&nbsp;</p>
    <p>

    <input type="text" name="firstname" />
    r
    <input type="password" name="pwd" />
    </p>
    </form>
    </div>
    <div id="loginname">Email &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;Password
    </div>
    <div id="left_column">



    </div>

    <div id="footer" class="txt_center">
    <div class="copyright"><a href="contact.html">Contact U0</a></div>
    </div>

    </div>
    </body>
    </html>

    CSS

    <style type="text
    /css">
    * {
    margin: 0px auto;
    padding: 0px;
    }
    #loginname {
    color:#FFF;
    position:absolute;
    right:215px;
    top:30px;
    }
    #loginbutton {position:absolute; right:45px;top:52px;}
    #login {margin-left:450px;margin-top:-50px;
    margin-bottom:500px; Margin-top:-200px; text-align:right; position:absolute; right:120px;}
    body {
    font: 76% Verdana, Arial, Helvetica, sans-serif;
    background: #000;
    padding-top:120px;
    }
    #wrapper {
    width: 850px; /* Page width */
    background: #fff;
    padding: 10px;
    margin: 10px auto;
    }
    #header {
    font-size: 250%;
    margin: 10px;
    }
    #right_column {
    float: right;
    width: 590px;
    clear: right;
    text-align: left;
    }
    #left_column {
    width: 256px;

    }
    #left_column img {
    display: block;
    clear: right;
    font-size: 10px;
    }
    #footer {
    background: #ccc;
    height: 60px;
    margin-top: 10px;
    }
    .copyright {
    padding: 20px;

    }
    p {
    margin: 10px 0px;
    text-align: center;
    font-size: 15pt;
    }
    h1,h2,h4,h5,h6 {
    font-size: 155%;
    margin: 20px 0px;
    }
    .bold {
    font-weight: bold;
    }
    .txt_center {
    text-align: center;
    }
    #left_column {
    width: 256px;
    float: left;

    }
    </style>
    #wrapper #right_column p {
    text-align: left;
    }
    #wrapper #right_column p {
    text-align: center;
    }
    #wrapper #right_column p {
    text-align: left;

    text-indent:50px;
    }
    Attached Thumbnails Attached Thumbnails Textboxes move around when go from fullscreen to window screen-pic1.jpg   Textboxes move around when go from fullscreen to window screen-pic2.jpg   Textboxes move around when go from fullscreen to window screen-pic3.jpg   Textboxes move around when go from fullscreen to window screen-pic4.jpg  
    Last edited by andynov123; 05-24-2011 at 07:33 AM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,676
    Thanks
    25
    Thanked 653 Times in 652 Posts
    Your problems are occurring because of how things are placed. Your registration div is first in your coding and forces you to use absolute positioning on other sections of code which breaks on you. Here is a little better script, but it is not finished and uses inline styling.

    Code:
    <html>
    <!DOCTYPE HTML>
    
    <head>
    <title>WEBSITE NAME</title>
    <script type="text/javascript">
    
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-19766501-3']);
    _gaq.push(['_trackPageview']);
    
    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
    
    </script>
    
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    
    <meta name="description" content="Your description about your website for search engines.">
    <meta name="keywords" content="keywords, to, find, your, website, on, search, engines,">
    <link href="data1.css" rel="stylesheet" type="text/css">
    </head>
    <body style="background-color:black; color: white;width: 850px;margin:0 auto;">
    <div id="wrapper" style="margin:0 auto;">
    	<div style="margin-top: 50px;">
    		<div style="float:right;margin-right: 20px;">
    			<br>
    			<input type="image" name="myclicker" src="image.jpg" width="55" height="22">  <!--you need to in put real w/h values-->
    		</div>
    
    		<div style="float:right;margin-right: 20px;">
    			Email<br>
    			<input type="text" name="firstname">
    		</div>
    
    		<div style="float:right;margin-right: 20px;">
    			Password<br>
    			<input type="password" name="pwd">
    		</div>
    	</div>
    
    	<div style="height:120px;"></div>  <!-- spacer div -->
    
    	<div style="border:solid white 1px;background-color:white;color:black; clear:both;margin:0uto; auto;">
    		<div style="font-size: 250%;font-weight: bold;text-align: center;">
    			Registration
    		</div>
    		<div style="background: #ccc;height: 30px;margin: 10px; padding-top: 5px; text-align:center;">
    			<div class="copyright"><a href="contact.html">Contact U0</a></div>
    		</div>
    	</div>
    	<div id="left_column"></div>
    </div>
    </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •