Capa cortada

oscargmsp · #1 (**permalink**) 02/03/2011, 03:01

¡Hola!

A veces veo que hay webs que se cortan si tienes el tamaño en el navegador al 125% o tienes dos barras de herramientas en éste.

Un ejemplo de web:
http://www.farreempresa.com/empresa.php

¿Cómo se resuelve un problema de este tipo?

¡¡Muchas gracias!!

IsaBelM · #2 (**permalink**) 02/03/2011, 14:16

seguro que tiene todo el sentido del mundo tu consulta, pero yo no pertenezco a este mundo

jomaruro · #3 (**permalink**) 02/03/2011, 14:20

Hola:

No entiendo yo eso del navegador al 125%.

Saludos.

oscargmsp · #4 (**permalink**) 02/03/2011, 15:54

Cita:

Iniciado por jomaruro

Hola:

No entiendo yo eso del navegador al 125%.

Saludos.

No he sido claro al explicarlo. Espero serlo ahora.

Por ejemplo, esta web la veo bien si no tengo barras de herramientas en el navegador:

Uploaded with ImageShack.us

Si tengo barras de herramientas se corta y, aunque hay scroll, hay cosas que no se ven (el número de teléfono de la parte superior, por ejemplo):

¿El problema puede estar aquí?
#container {
position: absolute;
margin: 0 auto;
height: 630px !important;
height: 630px;
width: 918px;
background-image: url(../imatges/fons.gif);
left: 50%;
top: 50%;
margin-top: -315px;
margin-left: -460px;
}

jomaruro · #5 (**permalink**) 02/03/2011, 17:21

Hola:

Cita:

Iniciado por oscargmsp

¿El problema puede estar aquí?
#container {
position: absolute;
margin: 0 auto;
height: 630px !important;
height: 630px;
width: 918px;
background-image: url(../imatges/fons.gif);
left: 50%;
top: 50%;
margin-top: -315px;
margin-left: -460px;
}

El problema puede ser ese, si lo cambias por:

Código CSS:

Ver original#container{
    position:relative;
    margin:0 auto;
    height: 630px !important;
    height: 630px;
    width: 918px;
    background-image:url(../imatges/fons.gif);
}

no sucede eso.

Saludos.

sanxuan · #6 (**permalink**) 02/03/2011, 18:25

Puedes mantener el centrado de la página y limitar el que parte de ella se oculte de la siguiente forma:
1. Encierra tu página en un contenedor adicional. Yo lo he llamado centrado.

Código HTML:

Ver original<html>
<body>
<div id="centrado">
  <div id="container">
     ... El resto del contenido ...
  </div>
</div>
</div>
</body>
</html>

2. Modifica las siguientes reglas CSS sustituyendo las originales que se correspondan por estas otras.

Código CSS:

Ver originalhtml{  /* Esta es una nueva regla */
    height:100&#37;; /* Aquí debería decir 100%*/
}
body{  /* Esta es una nueva regla */
    /* Estas dos son necesarias para que div#centrado ocupe el 100% de la ventana*/
    height:100%;
    background:#fff; /* algunos como yo no tenemos el fondo blanco predeterminado */
    /* en el navegador y a la página se le ven las costuras                 */
}
#centrado { /*Ocupa la altura de la ventana del navegador y se centra en ella a lo ancho*/
    height: 100%;
    margin: 0 auto;
    min-height: 630px;
    position: relative;
    width: 918px;
}
#container { /*Se centra verticalmente dentro de div#centrado*/
    background-image: url("../imatges/fons.gif");
    height: 630px !important;
    margin-top: -315px;
    position: absolute;
    top: 50%;
}

Espero que sea lo que buscabas. Un saludo.