Foros del Web » Creando para Internet » HTML »

sidebar fixed ...

Estas en el tema de sidebar fixed ... en el foro de HTML en Foros del Web. Tengo mi sidebar con position fixed y hace lo que quiero, quedarse ahi absolutamente estatico pese a los scroll, pero hay un problema... Al achicar ...
  #1 (permalink)  
Antiguo 26/02/2012, 08:25
Avatar de pablovhau  
Fecha de Ingreso: diciembre-2011
Mensajes: 16
Antigüedad: 12 años, 4 meses
Puntos: 0
sidebar fixed ...

Tengo mi sidebar con position fixed y hace lo que quiero, quedarse ahi absolutamente estatico pese a los scroll, pero hay un problema...

Al achicar la ventana y mover el scroll horizontal los elementos que estan al lado pasan por arriba o abajo del elemento en fixed, lo que quiro es que no suceda esto y los elementos al lado respeten la posicion del elemento en fixed.

aqui ejemplo

[URL="http://www.vhau.cl/work/big_way.html"]http://www.vhau.cl/work/big_way.html[/URL]

aqui esta resuelto con java script pero no quiero usar esa solucion:

[URL="http://www.vhau.cl/work/CON%20TAGS%20EJEMPLO%20si%20funciona.html"]http://www.vhau.cl/work/CON%20TAGS%20EJEMPLO%20si%20funciona.html[/URL]

hay algo en el html que este mal? o con esta propiedad siempre pasa eso?
  #2 (permalink)  
Antiguo 27/02/2012, 08:27
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 15 años, 8 meses
Puntos: 1532
Respuesta: sidebar fixed ...

añade al sidebar un orden Z más alto

en objetos como plugins de flash, debes de aplicarle el atributo de transparencia al mismo
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 27/02/2012, 08:40
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: sidebar fixed ...

Me impresiona la cantidad de gente que hace preguntas sobre problemas con soluciones obvias sólo para poner un espam a su sitio.

(Bueno, esto lo digo en broma, pero en realidad de un tiempo para acá encontré mucho. Y es evidente que el Foro los tolera. Si fuese por mí, los echaba a patadas. Especialmente si publicitan a terceros.)

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.</title>

</head>
<body>
<div style="position:fixed; top:20px; left:20px;">
<img src="http://img854.imageshack.us/img854/918/martinsnoelmanuelescasa.jpg" 
width=240 height=320>
<ul style="list-style-type: none">
<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;">
<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 margin=20>
</div>
</div>
</body>
</html> 
Por supuesto, en IE6 no anda.



No entiendo muy bien a qué viene lo del

Cita:
Iniciado por maycolalvarez
...orden Z más alto ... en objetos como plugins de flash, debes de aplicarle el atributo de transparencia al mismo
Quizá estoy viendo la página en otra versión, y hay algo que en el post no se mencionó, pero al ver el sitio se hace evidente.

No sé...
  #4 (permalink)  
Antiguo 27/02/2012, 10:43
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: sidebar fixed ...

Bueno, todo sea por el beneficio de la duda...
amigo @pablovhau, tu fixed hace exactamente lo que corresponde, la forma correcta, e ideal (digo ideal porque debería funcionar igual en el cadavérico ie6), es:

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>Fixed izquierda</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7.  body{
  8.   margin:0;
  9.   padding:0 0 0 250px;;
  10.  }
  11.  div#menu{
  12.   position:absolute;
  13.   top:0;
  14.   left:0;
  15.   width:250px;
  16.   height:500px;
  17.   background-color: yellow;
  18.  }
  19.  @media screen{
  20.   body>div#menu{
  21.    position:fixed;
  22.   }
  23.  }
  24.  * html body{
  25.   overflow:hidden;
  26.  }
  27.  * html div#contenido{
  28.   height:100%;
  29.   overflow:auto;
  30.  }
  31. </head>
  32.  
  33. <div id="menu"> menu </div>
  34. <div id="contenido"> contenido
  35. </div>
  36.  
  37. </body>
  38. </html>

