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