在调整窗口大小时如何防止我的对象继续前进?

时间:2013-05-13 21:03:03

标签: html css window-resize

我正在使用CSS和HTML ......一切看起来都不错但是当我重新调整窗口时,文本框和按钮移动到位置之外。当窗口调整大小时,我希望所有内容都保留在原位..帮助..我尝试使用像我在其他地方建议的包装,但我想我做错了或者它不起作用。

这是该网站,因此您可以更好地掌握我正在谈论的内容...... http://www.difgropliego.comze.com/diflogin.html

<html>
<head>
    <style>
    #wrapper {
        width: 800px; 
        margin:0 auto;
    }

    body {
        background-color:black;
        background-image:url(diflogin.png);
        background-repeat:no-repeat;
        background-position:center top; 
        margin:0 10% 0 10%;
        padding:0 0 0 0;
        border:0 0 0 0;
    }

    #user {
        position:absolute;
        left: 306px;
        top: 455px;
    }

    #contra {
        position: absolute;
        left: 904px;
        top: 455px;
    }

    #web-buttons-idgi5a2 {
        position: absolute;
        left: 1023px;
        top: 601px;
    }

    #web-buttons-idgi5a2 a {
        display:block;
    }

    #web-buttons-idgi5a2 a:hover {
        background-position:left bottom;
    }

    a #web-buttons-idgi5a2a {
        display:none
    }
    </style>
</head>
<body>
    <div id="wrapper">
        <label for="user"></label>
        <input type="text" name="user" id="user" />
        <label for="contra"></label>
        <input type="text" name="contra" id="contra" />

        <table id="web-buttons-idgi5a2" width=0 cellpadding=0 cellspacing=0 border=0>
            <tr>
                <td style="padding-right:0px" title ="INGRESAR">
                    <a href="#" title="INGRESAR" style="background-image:url(buttoning.png);width:160px;height:61px;display:block;"><br/></a>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

如果您希望它们在屏幕上显示,请输入

尝试使用如下所示的百分比:

#user{
    position:absolute;
    left: 10%;
    top: 20%;
}