[SOLUCIONADO] problema reduciendo ventana, se mueve todoucir la ventana

sandragh27 · #1 (**permalink**) 31/07/2014, 12:57

Hola a todos, estoy haciendo el diseño de la pantalla de inicio de una aplicacion web y me encuentro con un problema, al cambiar el tamaño de la pantalla se me mueve el form del nombre de usuario y contraseña y el fondo tambien.

Alguien podria ayudarme? Aqui les dejo el codigo:

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
        
        <title>Sistema</title>
        <style type="text/css">
            body {  background:url(webb.jpg)no-repeat center center fixed;
                    background-size: 1400px 600px;
                    -moz-background-size: 1400px 600px;
                    -webkit-background-size: 1400px 700px;
                    }
            form {  position: absolute;
                    margin-bottom: 400px;
                    margin-top:315px;
                    margin-right: 600px;
                    margin-left: 420px;
                    text-align: right;
                    font-family: sans-serif;
                    font-size:15px;
                   }
    </style>
    </head>
    <body>
        <form name="formLogin" method="post" action="login.jsp" >
            <label id="nickname"> Nombre de Usuario:  </label>
                <input type="text" name="nickname" id="nickname" maxlength="15"/> <br/>
            <label id="contrasena"> Contrase&ntildea:  </label>
                <input type="password" name="contrasena" id="contrasena" maxlength="15"/> <br/>
            
            <input type="submit" name="Ingresar" value="Ingresar" /> 
 
        </form>
 
    </body>
</html>

sandragh27 · #2 (**permalink**) 31/07/2014, 14:48

Logre que el fondo no se moviera, pero el form se sigue moviendo cuando reduzco la ventana, supongo que es por el margin-right y left, pero no se como hacer para q no se mueva, no puedo quitarles eso porque no me saldria en donde quiero, en cambio con el margin top no se mueve. Ayuda por favor

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
        <title>Sistema</title>
        <style type="text/css">
            body {  background:url(webb.jpg)no-repeat;
                    background-attachment: scroll;
                    background-position: right top;
                    background-size: 1400px 600px;
                    -moz-background-size: 1400px 600px;
                    -webkit-background-size: 1400px 700px;;
                    -o-background-size: cover;
                    }
            form {  position: static;
                    margin-top:315px;
                    margin-right: 640px;
                    margin-left:400px;
                    min-width: 315px;
                    text-align: right;
                    font-family: sans-serif;
                    font-size:15px;
                    overflow:scroll;
                   }
    </style>
    </head>
    <body>
        <form name="formLogin" method="post" action="login.jsp" >
            <label id="nickname"> Nombre de Usuario:  </label>
                <input type="text" name="nickname" id="nickname" maxlength="15"/> <br/>
            <label id="contrasena"> Contrase&ntildea:  </label>
                <input type="password" name="contrasena" id="contrasena" maxlength="15"/> <br/>
            
            <input type="submit" name="Ingresar" value="Ingresar" /> 
 
        </form>
 
    </body>
</html>

sandragh27 · #3 (**permalink**) 01/08/2014, 08:08

Solucionado colocandole una anchura fija a la pagina completa
html { width: 1365px; }