Foros del Web » Creando para Internet » CSS »

Capa cortada

Estas en el tema de Capa cortada en el foro de CSS en Foros del Web. ¡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 ...
  #1 (permalink)  
Antiguo 02/03/2011, 03:01
 
Fecha de Ingreso: marzo-2004
Mensajes: 74
Antigüedad: 13 años, 8 meses
Puntos: 0
Capa cortada

¡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!!
  #2 (permalink)  
Antiguo 02/03/2011, 14:16
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Capa cortada

seguro que tiene todo el sentido del mundo tu consulta, pero yo no pertenezco a este mundo
  #3 (permalink)  
Antiguo 02/03/2011, 14:20
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Capa cortada

Hola:

No entiendo yo eso del navegador al 125%.

Saludos.

  #4 (permalink)  
Antiguo 02/03/2011, 15:54
 
Fecha de Ingreso: marzo-2004
Mensajes: 74
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Capa cortada

Cita:
Iniciado por jomaruro Ver Mensaje
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;
}
  #5 (permalink)  
Antiguo 02/03/2011, 17:21
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Capa cortada

Hola:

Cita:
Iniciado por oscargmsp Ver Mensaje
¿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
  1. #container{
  2.     position:relative;
  3.     margin:0 auto;
  4.     height: 630px !important;
  5.     height: 630px;
  6.     width: 918px;
  7.     background-image:url(../imatges/fons.gif);
  8. }

no sucede eso.

Saludos.

  #6 (permalink)  
Antiguo 02/03/2011, 18:25
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Capa cortada

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
  1. <div id="centrado">
  2.   <div id="container">
  3.      ... El resto del contenido ...
  4.   </div>
  5. </div>
  6. </div>
  7. </body>
  8. </html>
2. Modifica las siguientes reglas CSS sustituyendo las originales que se correspondan por estas otras.
Código CSS:
Ver original
  1. html{  /* Esta es una nueva regla */
  2.     height:100&#37;; /* Aquí debería decir 100%*/
  3. }
  4. body{  /* Esta es una nueva regla */
  5.     /* Estas dos son necesarias para que div#centrado ocupe el 100% de la ventana*/
  6.     height:100%;
  7.     background:#fff; /* algunos como yo no tenemos el fondo blanco predeterminado */
  8.     /* en el navegador y a la página se le ven las costuras                 */
  9. }
  10. #centrado { /*Ocupa la altura de la ventana del navegador y se centra en ella a lo ancho*/
  11.     height: 100%;
  12.     margin: 0 auto;
  13.     min-height: 630px;
  14.     position: relative;
  15.     width: 918px;
  16. }
  17. #container { /*Se centra verticalmente dentro de div#centrado*/
  18.     background-image: url("../imatges/fons.gif");
  19.     height: 630px !important;
  20.     margin-top: -315px;
  21.     position: absolute;
  22.     top: 50%;
  23. }
Espero que sea lo que buscabas. Un saludo.

Etiquetas: capas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:05.