Scrollbar sobre parte de una página

alapaco · #1 (**permalink**) 11/02/2009, 11:39

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.

kseso? · #2 (**permalink**) 11/02/2009, 11:55

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

alapaco · #3 (**permalink**) 11/02/2009, 12:01

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;
}

alapaco · #4 (**permalink**) 11/02/2009, 12:06

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>

alapaco · #5 (**permalink**) 11/02/2009, 12:38

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 ??