notá que el padding del body es igual al ancho del div del menu

SAludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 27/02/2012, 11:30
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: sidebar fixed ...

Se parece mucho a mi ejemplo. Y creo que ya entendí el problema.

No es que no deben pasar "por adelante y atrás" al desplazarse horizontalmente, sino que no deben desplazarse ni por adelante ni por atrás, sino pegar contra el bloque fijo de la izquierda y no avanzar. En los ejemplos que pusimos la "capa" derecha se oculta tras el banner fijo (menos en IE6). El punto es ¿qué debería hacer cuando ya no puede autoajustarse más?. Porque en algún momento no va a haber posibilidad de seguir achicando, y entonces hay que solapar por algún lado. Si no pasa por atras o por a delante ¿se oculta por la derecha (como hace IE6 con tu código, emprear)?.

Entonces la solución también es obvia : se usan dos capas independientes, y la que tiene el escrol es la de la derecha; ni la izquierda ni el body muestran barras.

O sigo sin entender el drama.
  #6 (permalink)  
Antiguo 27/02/2012, 12:08
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: sidebar fixed ...

@furoya
En mi código el fixed no existe para IE6 porque ie6 no reconoce el selector body>div (elemento hide de). Con lo de que no se puede achicar más, no recuerdo exactamente, ya que no dispongo de ie6, pero o te generaba scroll horizontal o el redimensionamiento solo era posible hasta el borde iquierdo del menu. No sé si te referís a eso
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #7 (permalink)  
Antiguo 27/02/2012, 20:33
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 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.
  #8 (permalink)  
Antiguo 28/02/2012, 16:01
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: sidebar fixed ...

Señores, pueden continuar con su ayuda en éste duplicado del mismo tema.
Quizás allí, y sólo quizás, quien lo inició les responda. Con suerte.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 28/02/2012, 16:26
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: sidebar fixed ...

Cita:
Iniciado por kseso? Ver Mensaje
Señores, pueden continuar con su ayuda en éste duplicado del mismo tema.
Quizás allí, y sólo quizás, quien lo inició les responda. Con suerte.
@kseso?
Te estás convirtiendo en todo un experto sabueso en esto de encontrar, identificar y desenmascarar mensajes/posts, repetidos, clonados, copyPasteados, etc. Para mi desgracia, siempre me entero después, obviamente, eres ajeno a esta vicisitud.
Para colmo de colmos, ni siquiera tienen la delicadeza de repetir, clonar, copyPastear sus respuestas (hayan o no encontrado una solución)
Creo que es hora, de que los administradores/moderadores, empiecen a penalizar de manera más severa estas acciones ya que un k negativo, dudo mucho haga mella en estos descomedidos usuarios.
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #10 (permalink)  
Antiguo 28/02/2012, 16:46
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: sidebar fixed ...

@Emprear
Ni fallo suyo ni acierto mío. Como digo allá, en el clon:
Cita:
Aunque no me nos correspondae. Que para esto, se supone, hay moderadores. Pero eso es otra historia que no le nos concierne.
Pero sí, estoy de acuerdo en que estas prácticas, cada vez más comunes y extendidas, no las corregimos (ni lo pretendo) con un -k.
Pero es lo que hay.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #11 (permalink)  
Antiguo 28/02/2012, 21:17
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: sidebar fixed ...

Es cierto todo!!!

Ni había visto el otro tema!, Y tampoco veo al autor del post ... hace rato que le estamos dando vueltas, pero ni vino a decir "este tipeo es mío".

Y soy de la misma opinión de ustedes. Aunque con esta revelación me parece que no sorprendo a nadie.



Me quedé pensando... ¿y si en serio vino nada más que a promocionar su página?

Por más que se me ocurra una salida, ahora no le posteo nada. Pst.

Etiquetas: css, fixed, gracias
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 16:17.