Foros del Web » Creando para Internet » CSS »

Scrollbar sobre parte de una página

Estas en el tema de Scrollbar sobre parte de una página en el foro de CSS en Foros del Web. Tengo un sitio hecho con un header y footer siempre fijos y sobre el contenido central se agrega una barra de scroll, esto lo hago ...
  #1 (permalink)  
Antiguo 11/02/2009, 11:39
Avatar de alapaco  
Fecha de Ingreso: septiembre-2003
Ubicación: Caballito - Buenos Aires - Argentina - América del Sur - Planeta Tierra - Sistema Solar - Vía Láctea
Mensajes: 216
Antigüedad: 14 años, 3 meses
Puntos: 5
Scrollbar sobre parte de una página

Tengo un sitio hecho con un header y footer siempre fijos y sobre el contenido central se agrega una barra de scroll, esto lo hago utilizando algunas de los comentarios que recogí en este foro, como esto:

Código:
html, body {
	background-color: #FFF;
	height: 100%;
	overflow: hidden;
	width: 100%;
}

Esto funciona a las maravillas, pero resulta que ahora en una de estas páginas necesito agregar elementos mediante javascript, el problema que me surge al hacer esto es que los elementos que agrego se van agregando correctamente hacia el fondo de la página (antes del footer) y la barra de scroll se incrementa de manera proporcional, pero cuando muevo la barra de scroll el contenido de la página no se mueve..

Alguien conoce alguna forma de solucionar esto ??
No me queda claro si lo puedo solucionar desde javascript o desde css, y mucho menos claro me queda como.

Desde ya, gracias.
__________________
__________________
Álvaro Lapacó
  #2 (permalink)  
Antiguo 11/02/2009, 11:55
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Scrollbar sobre parte de una página

Quizás si muestras el código utilizado en la caja donde alojas los contenidos podríamos hacernos una idea.

Así, sólo cabrían suposiciones, y sería una suerte acertar.
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 11/02/2009, 12:01
Avatar de alapaco  
Fecha de Ingreso: septiembre-2003
Ubicación: Caballito - Buenos Aires - Argentina - América del Sur - Planeta Tierra - Sistema Solar - Vía Láctea
Mensajes: 216
Antigüedad: 14 años, 3 meses
Puntos: 5
Respuesta: Scrollbar sobre parte de una página

Pero como no.
El body del index.php (que es donde manejo todo el sitio) es esto:

Código HTML:
<body onLoad="load()" onResize="resize()">
<div>
	<input id="ContentUrl" type="hidden" value="">
	<input id="PageId" type="hidden" value="-1">
	<div id="tope"></div>
	<div id="fijo">
		<div align="center" id="header"><? require_once("header.php") ?></div>
		<div id="menu"><? require_once("menu.php") ?></div>
		<div id="title" style="display: none; height: 0;"><? require_once("title.php") ?></div>
	</div>
	<div align="center" id="footer"><div id="footerIn"><? require_once("footer.php")?></div></div>
	<div id="content"><div id="contentIn"><? require_once(GetPagePath($pageid))?></div></div>
</div>
</body> 

Y el CSS es el siguiente:

Código:
* {
	margin: 0;
	padding: 0;
}

html, body {
	background-color: #FFF;
	height: 100%;
	overflow: hidden;
	width: 100%;
}

#botonPermisos {
	cursor: hand;
	vertical-align: top;
}

#content {
	left: 0;
	overflow: auto;
	top: 0;
	width: 100%;
	z-index: 1;
}

#contentIn {
	margin:0 auto;
	width: 768px;
}

#fechaHomePage {
	color: #8C8C8C;
	font-family: Verdana;
	font-size: 10px;
	left: 330px;
	position: absolute;
}

#fijo {
	height: 108px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 0;
}

#footer {
	bottom: 0;
	height: 32px;
	position: absolute;
	width: 100%;
	z-index: 5;
}

#footerIn {
	margin:0 auto;
	width: 768px;
}

#header {
	background: #E7E7E7;
	height: 54px;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 2;
}

#imagen1HomePage {
	vertical-align: top;
}

#menu {
	background: #FFF;
	height: 40px;
	left: 0;
	top: 54px;
	width: 100%;
	z-index: 3;
}

#title {
	left: 0;
	top: 108px;
	width: 100%;
	z-index: 3;
}

#tope {
	height: 96px;
	top: 0;
}
__________________
__________________
Álvaro Lapacó
  #4 (permalink)  
Antiguo 11/02/2009, 12:06
Avatar de alapaco  
Fecha de Ingreso: septiembre-2003
Ubicación: Caballito - Buenos Aires - Argentina - América del Sur - Planeta Tierra - Sistema Solar - Vía Láctea
Mensajes: 216
Antigüedad: 14 años, 3 meses
Puntos: 5
Respuesta: Scrollbar sobre parte de una página

Este sería el HTML que va dentro del div contentIn:

