Mostrar centrado un DIV aunque se salga de pantalla

bNd170 · #1 (**permalink**) 07/04/2011, 02:20

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

IsaBelM · #2 (**permalink**) 07/04/2011, 05:23

en javascript tienes el método scrollTo(x, y) con ello puedes scrollear la página a tu conveniencia.

conexion · #3 (**permalink**) 07/04/2011, 17:57

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.

IsaBelM · #4 (**permalink**) 08/04/2011, 06:21

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

conexion · #5 (**permalink**) 08/04/2011, 10:07

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.

conexion · #6 (**permalink**) 08/04/2011, 14:05

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>

IsaBelM · #7 (**permalink**) 08/04/2011, 15:12

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>

conexion · #8 (**permalink**) 08/04/2011, 17:15

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.

IsaBelM · #9 (**permalink**) 10/04/2011, 14:04

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>

conexion · #10 (**permalink**) 10/04/2011, 17:51

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

bNd170 · #11 (**permalink**) 13/04/2011, 12:03

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