Foros del Web » Diseño web » CSS »

Mostrar centrado un DIV aunque se salga de pantalla

Estas en el tema de Mostrar centrado un DIV aunque se salga de pantalla en el foro de CSS en Foros del Web. Buenas foreros, vuelvo al foro puna vez mas para pedir ayuda, tengo un site en el cual el cliente me ha pedido que inserte unos ...
  #1 (permalink)  
Antiguo 07/04/2011, 02:20
Avatar de bNd170  
Fecha de Ingreso: agosto-2009
Ubicación: $this->setLocation('Valencia', 'Spain');
Mensajes: 294
Antigüedad: 4 años, 11 meses
Puntos: 12
Pregunta Mostrar centrado un DIV aunque se salga de pantalla

Buenas foreros,
vuelvo al foro puna vez mas para pedir ayuda, tengo un site en el cual el cliente me ha pedido que inserte unos banners laterales a los lados de la web, teniendo en cuenta que quiere que en una pantalla normal de 17" con 1280x1024 px se le vea la web por completo se me antoja un fallo y es que al abrir la web en una resolucion menor a la mentada anteriormente, la web comienza a mostrarse desde la izquierda cortando así parte del cuerpo de la derecha.

Hay alguna propiedad que permita ignorar el ancho de la pantalla y mostrar desde el centro hacia los lados?

Gracias por el tiempo
  #2 (permalink)  
Antiguo 07/04/2011, 05:23
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 4.403
Antigüedad: 6 años, 1 mes
Puntos: 878
Respuesta: Mostrar centrado un DIV aunque se salga de pantalla

en javascript tienes el método scrollTo(x, y) con ello puedes scrollear la página a tu conveniencia.
  #3 (permalink)  
Antiguo 07/04/2011, 17:57
 
Fecha de Ingreso: febrero-2011
Mensajes: 54
Antigüedad: 3 años, 5 meses
Puntos: 13
Respuesta: Mostrar centrado un DIV aunque se salga de pantalla

No es necesario utilizar js para hacer esto.

Se puede hacer con css: creas un contenedor principal del ancho deseado (en tu caso 1280px) y lo posicionas centrado, de tal forma que en un monitor de 1280 se verá la totalidad y en monitores más pequeños se conservará el centro del div contenedor en el centro de pantalla y rebosará por los lados lo que sobre.

En tu caso el cuerpo central siempre quedará centrado, sea cual sea la resolución, y los banners laterales irán sobresaliéndose por los laterales a medida que disminuyas el ancho de la pantalla.
  #4 (permalink)  
Antiguo 08/04/2011, 06:21
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 4.403
Antigüedad: 6 años, 1 mes
Puntos: 878
Respuesta: Mostrar centrado un DIV aunque se salga de pantalla

conexion, como la cabra siempre tira al monte, me he parado a releer el tema. como yo lo entiendo, no es posible usar css. la página siempre se carga scrolleada a la izquierda. entonces la única manera que sé de centrarla es usar javascript
  #5 (permalink)  
Antiguo 08/04/2011, 10:07
 
Fecha de Ingreso: febrero-2011
Mensajes: 54
Antigüedad: 3 años, 5 meses
Puntos: 13
Respuesta: Mostrar centrado un DIV aunque se salga de pantalla

Hola Isabel

Releer los temas es una costumbre sanísima que aporta mucho para el aprendizaje.

Si compones con css una página con un contenedor principal sujeto a posicionamiento relacionado al body sí ocurre lo que tu dices: la carga se efectúa desde el ángulo cero (top y left en 0); pero se puede forzar a ese contenedor principal a que no tenga en cuenta su relación con el body y que cargue respecto al punto cero con valores negativos o cero según convenga de acuerdo a la resolución del monitor que la cargue.

De esta forma se puede, siguiendo el ejemplo del autor del hilo, cargar una página diseñada para 1280px de ancho (o mayor) en un monitor de menor ancho, p.e. 1024px, de tal forma que lo sobrante rebose por los lados y siempre quede centrado el eje central de la página.

Tengo construido un ejemplo completo, pero no lo tengo en este ordenata desde el que estoy ahora. Luego vuelvo al tema y dejo el código. Bastará un copy-paste en un html vacío y probarlo 'resizando' el navegador.
  #6 (permalink)  
Antiguo 08/04/2011, 14:05
 
Fecha de Ingreso: febrero-2011
Mensajes: 54
Antigüedad: 3 años, 5 meses
Puntos: 13
Respuesta: Mostrar centrado un DIV aunque se salga de pantalla

Aquí el ejemplo:

Probarlo haciendo un copy en un html limpio. Si se prueba en un monitor distinto a 1280px de ancho, cambiar la medida del ancho del #contenedor por la propia y el margin-left (debe ser la mitad del ancho de nuestro monitor en negativo); y resizar el navegador para ver lo que ocurre en el desborde de los laterales: siempre queda centrado el conjunto (mirar la raya vertical que marca el centro de la pantalla).

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Page</title>
<style type="text/css">
html, body {
	width: 100%; 
	height: 100%; 
	margin: 0; 
	padding: 0; 
	overflow: hidden; 
	position: relative;
}
#contenedor {
	width: 1280px; /* cambiar esta medida según el ancho del monitor en el que se pruebe */
	height: 80%;
	top: 10%;
	position: absolute;
	margin-left: -640px; /* la mitad del width en negativo */
	left: 50%;
}
#izquierdo {
	position: relative;
	left: 0;
	width: 150px;
	height: 100%;
	background-color: #00f;
}
#derecho {
	position: absolute;
	left: 150px;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #ccc;
}
.marca_central {
	play-during;
	position: absolute;
	width: 2px;
	margin-left: -1px;
	left: 50%;
	height: 100%;
	background-color: #000;
	z-index: 10;
}
</style>
</head>

