Foros del Web » Creando para Internet » CSS »

Scrollbar con css corre contenido a la izquierda

Estas en el tema de Scrollbar con css corre contenido a la izquierda en el foro de CSS en Foros del Web. Tengo un sitio que tiene fijo el header y donde al resto de la página se le puede hacer scroll, esto lo hice y anda ...
  #1 (permalink)  
Antiguo 06/03/2009, 11:47
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
Pregunta Scrollbar con css corre contenido a la izquierda

Tengo un sitio que tiene fijo el header y donde al resto de la página se le puede hacer scroll, esto lo hice y anda fenomenalmente con código de los tutoriales que publicaron en este foro.
El problema es que si en una página necesita mostrarse la barra de scroll se corre el contenido unos pixeles hacia la izquierda por la inserción de la barra, logicamente esto me provoca que el contenido quede descentrado con respecto al header.

Hay forma de solucionar esto ??
Les dejo el código que uso, gracias de antemano!

Este es el código base de mi index.php:

Código HTML:
<div>
	<div id="tope"></div>
	<div align="center" id="fijo">
		<div id="header"><? require_once("header.php") ?></div>
		<div id="menu"><? require_once("menu.php") ?></div>
		<div align="left" 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> 

Y este es el css basico:

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

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

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

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

#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: 66px;
	left: 0;
	margin-top: 4px;
	top: 4px;
	width: 770px;
	z-index: 2;
}

#menu {
	background: #FFF;
	height: 24px;
	margin-bottom: 4px;
	margin-top: 4px;
	width: 100%;
	z-index: 3;
}

#title {
	background: #00A4E4;
	height: 44px;
	width: 770px;
	z-index: 3;
}

#tope {
	height: 108px;
	top: 0;
}
__________________
__________________
Álvaro Lapacó
  #2 (permalink)  
Antiguo 06/03/2009, 12:01
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 12 años, 3 meses
Puntos: 54
Respuesta: Scrollbar con css corre contenido a la izquierda

has probado de corregir el contenido utilizando previaemnte
html{overflow-y:scroll}
__________________
Degiovanni Emilio
developtus.com
  #3 (permalink)  
Antiguo 06/03/2009, 12:48
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 con css corre contenido a la izquierda

Lo que pasa es que con ese pedazo de código se me agrega la barra de scroll del navegador en toda la página, incluido el header, cosa que quiero evitar.

Gracias igual.
__________________
__________________
Álvaro Lapacó
  #4 (permalink)  
Antiguo 09/03/2009, 07:18
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 con css corre contenido a la izquierda

Bueno, al final lo tuve que resolver con javascript.
__________________
__________________
Álvaro Lapacó
  #5 (permalink)  
Antiguo 02/05/2012, 04:45
 
Fecha de Ingreso: mayo-2012
Mensajes: 3
Antigüedad: 5 años, 7 meses
Puntos: 0
Respuesta: Scrollbar con css corre contenido a la izquierda

Hola alapaco
tengo el mismo problema que vos con la barra del scroll, se me mueve todo el sitio para la izquierda unos pixels cuando se activa el scroll

Como fue que lo resolviste con javascript ??

Muchas Gracias
  #6 (permalink)  
Antiguo 02/05/2012, 08:46
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: Scrollbar con css corre contenido a la izquierda

primero, este tema tiene más de 3 años y la leyenda avisando que no revivas temas tan antiguos, es bastante visible. para la próxima ya sabes

segundo, esto es algo que se puede resolver con css. ejecútalo tal y como estás y después quitale la propiedad overflow
Cita:
<!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 content="text/html; http-equiv="Content-Type" charset=utf-8"/>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
position: relative;
}


html, body {
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
background-color: red;
overflow: hidden;
}


#contendor-fijado {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
z-index: 99;
}


#contendor-fijado div#fijado {
width: 400px;
height: 40px;
margin: 0 auto;
background-color: green;
}


#contenedor {
width: 1000px;
height: auto;
margin: 0 auto;
background-color: red;
}


#contenido {
width: 100%;
height: auto;
}
</style>
</head>
<body>

<div id="contendor-fijado"><div id="fijado"></div></div>

<div id="contenedor">

<div id="contenido">

<div>
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
<br /><br /><br /><br /><br /><br />
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
<br /><br /><br /><br /><br /><br />
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
<br /><br /><br /><br /><br /><br />
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
<br /><br /><br /><br /><br /><br />
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
<br /><br /><br /><br /><br /><br />
Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.
</div>

</div>

</div>

</body>
</html>
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
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 19:20.