Click here to Skip to main content
15,867,453 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
Hello. I am trying to scale the website I have to fit any browsers size or resolution. When I developed the website on the computer that the resolution is 1920*1080. I debug the website on a computer that has a resolution of 1440*900 and some of the features are off a little. So I moved somethings around to get it to match the 1440*900 resolution. I know that some users will not have my resolution. How can I get this to work? I can't use silver light because some users are MAC users and I really don't want to tell all of my users to enable or install this feature. Here is the HTML code for one of my pages.

HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"  runat="server">
    <title>SACSCOC Login</title>
    <style type="text/css">
        .style1
        {
            font-size: x-large;
            }
        .style2
        {
            width: 100%;
            height: 130px;
        }
        .style3
        {
            width: 655px;
            text-align: right;
        }
        .style4
        {
            width: 407px;
            text-align: left;
        }
        .style5
        {
            text-align: left;
        }
        .style6
        {
            width: 188px;
            text-align: center;
        }
        .style10
        {
            color: #0000FF;
        }
        .style11
        {
            width: 100%;
        }
        #form1
        {
            text-align: center;
        }
        .style12
        {
            font-weight: bold;
        }
        .style13
        {
            width: 188px;
            text-align: left;
        }
        .style14
        {
            text-align: left;
            width: 1750px;
        }
    </style>
</head>
<body background="Images/bkg-blu.jpg">
    <form id="form1"  runat="server">
    <div class="style1">
        <table class="style11">
            <tr>
                <td class="style14">
                    </div>
    <table class="style2">
        <tr>
            <td class="style3">
                ^__strong>UserName / Email Address</td>
            <td class="style13">
                <asp:TextBox ID="TextBoxEA" runat="server" MaxLength="50" Width="180px" >
                </asp:TextBox>
            </td>
            <td class="style5">
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
                    ControlToValidate="TextBoxEA" ErrorMessage="You Must Enter A UserName" 
                    ForeColor="Red" CssClass="style12"></asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <td class="style3">
                ^__strong>Password</td>
            <td class="style13">
                <asp:TextBox ID="TextBoxPW" runat="server" TextMode="Password" Width="180px"></asp:TextBox>
            </td>
            <td class="style5">
                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
                    ControlToValidate="TextBoxPW" ErrorMessage="You Must Enter The Password" 
                    ForeColor="Red" CssClass="style12"></asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <td class="style3">
                 </td>
            <td class="style13">
                 </td>
            <td class="style5">
                 </td>
        </tr>
        <tr>
            <td class="style3">
    
        ^__strong style="text-align: left">
                <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/FINSubmitPage.aspx" 
                    style="text-align: center; font-size: large;">New Password Creation</asp:HyperLink>
        
    
            </td>
            <td class="style6">
                <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Login" 
                    Width="106px" style="text-align: center" />
            </td>
            <td class="style5">
                <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/FINForgotPassword.aspx"
                    
                    style="text-decoration: underline; color: #0000FF; font-weight: 700; font-size: large" 
                    ForeColor="#FFCC00">Forgot Password</asp:HyperLink>
            </td>
        </tr>
    </table>
    <asp:Label ID="lblMessage" runat="server" Font-Bold="True" 
        Font-Names="Times New Roman" Font-Size="Medium" ForeColor="Red"></asp:Label>
    </form>
</body>
</html>
Posted
Updated 11-May-15 4:36am
v2

1 solution

You need to embrace liquid, fluid and elastic design. Please see my past answers:
Webpage screen resolution (Cross Browser\Cross Platform) problem[^],
To Get Screen resolution[^].

One note on your CSS: avoid using pixel sizes; you can, for example, use relative em units, which express lengths in the units of current font size.

[EDIT]

Look at the HTML of this answer. Make you browser window resizeable and resize it, even to some extremely small sizes. Isn't my text still readable? If you think that this is due to some sophisticated CodeProject style, do the following: copy HTML source of only my answer, save it in a file and view separately in your browser. Isn't it well rendered in a window of any size? It is already fluid.

So, the case of good design is: simplicity.

—SA
 
Share this answer
 
v2
Comments
Computer Wiz99 11-May-15 10:59am    
I could not see your past answer because the post was closed.
Sergey Alexandrovich Kryukov 11-May-15 11:12am    
No, I just checked up both links.
—SA
Computer Wiz99 11-May-15 11:27am    
Okay. I really don't have the time to try to learn the information you gave me right now. I will read up on it after I get this fixed. Is there a way to fix this in C# or HTML without using the way you gave me?
Sergey Alexandrovich Kryukov 11-May-15 11:45am    
Such way is: simplicity. If you develop simplest markup without any absolute positioning, any assumptions on the window size (mind you, not screen size, but inner browser window size, which can be changed by the user at any time), it is already fluid.

But read the article anyway. I hope you will accept my answer formally.

—SA
Computer Wiz99 11-May-15 11:56am    
I am reading the article but I am pressed for time on this site. Any other speedy way?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900