Código HTML:
<script language="JavaScript" src="js/encuesta.js"></script>
<iframe height="0" id="iframeEncuesta" name="iframeEncuesta" src="" width="0"></iframe>
<div>
	<form action="/modules/abm_encuestas/procesar_encuesta.php" id="formEncuesta" method="post" name="formEncuesta" target="iframeEncuesta" onSubmit="return ValidarForm(formEncuesta)">
		<input id="id" name="id" type="hidden" value="<?= ($alta)?"":$_REQUEST["id"]?>">
		<input id="tipoOp" name="tipoOp" type="hidden" value="<?= ($alta)?"A":"M"?>">
		<input id="activaAnterior" name="activaAnterior" type="hidden" value="<?= ($alta)?"F":$row["EN_ACTIVA"]?>">
		<p id="separadores" style="left:240px; position:relative;">
			<label for="fechaAlta">Fecha de Alta</label>
			<input class="FormInputText" id="fechaAlta" name="fechaAlta" type="text" value="<?= ($alta)?"":$row["FECHAALTA"]?>" readonly />
		</p>
		<p id="separadores" style="left:286px; position:relative;">
			<label for="titulo">Título</label>
			<input class="FormInputText" id="titulo" maxlength="128" name="titulo" type="text" value="<?= ($alta)?"":$row["EN_TITULO"]?>" />
		</p>
		<p id="separadores" style="left:278px; position:relative;">
			<label for="detalle">Detalle</label>
			<input class="FormInputText" id="detalle" maxlength="256" name="detalle" type="text" value="<?= ($alta)?"":$row["EN_DETALLE"]?>" />
		</p>
		<p id="separadores" style="left:279px; position:relative;">
			<label for="activa">Activa</label>
			<input id="activa" name="activa" type="checkbox" <?= ($alta)?"":($row["EN_ACTIVA"] == "T")?"checked":""?> />
		</p>
		<p id="separadores" style="left:183px; position:relative;">
			<label for="permiteModificaciones">Permite modificaciones</label>
			<input id="permiteModificaciones" name="permiteModificaciones" type="checkbox" <?= ($alta)?"":($row["EN_PERMITEMODIFICACIONES"] == "T")?"checked":""?> />
		</p>
		<p id="separadores" style="left:64px; position:relative;">
			<label for="mostrarImagen">Mostrar imagen en la cabecera de la página</label>
			<input id="mostrarImagen" name="mostrarImagen" type="checkbox" <?= ($alta)?"":($row["EN_MOSTRARIMAGENCABECERA"] == "T")?"checked":""?> />
		</p>
		<div id="preguntas">
			<p id="separadores" style="left:64px; position:relative;">
				<span id="preguntasTitulo">Preguntas</span>
				<img alt="Agregar pregunta" border="0" src="/images/add16.png" style="vertical-align:text-bottom; cursor:hand;" onClick="agregarPregunta()" />
			</p>
			<p id="separadores">
				<hr id="linea">
			</p>
		</div>
		<p align="center" id="separadores">
			<input class="BotonBlanco" name="btnGuardar" type="submit" value="Guardar">
			<input class="BotonBlanco" name="btnCancelar" type="button" value="Cancelar" onClick="history.back();">
		</p>
	</form>
</div> 

Y este el css particular de esa página:

Código:
<style>
#detalle {
	width: 320px;
}

#fechaAlta {
	width: 88px;
}

#linea {
	background-color: #333;
	border: 0;
	color: #9CB5CB;
	height: 1px;
	width: 84%;
}

#preguntas {
	margin-top: 32px;
	position: relative;
}
	
#preguntasTitulo {
	font-family: Verdana;
	font-size: 12pt;
	font-weight: bold;
	margin-right: 8px;
}
	
#separadores {
	margin-top: 4px;
	position: relative;
}

#titulo {
	width: 160px;
}

.Opcion {
	border: 1px solid #808080;
	color: #808080;
	font-family: Verdana;
	font-size: 8pt;
	font-weight: bold;
	width: 272px;
}

.Pregunta {
	border: 1px solid #808080;
	color: #808080;
	font-family: Verdana;
	font-size: 8pt;
	font-weight: bold;
	width: 512px;
}
</style>
__________________
__________________
Álvaro Lapacó
  #5 (permalink)  
Antiguo 11/02/2009, 12:38
Avatar de alapaco  
Fecha de Ingreso: septiembre-2003
Ubicación: Caballito - Buenos Aires - Argentina - América del Sur - Planeta Tierra - Sistema Solar - Vía Láctea
Mensajes: 216
Antigüedad: 14 años, 3 meses
Puntos: 5
Respuesta: Scrollbar sobre parte de una página

Estuve probando un poco y ahora veo que no es el javascript el problema sino que estaba poniendo la posición de los elementos en relative por eso no andaba el scroll.
El tema es que si le saco el position:relative a los elementos, obviamente se alinean todos hacia la izquierda....como puedo solucionar esto ??
__________________
__________________
Álvaro Lapacó
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 13:00.