Ver Mensaje Individual
  #3 (permalink)  
Antiguo 26/09/2009, 18:20
Avatar de deirdre
deirdre
 
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 15 años
Puntos: 45
Respuesta: centrar barra de desplazamiento?

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