Resizing everything depending on window size [Archive]

GreenFanta

09-18-2011, 09:04 PM

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...

<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

M.Jackson

09-18-2011, 11:37 PM

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:

<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.