<body>
<p>Este el fondo del body y no se ve afectado por el desbordamiento de contenido en resoluciones menores: siempre queda a cero de la izquierda</p>	
	<!-- probar esta composición cambiando el tamaño del navegador (resizando)-->
<div id="contenedor">
	<div id="izquierdo">Lado izquierdo</div>
	<div id="derecho">Lado derecho</div>
</div>
<div class="marca_central"><!--solo para efecto visual del centro de la pantalla--></div>
</body>

</html> 
  #7 (permalink)  
Antiguo 08/04/2011, 15:12
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 4.403
Antigüedad: 6 años, 1 mes
Puntos: 878
Respuesta: Mostrar centrado un DIV aunque se salga de pantalla

continuo diciendo lo mismo; si le he entendido, el no quiere usar unidades relativas, por lo tanto ha de usar javascript.

aunque interesante el ejemplo, se puede obtener el mismo resultado usando la propiedad float. algo como esto
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Page</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
}
#contenedor {
width: 100%;
height: 80%;
}
#izquierdo {
float: left;
width: 20%;
height: 100%;
background-color: #00f;
}
#derecho {
float: right;
width: 20%;
height: 100%;
background-color: #ccc;
}
#marca_central {
float: left;
width: 60%;
height: 100%;
background-color: #000;
}
</style>
</head>

<body>
<div id="contenedor">
<div id="izquierdo">Lado izquierdo</div>
<div id="marca_central">Lado central</div>
<div id="derecho">Lado derecho</div>
</div>


</body>
</html>
  #8 (permalink)  
Antiguo 08/04/2011, 17:15
 
Fecha de Ingreso: febrero-2011
Mensajes: 54
Antigüedad: 3 años, 5 meses
Puntos: 13
Respuesta: Mostrar centrado un DIV aunque se salga de pantalla

Isabel, tu ejemplo y el mío no tienen nada que ver: se comportan de forma distinta. En tus cambios no se produce el desbordamiento de contenido hacia el exterior izquierdo y derecho, manteniendo el centro; tu ejemplo, al resizar, lo que hace es mantener la estructura inicial a otro tamaño y no produce el rebosamiento lateral manteniendo el central, que es lo que entiendo que pide el autor del hilo.

Respecto a las medidas, en mi ejemplo no se usan medidas relativas como tú dices, las medidas están ajustadas a la demanda del peticionario, es decir 1280px de ancho y menores.

Creo que no has probado mi ejemplo y que no lo has resizado (junto con tu ejemplo) para ver que los comportamientos son distintos.
  #9 (permalink)  
Antiguo 10/04/2011, 14:04
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 4.403
Antigüedad: 6 años, 1 mes
Puntos: 878
Respuesta: Mostrar centrado un DIV aunque se salga de pantalla

tienes razón cuando dices que no lo probé, solamente lo analicé mentalmente y por lo visto no muy bien. ahora entiendo a que te refieres, aunque creo que no es lo que el usuario pretende. yo entiendo que cuando la resolución es menor se crea scroll horizontal y quiere que al abrir la página, ésta se scrollé hasta el centro. dejando así el desbordamiento lateral accesible y no solapado

siguiendo con tu código, he hecho esto casi que al vuelo. se acerca a lo que haces, mantener el centro con left:50%, sólo que no hay solapamiento del bloque central, cuando llega al tope del ancho. qué te parece??
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Page</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
}

.marca_central {
position: absolute;
left: 50%;
top: 0;
width: 2px;
margin-left: -1px;
height: 100%;
background-color: #000;
z-index: 10;
}


#contenedor {
margin: 0 auto;
width: 1000px;
height: 80%;
}

.contenido {
width: 100%;
height: 100%;
background-color: yellow;
}
</style>
</head>

<body>
<div id="contenedor">
<div class="contenido">Texto</div>
</div>

<div class="marca_central"></div>
</body>

</html>
  #10 (permalink)  
Antiguo 10/04/2011, 17:51
 
Fecha de Ingreso: febrero-2011
Mensajes: 54
Antigüedad: 3 años, 5 meses
Puntos: 13
Respuesta: Mostrar centrado un DIV aunque se salga de pantalla

Hola Isabel,

Interesante propuesta. Yo creo que el autor del hilo tiene, ahora, material suficiente para adaptarlo a su sitio e intentar solucionar su problema. Porque, de momento, parece más un hilo nuestro que de él.

Esperemos que muestre señales de vida y aclare un poco más su petición.

Saludos
  #11 (permalink)  
Antiguo 13/04/2011, 12:03
Avatar de bNd170  
Fecha de Ingreso: agosto-2009
Ubicación: $this->setLocation('Valencia', 'Spain');
Mensajes: 294
Antigüedad: 4 años, 11 meses
Puntos: 12
Respuesta: Mostrar centrado un DIV aunque se salga de pantalla

Perdon por la tardanza en responderos chicos y agradezco el debate llevado a cabo para resolverme la ducha, he copiado y pegado el codigo cedido por conexion y es esto lo que queria, intentaré implementarlo en el codigo y ya os digo algo.

Gracias por la ayuda y disculpas nuevamente por la tardanza

Etiquetas: pantalla, centrar
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 05:28.
SEO by vBSEO 3.3.2