Ver Mensaje Individual
  #7 (permalink)  
Antiguo 27/02/2012, 20:33
furoya
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 6 meses
Puntos: 317
Respuesta: sidebar fixed ...

Sí. El 'comportamiento IE6' es que el panel derecho (el móvil) se achica al redimensionar el ancho, pero en un momento deja de hacer wrapping porque ya no puede ajustar más, y entonces salta la barra horizontal y el panel derecho empieza a ocultarse por la derecha; no se esconde detrás del izquierdo. Y por supuesto, si a mitad de camino le movemos la scrollbar para ver lo oculto, el panel izquierdo no queda "fijo", sino que se va por la izquierda "empujado" por el derecho. En nigún momento se enciman o solapan entre ellos. Es lógico, pero no sé si a pablovhau le sirve porque no tiene su sidebar fija, en el eje X se mueve. Aunque la segunda versión (con JS) hace justamente eso del IE6 en horizontal : se mantiene fijo durante el arrastre vertical, pero si arrastramos horizontalmente el panel derecho "empuja" al panel izquierdo.

En cualquiera de los otros casos, ambos códigos mandan el panel derecho tras el izquierdo, y la barra ocupa también todo el ancho de la página. Y que no empuje un elemento con posición fija también es lógico, ¿pero que otra cosa puede hacer sino solaparse cuando ya no tiene cómo reducir el panel derecho? A algún lado tiene que ir cuando lo desplazamos. Bueno, en los ejemplos que pusimos, se va hacia la izquierda por detrás del panel fijo.

De todas formas estuve intentando que me saliera algo. Creo recordar que hace mucho tiempo inventé una cosa así, pero vaya uno a saber si solamente funcionaba con Netscape.
Por ahora, llegué hasta acá

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title> BANNER / MENÚ FIJO 2.</title>

</head>
<body style="overflow: hidden; margin:0; padding:0; width: auto; height: auto; 
background: blue">

<div style="overflow-y: hidden; overflow-x: auto; margin: 0; padding: 0; width: 100%; 
height: 100%; background: yellow; position: absolute; left: 0; top: 0;">

<div style="position:absolute; top:10px; left:10px; /* right:10px hace efecto interesante */">

<img src="http://img854.imageshack.us/img854/918/martinsnoelmanuelescasa.jpg" 
width=240 height=320>
<ul style="list-style-type: none; background:silver; white-space:nowrap; margin-right: 600px">
<li><a href="http://img710.imageshack.us/slideshow/webplayer.php?id=antoniosegui.jpg" 
style="color: black; font: bold 1em/1.5em monospace; text-decoration: none; ">
Otra Galería.</a> </li>
<li><a href="http://img502.imageshack.us/slideshow/webplayer.php?id=albertocontrerasregreso.jpg" 
style="color: black; font: bold 1em/1.5em monospace; text-decoration: none; ">
Otra Galería.</a> </li>
<li><a href="http://img848.imageshack.us/slideshow/webplayer.php?id=rastif1frenizq01.jpg" 
style="color: black; font: bold 1em/1.5em monospace; text-decoration: none; ">
Otra Galería.</a> </li>
</ul>
</div>

<div style="margin-left: 260px; white-space:nowrap; height: 100%; width: auto;
position: relative; overflow-y: scroll; overflow-x: hidden; background:lime; right:0">

<h2>Torres varias. (Detalles).<h2>
<a href="http://img189.imageshack.us/slideshow/webplayer.php?id=miguelminond.jpg" 
style="color: black; font: bold 0.7em/1.5em fantasy; text-decoration: none; ">
Enlace a Galería.</a>
<div>
<img src="http://img24.imageshack.us/img24/2161/susanabucsdorff.jpg" 
width=480 height=640><br>

<img src="http://img585.imageshack.us/img585/6458/paisajemarinomarianovil.jpg" 
width=480 height=640><br>

<img src="http://img535.imageshack.us/img535/2007/dottobaggio.jpg" 
width=480 height=640><br>

<img src="http://img189.imageshack.us/img189/9500/miguelminond.jpg" 
width=480 height=640><br>

<img src="http://img207.imageshack.us/img207/7240/ricardoluzuriaga.jpg" 
width=480 height=640>
</div>
</div>

</div>

</body>
</html> 
Si se arrastra del borde derecho para achicar la ventana parece comportarse como la versión JS del primer post. Pero en cuanto mueven la barra horizontal ...
No creo que con CSS se pueda aumentar proporcionalmente el tamaño de una capa según la posición de scrollLeft de su contenedor.

Tal vez haya que pensarlo todo distinto. Pero a mí se me acabaron las ideas.
Y no sé por qué no quieres usar la versión que sabes que funciona, pablovhau. Si es por las ganas de que inventemos una forma nueva, es un lindo desafío. Pero no sé si si se puede sin leer posiciones durante el arrastre de la barra. La verdad es que no quise mirar tus códigos para que no influenciaran en las ideas que se me pudiesen ocurrir. Si en una semana no se me ocurre nada más; quizá lo vea para sacarme el gusto de ver cómo lo hiciste.