Varios Problemas

davemtc · #1 (**permalink**) 06/05/2011, 13:54

Hola! primero que nada decir que soy nuevo en el foro, espero poder aportar mi granito de arena...

Bueno al lio, la verdad estoy teniendo algunos problemas con mi web, os explico:

Tengo una web y bueno tengo un div centrar en el que tengo todo el contenido, el problema es que cuando modifico el tamaño del navegador no cubre el 100% de la pagina :S.... pero cuando esta maximizada asi.

Código:

html,body{
	background-color: #F4F4F4;
	color: #333333;
        font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
        font-size: 11px;
        margin: 0;
	padding: 0;
	height: 100%; 
}

Código:

#ContentBox {
	width: 870px;
	height: 100%; 
	padding: 95px 15px 5px 15px;
	background-color: #DBECFD;
}

la verdad ya no se que hacer :S:S:S:S...

otra tema mas es un problema con un input y con IE9:

Código:

<form method="get" action="/"> <!-- Formulario para iniciar sesion -->
	<table>
    	<tbody>
            <tr>
                <td><label for="email">Email:</label><br/>
                    <input name="email" class="InputMail" type="text" id="email" tabindex="1" size="30"/> <br/></td>
                <td><label for="pass">Contrase&ntilde;a:</label><br/>
                    <input name="pass" class="InputPass" type="password" id="pass" tabindex="2" size="30" /> 
                    <input name="Join" type="submit" value="Entrar" />
              </td>
            </tr>
            
          <tr>
                <td>
            <input type="checkbox" name="Remember" id="Remember" /> <label for="Remember" class="Label_Check">No cerrar sesi&oacute;n</label></td>
                <td><a class="link" href="/">He olvidado mi contraseña.</a></td>
            </tr>
        </tbody>
	</table>
</form>

el problema de aqui esta en que el input de la pass se queda un pixel por encima que el otro :S..

a ver si me pueden ayudar por favor..

angelfcm · #2 (**permalink**) 06/05/2011, 15:00

Hola primero vamos con el primer problema.

Sólo agrega éste script a tu página:

Código Javascript:

Ver original<script type="text/javascript">
window.onresize = medidaDIV;
function medidaDIV()
{
 document.getElementById("ContentBox").style.height=document.body.clientHeight+"px";
}
</script>

Y al body agregale éste atributo:
onload="tamañoBody()", es decir quedaría así, <body onload="tamañoBody()">.

angelfcm · #3 (**permalink**) 06/05/2011, 15:08

Hola de nuevo!, para el segundo problema, simplemente agregale una definición estándar para que los navegadores interpreten igual el html de tu documento.
Para ello pega la siguiente sentencia al principio de tu página, es decir, antes de la etiqueta <HTML>.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">

Ejemplo:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
<html>
<head></head>
<body>
</body>
</html>

Saludos!

davemtc · #4 (**permalink**) 07/05/2011, 01:22

Bueno antes de nada decirte que muchas gracias por interesarte por mi caso, pero lamentablemente no funciono.

El asunto esta en que en el primer problema sobre el 100% pero solo de lo visible, si bajo el scroll ya se ve en blanco, osea que si hago un resize me sigue cubriendo el 100% de lo que veo pero una vez empiezo a bajar el scroll me dice que nani :S...

y para el segundo problema, aun persiste.... quizás sea porque el login este lo estoy cargando a un div llamado #Login a la pagina que lo cargo tiene perfectamente todos los estándares de XHTML 1.0, como dado curioso solo se descuadra el input cuando uso el type "password" :S...

La verdad estoy ya loco :(

angelfcm · #5 (**permalink**) 07/05/2011, 10:35

Hola!
Para el primer problema:
Debes quitarle el padding al ContentBox y ponerselo a un ContentBox2, te dejo un ejemplo(NO MUEVAS NADA PARA QUE TE FUNCIONE EXACTAMENTE COMO A MÍ).

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
<!-- PROBADO EN IE9 Y MOZILLA 4 -->
<html>
<head>
<title>onresize test</title>
<script src="jquery.js"></script>
<script type="text/javascript">
window.onresize = medidaDIV;
function medidaDIV()
{
 document.getElementById("ContentBox").style.height=document.documentElement.clientHeight+"px";
}
</script>
<style type="text/css">
html,body{
	background-color: #F4F4F4;
	color: #333333;
        font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
        font-size: 11px;
        margin: 0;
	padding: 0;
	height: 100%;
}
#ContentBox {position:absolute;
	width: 870px;
	height: 100%; 
	background-color: #DBECFD;
        overflow:hidden;
}
#ContentBox2 {
	padding: 95px 15px 5px 15px;
}
</style>
</head>
<body onload="medidaDIV()">
<div id="ContentBox">
<div id="ContentBox2">
<h1>AQUÍ EL CONTENIDO DE LA PÁGINA</h1><h1>AQUÍ EL CONTENIDO DE LA PÁGINA</h1>
<h1>AQUÍ EL CONTENIDO DE LA PÁGINA</h1><h1>AQUÍ EL CONTENIDO DE LA PÁGINA</h1>
</div>
</div>
</body>
</html>

