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
    New Coder
    Join Date
    Aug 2011
    Posts
    46
    Thanks
    9
    Thanked 2 Times in 2 Posts

    Resizing everything depending on window size

    Hi!

    I have a site on which I have set specifically where I want the input boxes to be and the sizes I want them to be, below is my HTML (obviously the background image will not load) but what happens, is when a user changes the window size (or if a widescreen uses it), the dialog box and "HOME" button will move, is there a way I can possibly shrink it or something? .. just to keep it where it should be...


    Code:
    <html>
    <style>
    body {
    margin:0px auto;
    background-image:url('bg.png');
    background-repeat:no-repeat;
    background-size:100%;
    background-color:#000000;
    }
    p {
    color:white;
    font-family: arial;
    font-style: oblique;
    font-size: 15px;
    }
    h2 {
    color:white;
    font-family: arial;
    font-style: oblique;
    font-size: 20px;
    }
    a {
    color:#856d5f;
    font-family: arial;
    text-decoration:none;
    font-size: 20px;
    font-weight:bold;
    }
    a:hover {
    color:#594134;
    }
    
    </style>
    <body>
    <table align=right width=46% height=90% border=1>
    <tr><td>
    <table align=center width=100% height=60% border=0 cellpadding=10>
    <tr><td valign=middle align=center>
    
    <table align=center width=50% height=100% style="width: 100px; height: 100px; overflow: hidden;">
    <tr><td align=right valign=middle>
    <table align=left>
    <form action="?a=1" method="post">
    
    <tr><td width=25%>API</td><td width=25%><input type="text" name="api" size=90% MAXLENGTH=100></td></tr>
    <tr><td width=25%>User ID</td><td width=25%><input type="text" name="userid" MAXLENGTH=10><br></td></tr>
    <tr><td width=25%></td><td width=25%><input type="submit" value="Submit"></td>
    </form>
    </td></tr></td></tr>
    </table>
    </td></tr>
    <tr><td valign=bottom>
    <table align=center width=100% border=0 cellpadding=10>
    <tr><td>
    <a href="#" onclick="fetchpage()">HOME</a>
    </td></tr>
    </table>
    </td></tr>
    
    </table>
    
    </body>
    </html>
    Thanks.

    Kind Regards

    Matthew

  • #2
    Regular Coder
    Join Date
    Aug 2011
    Posts
    120
    Thanks
    1
    Thanked 15 Times in 15 Posts
    I don't know how to say this nicely, but your code is gobbledygook.

    It has several tags that are not closed (first to <table> for example) and far too many of the tags it does have closings for are closed out of order. Add to that that it's using nested HTML alignment for positioning and you have a recipe for disorder.

    I took a bit of time and rewrote the code to come as near to the same render as I could, but without all the complication:

    Code:
    <html>
    <style>
    body {
    margin:0px auto;
    background-image:url('bg.png');
    background-repeat:no-repeat;
    background-size:100%;
    background-color:#000000;
    }
    p {
    color:white;
    font-family: arial;
    font-style: oblique;
    font-size: 15px;
    }
    h2 {
    color:white;
    font-family: arial;
    font-style: oblique;
    font-size: 20px;
    }
    a {
    color:#856d5f;
    font-family: arial;
    text-decoration:none;
    font-size: 20px;
    font-weight:bold;
    }
    a:hover {
    color:#594134;
    }
    #container{
    float:right;
    width:50%;
    height:90%;
    border-style:ridge;
    border-width:5px;
    border-color:grey;
    }
    #controls{
    position:absolute;
    top:40%;
    }
    td.text{
    color:white;
    text-align:right;
    }
    #button{
    margin-top:15px;
    margin-left:25px;
    }
    </style>
    <body>
    <div id=container>
    	<div id=controls>
    		<table>
    			<form action="?a=1" method="post">
    				<tr><td class=text>API</td><td><input type="text" name="api" size=90% MAXLENGTH=100></td></tr>
    				<tr><td class=text>User ID</td><td><input type="text" name="userid" MAXLENGTH=10><br></td></tr>
    				<tr><td class=text></td><td><input type="submit" value="Submit"></td></tr>
    			</form>
    		</table>
    		<div id=button>
    			<a href="#" onclick="fetchpage()">HOME</a>
    		</div>
    	</div>
    </div>
    </body>
    </html>
    I used three more lines than the original code, but far fewer tags.

    As for your actual question, different display sizes are a continuing problem for web developers. Placing your controls inside div elements and using size margin percentages should do the trick. If it does not, then my experience points to using Javascript to actively lay out the page on a resize event.


  •  

    Posting Permissions

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