Foros del Web » Creando para Internet » CSS »

Problema con scroll horizontal

Estas en el tema de Problema con scroll horizontal en el foro de CSS en Foros del Web. Hola a todos, Llevo unos días buscando una solución a este problemilla y creo que estoy atascado. Estoy haciendo una web con navegación horizontal, la ...
  #1 (permalink)  
Antiguo 07/01/2011, 09:33
Avatar de idukke  
Fecha de Ingreso: junio-2009
Mensajes: 33
Antigüedad: 8 años, 5 meses
Puntos: 2
Problema con scroll horizontal

Hola a todos,
Llevo unos días buscando una solución a este problemilla y creo que estoy atascado.
Estoy haciendo una web con navegación horizontal, la capa donde esta el contenido mide unos 5000px de ancho, pero solo quiero que se vean 1000px, en este punto le añado dos capas a ambos lados en position:fixed para que no se vea lo que sobra. Mi problema es que al añadir dichas capas pierdo el scroll horizontal de la capa del contenido.
Espero haberme explicado :S

css:
Código HTML:
body{width:100%;background: url('imagenes/fondo_body2.png') #d6d2c3 repeat-x;margin:0px;font-family:arial,verdana,helvetica,sans-serif;}
#middle,#bottom{width: 1000px;clear:both;margin: auto;}
#top{position:fixed;top:0px;left:0px;width:100%;height:99px;margin:50px auto 0px auto;color:grey;background:url('imagenes/top_fondo2.png') repeat-x;text-align:right;}
#middle{position:absolute;max-height:550px;margin-top:150px;top:0px;left:-1000px;z-index:-1;border:solid 1px green;}
#l_iz,#l_de{position:fixed;top:0px;width:800px;height:700px; #d6d2c3 repeat-x;border:solid 1px red;}
#l_de{right:50%;margin-right:-1300px;background: url('imagenes/fondo_body2.png')}
#l_iz{left:50%;margin-left:-1300px;background: url('imagenes/fondo_body2.png')}
#bottom{height: 50px;}
#uno,#dos,#tres,#cuatro,#cinco{width:1000px;overflow-x:hidden;}
#todo li{display:inline-block;margin:0px;}
#todo{list-style-type:none;	white-space:nowrap;	padding:0px;}
#btn_div{position:fixed;left:50%;margin-left:-150px;top:0px;border:solid 1px red;width:300px;}
#botones li{display:inline-block;}
html:
Código HTML:
<html>
<body>
<head>
    <title>titulo</title>    
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel = stylesheet type = "text/css" href = "estilo.css">
	<script type="text/javascript" src="dzinne.js"></script>
</head>
<div id="l_iz"/>
<div id="l_de"/>
<div id="btn_div">
<ul id="botones">
<li><a href="#uno" onclick="smoothScroll('uno'); return false">Uno</a></li>
<li><a href="#dos" onclick="smoothScroll('dos'); return false">Dos</a></li>
<li><a href="#tres" onclick="smoothScroll('tres'); return false">Tres</a></li>
<li><a href="#cuatro" onclick="smoothScroll('cuatro'); return false">Cuatro</a></li>
<li><a href="#cinco" onclick="smoothScroll('cinco'); return false">Cinco</a></li>
</ul>
</div>
<div id="top">
</div>
<div id="middle">
<ul id="todo">
	<li>
	<div id="uno">
		<p><strong>Lorem 1</strong> ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt quam non nibh rutrum vel sollicitudin nisi suscipit. Pellentesque orci tellus, elementum in aliquam sit amet, tempor eget purus. Donec sit amet sagittis dolor.</p>
	</div>
	</li>
	<li>
	<div id="dos">
		<p><strong>Lorem 2</strong> ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt quam non nibh rutrum vel sollicitudin nisi suscipit. Pellentesque orci tellus, elementum in aliquam sit amet, tempor eget purus. Donec sit amet sagittis dolor. Duis et ultrices risus. Phasellus ac augue a nisl tincidunt vehicula.</p>
	</div>
	</li>
	<li>
	<div id="tres">
		<p><strong>Lorem 3</strong> ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt quam non nibh rutrum vel sollicitudin nisi suscipit. Pellentesque orci tellus, elementum in aliquam sit amet, tempor eget purus. Donec sit amet sagittis dolor.</p>
	</div>
	</li>
	<li>
	<div id="cuatro">
		<p><strong>Lorem 4</strong> ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt quam non nibh rutrum vel sollicitudin nisi suscipit. Pellentesque orci tellus, elementum in aliquam sit amet, tempor eget purus. Donec sit amet sagittis dolor. Duis et ultrices risus. Phasellus ac augue a nisl tincidunt vehicula. </p>
	</div>
	</li>
	<li>
	<div id="cinco">
		<p><strong>Lorem 5</strong> ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt quam non nibh rutrum vel sollicitudin nisi suscipit. Pellentesque orci tellus, elementum in aliquam sit amet, tempor eget purus. Donec sit amet sagittis dolor. </p>
	</div>
	</li>
</ul>
</div>
<div id="bottom"></div>
</body>
</html> 
A ver si me podeis echar un cable.... y muchisimas gracias de antemano
Un saludo

Última edición por idukke; 07/01/2011 a las 11:17
  #2 (permalink)  
Antiguo 10/01/2011, 11:58
Avatar de Ruben_JD  
Fecha de Ingreso: diciembre-2003
Ubicación: Quito-Ecuador
Mensajes: 218
Antigüedad: 14 años
Puntos: 7
Respuesta: Problema con scroll horizontal

Hola idukke, utiliza overflow-x o overflow-y en el div donde quieras que aparesca siempre el scroll o no apareca con la propiedad hidden o auto.
__________________
RubénJ. Regresando al foro despues de un par de años. A preguntar más de las novedades del foro.

Última edición por Ruben_JD; 10/01/2011 a las 11:59 Razón: me falto
  #3 (permalink)  
Antiguo 11/01/2011, 12:35
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Problema con scroll horizontal

Mi opinión es que deberías incluir la información que quieres mostrar dentro de un contenedor div de ancho 1000px. A este contenedor le das la propiedad overflow:scroll-x.
De esta forma no necesitas capas a los lados.
En lugar de un tamaño fijo puedes usar también un porcentaje de la pantalla (p.ej. 75%), dar un tamaño máximo y/o mínimo con max-width o min-width o combinaciones de estas propiedades. De esta manera puedes controlar el tamaño de la ventana que quieres que quede visible.

Etiquetas: horizontal, scroll
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 04:28.