Si ya de plano no te funciona, seguramente tus navegadores estan antiguos te recomendaria que los actualizes, saludos!

davemtc · #6 (**permalink**) 07/05/2011, 16:05

pero eso lo unico que hace es que no salga el scroll cuando haya mas texto de lo normal... overflow:hidden;

u.u... alguna otra idea?

angelfcm · #7 (**permalink**) 07/05/2011, 20:30

Orale ya me toco que me pase eso, hehe.
Se corta el div cuándo el contenido no cabe, y supongo que cuándo no quepa el contenido, quieres que aparesca el scroll y cuándo llegues hasta abajo no se corte el div (que aparesca blanco).
Pues ahora sí que sí de afuerzas de tiene que funcionar, prueba éste ejemplo, que en mi opinión es el definitivo para el problema 1:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
<!-- PROBADO EN IE9 Y MOZILLA 4 -->
<html>
<head>
<title>Pantalla completa - ContentBox2</title>
<script type="text/javascript">
window.onscroll = medidaDIV;
window.onresize = medidaDIV;
window.onload = medidaDIV;
function medidaDIV()
{
 if(document.documentElement.scrollTop==0)
  y=document.documentElement.clientHeight+"px";
 else{
   if(document.defaultView)
     y=document.defaultView.getComputedStyle(document.getElementById("denominador"),null).top;
   else y=document.getElementById("denominador").currentStyle.top;
 }
 document.getElementById("ContentBox").style.height=y;//;document.documentElement.clientHeight+"px";
}
</script>
<style type="text/css">
/* No agregar tamaño al padding-top/bottom ni al margin-top/bottom en #ContentBox, body o html */
html,body{
    background-color: #F4F4F4;
    color: #333333;
        font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
        font-size: 11px;
        margin: 0;
    padding: 0;
}
#ContentBox {position:absolute;
    width: 870px;
    background-color: #DBECFD;
}
#ContentBox2 {
    padding: 95px 15px 5px 15px;
}
</style>
</head>
<body>
<!-- no borrar ContentBox ní ContentBox2 ní poner nada fuera de ellos a menos que sea con display:none -->
<div id="ContentBox">
<div id="ContentBox2">
 <h1>AQUÍ EL CONTENIDO DE LA PÁGINA</h1><h1>AQUÍ EL CONTENIDO DE LA PÁGINA</h1>
 <h1>AQUÍ EL CONTENIDO DE LA PÁGINA</h1><h1>AQUÍ EL CONTENIDO DE LA PÁGINA</h1>
</div>
<!-- no borrar denominador ní modificarlo -->
<span style="position:absolute" id="denominador" style="display:none"></span>
</div>
</body>
</html>

angelfcm · #8 (**permalink**) 07/05/2011, 23:35

Y para el otro problema:
Ya se que sucéde, aparte de que necesitas poner el doctype que te escribí más arriba, hay un botón que tiene internet explorer de lado izquierdo del botón para actualizar, éste botón si lo tienes activado, activará la "vista de compatibilidad" y entonces provoca que se te muevan de lugar, debes de desactivar ese botón.

Pero si no te agrada ese asunto, entonces has la tabla de la siguiente forma:

Código HTML:

Ver original<table>
        <tbody>
            <tr>
                <td><label for="email">Email:</label></td>
                <td><label for="pass">Contrase&ntilde;a:</label></td>
                <td rowspan="3"><input name="Join" type="submit" value="Entrar"/></td>
            </tr>
            <tr>
                <td><input name="email" class="InputMail" type="text" id="email" tabindex="1" size="30"/></td>
                <td><input name="pass" class="InputPass" type="password" id="pass" tabindex="2" size="30" /></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="Remember" id="Remember" /><label for="Remember" class="Label_Check"> No cerrar sesión</label></td>
                <td><a class="link" href="/">He olvidado mi contraseña.</a></td>
            </tr>
        </tbody>
    </table>

Saludos