centrar barra de desplazamiento?

klamptax · #1 (**permalink**) 26/09/2009, 03:54

Buenas! Me ha surgido un pequeño problema al realizar una web, y es que la hice sin mirar demasiado el tema de las resoluciones y cuando estuvo terminada al subirla me dijo un amigo que no se le veia bien (el tenia resolucion de 1024*768), le salia descuadra, el banner del contenido, del pie, etc... bueno esto está arreglado, lo que quisiera es lo siguiente:

al visualizar la pagina con una resolucion de 1024*768 o inferior, la página no se ve como se debería, porque tiene una serie de botones alineados horizontalmente a modo de menú, que la suma de todos es de 1150px, por lo cual el ultimo boton (son 6) no se llega a ver entero con esa resolucion, ahora bien automáticamente me crea abajo una barra de desplazamiento para mostrar el contenido íntegro de la web (que como es mayor, no cabe, necesita de dicha barra)

el objetivo sería, si exisite o exisitera alguna linea de codigo, propiedad o comando, que en caso que sea necesaria la barra de desplazamiento te la centro automáticamente con el fin de ver todos los botones (aunque los dos de los extremos no enteros), es posible esto que planteo??

si no entendisteis lo explico de nuevo xD

gracias!^^

abimaelrc · #2 (**permalink**) 26/09/2009, 14:51

De verdad que me perdí, pero lo que te recomiendo es que establezcas un tamaño a la pagina y no dejes que la pagina se vea de acuerdo al tamaño de la resolución. Por ejemplo si lo recomendable es que la pagina se vea 960px debe establecerlo de ese tamaño, lo que la persona va a tener que hacer es mover la pagina de derecha o izquierda para ver la pagina web.

deirdre · #3 (**permalink**) 26/09/2009, 18:20

Hola...

Cuidado que son raras algunas peticiones!!

Es el problema que tiene un diseño a 1150px de ancho. Como dice abimaelrc, una medida que abarca desde la resolución más utilizada actualmente (1024px) y que queda bien hasta en las 'wide' (1280, 1440, etc) es el ancho 960px.

Como ejercicio de posicionamientos te paso este código que, aunque no consigue centrar la barra scroll horizontal, sí consigue el efecto que deseas: forzar a un centramiento de los 1150px del contenido en pantallas de 1024px, y que en pantallas de mayor ancho no muestra nada anormal.

Haz un copy-paste y debes probarlo en pantalla de 1024 y mayores (p.e. 1280). En 1280 queda 'normal' y en 1024 el pseudo-menu superior queda centrado, perdiéndose parte del item1 y del item6 de forma proporcional.

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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejercicio de css</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	outline: 0;
}
html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#general {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	overflow-x: auto;
}
#contenedor {
	width: 1150px;
	height: 100%;
	position: absolute;
	margin-left: -575px;
	left: 50%;
	top: 0;
	background-color: #99FFCC;
	border: 1px solid #444;
	overflow: auto;
	text-align: center;
	color: #fff;
}
span {
	float: left;
	width: 190px;
	height: 50px;
	background-color: #000;
	color: #fff;
	line-height: 50px;
	border: 1px solid #444;
	text-align: center;
}
.span_corregido {
	width: 188px; /* 'span_corregido' es necesario porque 1150px no es exactamente divisible entre 6*/
}
</style>
</head>

<body>
	<div id="general">
		<div id="contenedor">
			<span>Item 1</span>
			<span>Item 2</span>
			<span>Item 3</span>
			<span>Item 4</span>
			<span>Item 5</span>
			<span class="span_corregido">Item 6</span>
		</div>
	</div>
</body>

</html>

Bye

klamptax · #4 (**permalink**) 28/09/2009, 04:07

la solucion es buenisima!!

el problema es que la web tiene también contenido vertical, y me elimina la barra de desplazamiento vertical y por lo tanto no puedo ver el contenido de la web!

alguna mejora de la solucion? XD

deirdre · #5 (**permalink**) 28/09/2009, 10:32

Hola klamptax

Aquí la solución (espero...)

Naturalmente tienes que ajustar las medidas a tu proyecto.

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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejercicio de css</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	outline: 0;
}
html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#general {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: auto; /* no tocar */
	background-color: #99FFCC;
}
#menu {
	width: 1150px;
	height: 52px;
	position: absolute;
	margin-left: -575px;
	left: 50%;
	top: 0;
	background-color: #99FFCC;
	border: 1px solid #444;
	overflow: hidden;
	text-align: center;
	color: #fff;
}
#contenido {
	position: relative;
	top: 54px;
	width: 960px;
	margin:0 auto;
	background-color:#ffc;
	overflow: auto;
	border-left: 1px solid #444;
	border-right: 1px solid #444;
}
span {
	float: left;
	width: 190px;
	height: 50px;
	background-color: #000;
	color: #fff;
	line-height: 50px;
	border: 1px solid #444;
	text-align: center;
}
.span_corregido {
	width: 188px; /* 'span_corregido' es necesario porque 1150px no es exactamente divisible entre 6*/
}
.simulacro_de_contenido {
	width: 100%;
	height: 2000px;
	text-align: center;
}
.parrafo { /* simulacro de texto */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 100px;
}
</style>
</head>

<body>
	<div id="general">
		<div id="menu">
			<span>Item 1</span>
			<span>Item 2</span>
			<span>Item 3</span>
			<span>Item 4</span>
			<span>Item 5</span>
			<span class="span_corregido">Item 6</span>
		</div>
		<div id="contenido">
			<div class="simulacro_de_contenido">
			<p class="parrafo">Simulacro de contenido</p>
			<p class="parrafo">Simulacro de contenido</p>
			<p class="parrafo">Simulacro de contenido</p>
			<p class="parrafo">Simulacro de contenido</p>
			<p class="parrafo">Simulacro de contenido</p>
			<p class="parrafo">Simulacro de contenido</p>
			<p class="parrafo">Simulacro de contenido</p>
			<p class="parrafo">Simulacro de contenido</p>
			<p class="parrafo">Simulacro de contenido</p>
			<p class="parrafo">Simulacro de contenido</p>
			<p class="parrafo">Simulacro de contenido</p>
			<p class="parrafo">Simulacro de contenido</p>
			<p class="parrafo">Simulacro de contenido</p>
			<p class="parrafo">Simulacro de contenido</p>
			<p class="parrafo">Simulacro de contenido</p>
			<p class="parrafo">Simulacro de contenido</p>
			<p class="parrafo">Simulacro de contenido</p>
			<p class="parrafo">Simulacro de contenido</p>
			<p class="parrafo">Simulacro de contenido</p>
			<p class="parrafo">Simulacro de contenido</p>
			</div>
		</div>
	</div>
</body>

Bye