Foros del Web » Creando para Internet » HTML »

centrar barra de desplazamiento?

Estas en el tema de centrar barra de desplazamiento? en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/09/2009, 04:54
 
Fecha de Ingreso: enero-2009
Mensajes: 86
Antigüedad: 8 años, 10 meses
Puntos: 0
centrar barra de desplazamiento?

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!^^
  #2 (permalink)  
Antiguo 26/09/2009, 15:51
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.728
Antigüedad: 8 años, 6 meses
Puntos: 1512
Respuesta: centrar barra de desplazamiento?

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.
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #3 (permalink)  
Antiguo 26/09/2009, 19:20
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
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
  #4 (permalink)  
Antiguo 28/09/2009, 05:07
 
Fecha de Ingreso: enero-2009
Mensajes: 86
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: centrar barra de desplazamiento?

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
  #5 (permalink)  
Antiguo 28/09/2009, 11:32
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: centrar barra de desplazamiento?

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
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 09:42.