Foros del Web » Creando para Internet » CSS »

Imagen fija sobre texto en un scrollbar.

Estas en el tema de Imagen fija sobre texto en un scrollbar. en el foro de CSS en Foros del Web. Hola a todos. Quiero hacer un scrollbar con imagen de fondo y texto (hasta ahí bien) pero además me gustaría añadirle una capa por encima ...
  #1 (permalink)  
Antiguo 18/06/2009, 16:09
 
Fecha de Ingreso: junio-2009
Mensajes: 6
Antigüedad: 8 años, 5 meses
Puntos: 0
Imagen fija sobre texto en un scrollbar.

Hola a todos.

Quiero hacer un scrollbar con imagen de fondo y texto (hasta ahí bien) pero además me gustaría añadirle una capa por encima con 2 imágenes png en degradado transparente para hacer un efecto "fundido" en la parte superior e inferior de la scrollbar (no sé si me explico, transparente hacia el centro y que el texto corra por debajo).

Después de bucear en los códigos de Pimpy, Faqs etc. no sé cómo escribir el css para que éstas queden dentro del scroll. Sí lo he conseguido de forma chapucera a partir del height-width de la página, por lo que cada vez que muevo el scroll (no la barra) tengo que calcular la posición de dichas imágenes.

¿se puede hacer de alguna manera?
Si necesitáis el código lo pongo.

Un saludo.
  #2 (permalink)  
Antiguo 18/06/2009, 16:27
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Imagen fija sobre texto en un scrollbar.

Sólo tienes que colocar la imagen con posición absoluta y con los valores de left/top cero para que se coloque en la esquina sup-izq de su contenedor de referencia.


Y para que se sitúe sobre (en el eje z) el texto, poner en el html primero el texto y después la imagen.

Supongo que eres consciente de que todo lo que se encuentre bajo la imagen no podrá ser seleccionado por el usuario.

Un saludo

Edito: ¿o lo que quieres es que siempre se mantengas visibles las imágenes aunque hagas scroll?
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 18/06/2009, 16:57
 
Fecha de Ingreso: junio-2009
Mensajes: 6
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Imagen fija sobre texto en un scrollbar.

Soy principiante y no sé si te he entendido bien con lo de los ejes , me refería a encima "tapando".

Sería:

- La imagen de fondo fija.
- El texto se desplaza.

Hasta aquí todo bien:

- Por encima tapando alineadas arriba y abajo 2 png pequeñitas en degradado hacia el centro, fijas.

Ya caí en que no podía seleccionar el texto sobre una imagen, por eso pongo 2 más pequeñas que el height del scroll para que la parte del centro quede más o menos "libre" y así se pueda seleccionar la mayor parte del texto...

Sería esto:
(vaya, iba a poner el enlace a la imagen)

que no es una obra de arte, ni quiero que se vea la barra, pero me gustó el efecto.
El caso es que no sé hacer que el scroll sea el contenedor para que las png no estén por ahí sueltas.

Gracias.
  #4 (permalink)  
Antiguo 18/06/2009, 17:07
 
Fecha de Ingreso: junio-2009
Mensajes: 6
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Imagen fija sobre texto en un scrollbar.

También había pensado que a lo mejor no se puede y me estoy complicando la vida.
  #5 (permalink)  
Antiguo 18/06/2009, 17:19
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Imagen fija sobre texto en un scrollbar.

Nada es imposible hasta que dices no puedo

Mira a ver si puedes usar esto como base:

Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>sin título</title>
  4. <style type="text/css">
  5. * {margin:0; padding:0;position: relative;}
  6. html, body {
  7.   background-color: #cdcdcd;
  8. }
  9. #contenedor {
  10.   width:250px;
  11.   height:300px;
  12.   background-color:#9999CC;
  13.   margin: 0 auto;
  14.   overflow: auto;
  15. }
  16. .top {
  17.   background: #fff;
  18.   height: 75px;
  19.   width: 235px;
  20.   position: fixed;
  21.   top: 0;
  22.   opacity: 0.65;
  23. }
  24. .bottom {
  25.   background: #000;
  26.   height: 75px;
  27.   width: 235px;
  28.   position: fixed;
  29.   top:225px;
  30.   opacity: 0.65;
  31.   }
  32. </head>
  33. <div id="contenedor">
  34. <p>Lorem ipsum dolor sit amet consectetuer nonummy Nullam consectetuer Fusce In. Quis id nunc Pellentesque Vivamus Curabitur pharetra ante Aenean penatibus metus. Turpis lacus dui Sed Suspendisse a id Vestibulum sed.</p>
  35. <p>Wisi id orci elit id pretium eget lacinia Duis dapibus lorem. Ut sem convallis id massa tellus volutpat massa sapien quis iaculis. Semper volutpat habitasse at adipiscing penatibus ut Phasellus urna lacinia ac. Sagittis nulla.</p>
  36. <p>Lorem ipsum dolor sit amet consectetuer semper convallis wisi tortor sapien. Et et eget at hendrerit hendrerit habitasse Aliquam nibh Nunc egestas. Enim feugiat Phasellus Praesent penatibus cursus at pede Lorem quis adipiscing. Enim pulvinar a Vestibulum Sed Curabitur enim laoreet id nibh faucibus. Vitae montes sed Pellentesque libero magnis nec lorem arcu Curabitur non. Cursus Nullam ut Quisque ornare ut amet.</p>
  37. <p>Faucibus et lacus auctor enim ipsum congue Nunc Lorem Morbi sem. Nullam arcu rhoncus mus In metus orci risus lacinia at Integer. Aliquam mi hendrerit Curabitur eget In sagittis Phasellus tincidunt elit congue. Semper Vestibulum at laoreet Integer wisi vitae non fermentum Nunc gravida. Pretium Nulla quis Nulla urna tempor rutrum quis Maecenas risus morbi. Auctor tempor neque pretium iaculis In lacinia Suspendisse ipsum Quisque.</p>
  38. <p>Quis augue interdum dictumst id orci wisi orci Nam tincidunt In. Justo justo pellentesque adipiscing consequat consectetuer augue at augue neque lobortis. Nam at habitant nibh quis nulla consequat risus massa convallis odio. Cras purus ridiculus at Curabitur egestas pharetra elit purus elit orci. Porttitor sollicitudin nulla vestibulum Nullam ipsum Aenean vitae dolor magna Suspendisse. </p>
  39. <p>Nulla nibh laoreet malesuada tincidunt pellentesque id pede est magna libero. Aenean in ipsum Ut nisl ligula et a ut pharetra facilisis. Congue non elit volutpat Sed sollicitudin In eu pellentesque parturient dolor. Donec et est lacus tellus Vestibulum cursus hac lacinia ante Aenean. Dolor pretium cursus orci id consequat iaculis Vestibulum Ut Aenean vitae. Ipsum.</p>
  40. <p>Id Curabitur felis sed lobortis eu id sit urna tempor semper. Leo libero Phasellus hendrerit congue augue Phasellus et vel iaculis pellentesque. Scelerisque netus id.</p>
  41.  
  42. <div class="top"></div>
  43. <div class="bottom"></div>
  44.  </div>
  45. </body>
  46. </html>

Coloca como fondo a los divs .top y .bottom tus imágenes y eliminas la propiedad opacity.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 19/06/2009, 18:25
 
Fecha de Ingreso: junio-2009
Mensajes: 6
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Imagen fija sobre texto en un scrollbar.

Argh, visto así parece complicado pero acabo de probarlo ahora mismo en el bloc de notas y funciona.

Una maravilla que me deja seleccionar todo el texto y el resultado es exactamente el que yo buscaba (ahora sólo espero no armarme un lío al implementar las clases).

Gracias!!

Última edición por Cukiwoman; 19/06/2009 a las 19:32
  #7 (permalink)  
Antiguo 20/06/2009, 12:20
 
Fecha de Ingreso: junio-2009
Mensajes: 6
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Imagen fija sobre texto en un scrollbar.

Hola de nuevo.

He probado el css cambiando algunas cositas, y funciona pero sólo si no me desplazo hacia lo largo de la página (hacia abajo con la barra del navegador, porque las .png no se mueven, quicir).

El código que he utilizado es el siguiente:

CSS:

Código:
#contenedor_1 {
    width: 600px; 
    height: 700px; 
    background-color: 000000; 
    color: dimgray; 
    font-family: courier new; 
    font-size: 10px; 
    font-weight: bold; 
    text-align: center; 
    overflow-y: scroll; 
    padding: 2px; 
    margin-left: 4px; 
    margin-right: 8px; 
    background-image:url(mi_fondo.jpg); 
    background-repeat: no-repeat;
    image-attachment: fixed; 
    image-align: left;
    text-margin: left 2px; 
    text-margin: right 6px;
  
      }
 
     .top_1 {
        height: 119px;
        width: 573px;
        position: fixed;
        top: 0;
        background-image: url(tapa_imagen_top.png);
       }
 
     .bottom_1 {
        height: 119px;
        width: 573px;
        position: fixed;
        top: 585px;
        background-image: url(tapa_imagen_bottom.png);
        }
y en el HTML:

Código:
 

<div id="contenedor_1">
 <p style="margin-left:2px; margin-right: 6px">
<br /><br />
Todo el texto e imágenes aquí.... 
<br /></p>

<div class="top_1"></div>
<div class="bottom_1"></div>
</div>

Bueno, he puesto el "_1" porque pienso incluir dos scrollbar con diferentes estilos pero de momento sólo he probado con uno.

Se me ocurrió cambiar el valor de position: fixed; en .top_1 y .bottom_1 y como no iba añadí al css esta línea que no sé para qué sirve, pero algo hará!

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

probando, probando... hasta que al final no se veía ninguna de las 3 imágenes de fondo u.u ¿Hay algo en el código que claramente se vea que está mal?

Ya siento daros la brasa con esto, estoy aprendiendo y hay cantidad de información por ahí como para volerme loca probando y me falta tiempo para leer manuales (voy a cachitos..).

Por curiosidad también estoy mirando por ahí cómo sería con z-index (como alternativa).

Un saludo y gracias.
  #8 (permalink)  
Antiguo 20/06/2009, 12:41
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Imagen fija sobre texto en un scrollbar.

1º) Sí claro, las "imágenes" no se movían de sitio porque tenían la propiedad fixed. Cambiado

2º) la línea:
Cita:
* {margin:0; padding:0;position: relative;}
Es un "reset" mínimo. Costumbre de colocarlo. Para más información busca por "reset css" o similares en google.

3º) En el ejemplo no utilizo z-indez porque he colocado .top .bottom después del resto de elementos, así que el navegador los coloca sobre (en el eje z) todo lo que está antes que ellos en el html.
Sí sería necesario si estuviesen antes:
Cita:
<div id="contenedor">
<div class="top></div>
<div class="bottom></div>
<p>.....</p>
</div>
Bueno, hice una pequeña modificación para que al mover el el scroll se vaya todo junto:

Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>sin título</title>
  4. <style type="text/css">
  5. * {margin:0; padding:0;}
  6. html, body {
  7.   background-color: #cdcdcd;
  8.   height: 1500px;
  9.   width: 1500px;
  10. }
  11. #contiene_todo {
  12.   width:250px;
  13.   height:300px;
  14.   overflow: hidden;
  15.   margin: 10px auto 0;
  16.   position: relative;
  17.   }
  18. #contenedor {
  19.   width:250px;
  20.   height:300px;
  21.   background-color:#9999CC;
  22.   overflow: auto;
  23. }
  24. .top {
  25.   background: #fff;
  26.   height: 75px;
  27.   width: 235px;
  28.   position: absolute;
  29.   top: 0;
  30.   opacity: 0.65;
  31. }
  32. .bottom {
  33.   background: #000;
  34.   height: 75px;
  35.   width: 235px;
  36.   position: absolute;
  37.   top:225px;
  38.   opacity: 0.65;
  39.   }
  40. </head>
  41. <div id="contiene_todo">
  42. <div id="contenedor">
  43. <p>Lorem ipsum dolor sit amet consectetuer nonummy Nullam consectetuer Fusce In. Quis id nunc Pellentesque Vivamus Curabitur pharetra ante Aenean penatibus metus. Turpis lacus dui Sed Suspendisse a id Vestibulum sed.</p>
  44. <p>Wisi id orci elit id pretium eget lacinia Duis dapibus lorem. Ut sem convallis id massa tellus volutpat massa sapien quis iaculis. Semper volutpat habitasse at adipiscing penatibus ut Phasellus urna lacinia ac. Sagittis nulla.</p>
  45. <p>Lorem ipsum dolor sit amet consectetuer semper convallis wisi tortor sapien. Et et eget at hendrerit hendrerit habitasse Aliquam nibh Nunc egestas. Enim feugiat Phasellus Praesent penatibus cursus at pede Lorem quis adipiscing. Enim pulvinar a Vestibulum Sed Curabitur enim laoreet id nibh faucibus. Vitae montes sed Pellentesque libero magnis nec lorem arcu Curabitur non. Cursus Nullam ut Quisque ornare ut amet.</p>
  46. <p>Faucibus et lacus auctor enim ipsum congue Nunc Lorem Morbi sem. Nullam arcu rhoncus mus In metus orci risus lacinia at Integer. Aliquam mi hendrerit Curabitur eget In sagittis Phasellus tincidunt elit congue. Semper Vestibulum at laoreet Integer wisi vitae non fermentum Nunc gravida. Pretium Nulla quis Nulla urna tempor rutrum quis Maecenas risus morbi. Auctor tempor neque pretium iaculis In lacinia Suspendisse ipsum Quisque.</p>
  47. <p>Quis augue interdum dictumst id orci wisi orci Nam tincidunt In. Justo justo pellentesque adipiscing consequat consectetuer augue at augue neque lobortis. Nam at habitant nibh quis nulla consequat risus massa convallis odio. Cras purus ridiculus at Curabitur egestas pharetra elit purus elit orci. Porttitor sollicitudin nulla vestibulum Nullam ipsum Aenean vitae dolor magna Suspendisse. </p>
  48. <p>Nulla nibh laoreet malesuada tincidunt pellentesque id pede est magna libero. Aenean in ipsum Ut nisl ligula et a ut pharetra facilisis. Congue non elit volutpat Sed sollicitudin In eu pellentesque parturient dolor. Donec et est lacus tellus Vestibulum cursus hac lacinia ante Aenean. Dolor pretium cursus orci id consequat iaculis Vestibulum Ut Aenean vitae. Ipsum.</p>
  49. <p>Id Curabitur felis sed lobortis eu id sit urna tempor semper. Leo libero Phasellus hendrerit congue augue Phasellus et vel iaculis pellentesque. Scelerisque netus id.</p>
  50.  
  51.  </div>
  52.  <div class="top"></div>
  53. <div class="bottom"></div>
  54.  </div>
  55. </body>
  56. </html>

Mira a ver si ves la diferencia. Si no la encuentras, ya hablamos.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 20/06/2009, 17:48
 
Fecha de Ingreso: junio-2009
Mensajes: 6
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Imagen fija sobre texto en un scrollbar.


html:
Código:

<div id="contiene_todo_2">
<div id="contenedor_2">

           <p style="margin-left:2px; margin-right: 6px">
           <br /><br /><br /><br /><br /><br />

           <img src="una_imagen" />
           <div style="text-align:center;"> <p>

           <br />

           <p style="font-weight:bold;font-size:14px;">un texto<br />
            otro texto</p><br />

                      texto texto texto.... <br/>
           <img src="una_imagen" /><br />
           </p>
</div>
<div class="top_2"></div>
<div class="bottom_2"></div>
</div>
css:

Código:
 
        #contiene_todo_2 {
        width:600px;
        height:700px;
        overflow: hidden;
        margin: 10px auto 0;
        position: relative;
        }


      #contenedor_2 {
        width: 600px; 
	height: 700px; 
	background-color: 000000; 
	color: dimgray; 
	font-family: courier new; 
	font-size: 10px; 
	font-weight: bold; 
	text-align: center; 
	overflow-y: scroll; 
	padding: 2px; 
	margin-left: 4px; 
	margin-right: 8px; 
	background-image:url(imagen_fondo.jpg); 
	background-repeat: no-repeat;
	image-attachment: fixed; 
	image-align: left;
	text-margin: left 2px; 
	text-margin: right 6px;
  
      }
 
      .top_2 {
        height: 119px;
        width: 573px;
        position: fixed;
        top: 0;
        background-image: url(imagen_tapa_top.png);
       }
 
      .bottom_2 {
	height: 119px;
        width: 573px;
        position: fixed;
        top: 585px;
        background-image: url(imagen_tapa_bottom.png);
        }
Sigue haciendo lo mismo, deja las png bien colocadas pero no se mueven y la imagen jpg de fondo del scrollbar no se ve, de hecho es que no hay scrollbar, se ve todo el contenido. Tampoco me hace caso en los estilos de párrafo que he puesto arriba en el html (antes de hacerlo así sí).

Es para un myspace 2.0 que tiene el css a parte, por si tiene que ver. Tengo más divs en esa sección html para el encabezado de arriba de todo (abiertos y cerrados, lo he mirado mil veces) que creo que no tienen nada que ver. Tampoco hay ninguna clase o id que se llame igual. Aunque al escribir tu último html me borra del tirón los dos "id" dejando sólo el div, será cosa de Myspace que hace lo que quiere (?).

No sé si interfieren esos otros códigos que digo o será el momento de intentarlo de otra forma. Todavía no me he rendido.

Edit: al copiar y pegar ya me di cuenta de cambiar el fixed por absolute; y lo mismo...

Última edición por Cukiwoman; 20/06/2009 a las 18:35
  #10 (permalink)  
Antiguo 08/07/2009, 14:24
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: Imagen fija sobre texto en un scrollbar.

Me costó mucho entender de qué están hablando, y aún no sé si lo logré. Insistimos siempre en que titulen los temas correctamente; aunque dobo reconocer que en su incoherencia, éste es muy llamativo. De otra forma ni lo hubiese abierto.

Empecemos por decir que una scrollbar es esa herramienta que aparece —tipicamente— a la derecha y/o debajo de un bloque, tiene 3 botones (uno deslizable), y sirve entre otras cosas para desplazar el contenido.

Lo de meterle un texto como fondo no es imposible; sí es un truco limitadísimo, casi una curiosidad que no he visto hasta ahora en ningún ejemplo. Y lo de meter una imagen (puede ser de un texto en degradé) es también un truco, más viejo y conocido. Por eso cuando dijiste "hasta ahí bien" pensé que podías estar hablando de eso, Cukiwoman.
Pero no. Al final llegué a la conclusión de que estás buscando un bloque con barras de desplazamiento, al que quieres agregar 3 imágenes fijas, una de fondo, otra 'arriba' con un gradiente para que simule que el texto se desvanece —con el desplazamiento— hacia el fondo del documento,m y la última 'abajo', para el efecto inverso.

Ahí pensé ¿cómo puede ser que estos chicos le den tanta vuelta a un efecto tan pavo? ¡yo lo había hecho hace casi 10 años, y es tan obvio y tan conocido que debe estar por todos lados!.
Sin embargo, lo pensé mejor. Porque justamente lo hice "hace casi 10 años". Hoy los navegadores se han vuelto tan incoherentes, que nos complican las cosas más fáciles. Y decidí participar.

Hasta aquí fue sólo una introducción. Como hay demasiadas situaciones en qué usar este efecto, y no voy a cubrirlas todas, dejo algunos ejemplos con estilo de tutorial, para que te vayas acostumbrando a leerlos. Porque si vas a participar en un foro especializado, mínimo tienes que haber leído 2 ó 3 antes de postear, aunque más no sea para que sepas explicar lo que buscas y que entiendas nuestras respuestas. (Mi respeto y aplauso para tí, kseso?, que le entendiste a la primera).

___________________________



[Nota : las imágenes usadas en los ejemplos no serán las más adecuadas, porque no quiero seguir subiendo otras a servidores gratis ya que a cada rato desaparecen, tengo que reponerlas y editar todos los mensajes que las enlazaban. Una pena que Foros del Web no tenga un espacio para subir imágenes, pero creo que debe ser difícil de implementar]


El efecto básico era para HTML/CSS. Se creaba un div de (p.e.) 300 × 400 pixeles con overflow: auto y una imagen de fondo con la misma medida y background-attachment: fixed. Si el fondo del documento es (p.e.) negro, la imagen empieza arriba en negro, degrada a (p.e.) blanco hasta el medio y termina degradando otra vez a negro abajo.
El texto que contenga será negro, y la ilusión al desplazarse arriba y abajo es que se 'funde' con el documento antes de desaparecer.

Las limitaciones son muchas. Como la combinación de colores : si usamos texto rojo, se hará evidente que pasa 'por delante' y no 'por detrás' del gradiente. Además está el tamaño de la imagen, que debe ser igual a la del bloque (por lo menos en alto), ¡y ahora lo de fijar el fondo!.

Para no explicar de nuevo, dale una mirada a este post

Letras o imagenes transparentes #8

Éste debe ser el motivo por el que te desaparecen las imágenes.

Todos estos problemas tienen alguna solución. La de ver un fondo fixed sin usar fixed es meter 2 capas anidadas, la de atrás tiene el fondo y la de adelante la scrollbar

Código:
<!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></title>

<style type="text/css">
body {background-color: #000080; color: #ffffff; }
#contenedor {width: 22em; height: 6em; background-color: #ffffff; 
background-image: url(http://img72.imageshack.us/img72/5572/degrad018my.png); 
background-repeat: repeat-x; color: #000080; 
font-size: 1.5em; line-height: 0.75em; font-weight: bold; }
#contenido {width: 22em; height: 6em; overflow: auto; }
#fin {margin-top: 1000px; }
</style>
</head>
<body>
<h2>Imagen de fondo en capa contenedora con repetici&oacute;n horizontal detr&aacute;s de capa de contenido. (IE6; FF3; Op9; Chr2)</h2>
<div id=contenedor>
<p id=contenido>Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
<span style="color:#ff0000;">
Foros del Web. Foros del Web. Foros del Web.</span> <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br></p>
</div>
<p id=fin>final</p>

</body>
</html>
Allí también se resuelve el ancho de la imagen con repeat-x. Para que el texto se meta 'por debajo' de los degradé, la única que tenemos es ponérselos encima. Usar position: fixed parece la solución obvia; pero tiene el mismo problema que los fondos, toman como referencia el documento

Código:
<!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></title>
<script type="text/javascript">
function ancho(){
var anchoUtil = document.getElementById("contenedor").clientWidth;
document.getElementById("imag0").style.width = anchoUtil + "px";
document.getElementById("imag1").style.width = anchoUtil + "px";
}
onload = ancho;
</script>
<style type="text/css">
body {background-color: #000080; color: #ffffff; }
#contenedor {width: 22em; height: 6em; overflow: auto; 
background-color: #ffffff; color: #800000; position: relative; 
font-size: 1.5em; line-height: 0.75em; font-weight: bold; }
#contenedor #imag0 , #imag1 {position: fixed; width: 22em; height: 2em; margin-top: 0; }
#contenedor #imag1 {margin-top: 4em; }
#fin {margin-top: 1000px; }
</style>
</head>
<body>
<h2>Im&aacute;genes posici&oacute;n fija y escript para ajustar el ancho. (IE7; FF3; Op9; Chr2) BUG!</h2>
<div id=contenedor>
<img src="http://img72.imageshack.us/img72/5572/degrad018my.png" id=imag0>
<img src="http://img72.imageshack.us/img72/2408/semitrans017oh.png" id=imag1>
<p>Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
</p>
</div>
<p id=fin>final</p>

</body>
</html>
Sigue en el próximo mensaje.
  #11 (permalink)  
Antiguo 08/07/2009, 14:26
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: Imagen fija sobre texto en un scrollbar.

Viene del mensaje anterior.

Habrás notado que ese código tiene un escript. Eso es porque además del problema que nos mencionó kseso?, sobre que el texto no se puede seleccionar, también esta el de que el ancho del bloque incluye las scrollbars, y si le damos el mismo ancho a las imágenes ... tampoco podremos desplazar, porque nos tapan los botones. Como el tamaño de las barras de desplazamiento es configurable, hay que medirlo con un escript en cada navegador y pasarle luego el ancho disponible a las imágenes.
Existe un CSS para hacerlo (-moz-available -moz-fit-content) pero es propietario y funciona muy mal. Antiguamente, clientWidth era propiedad de MSIE, pero hoy es compatible con la mayoría de los browsers.
Si no queremos usar JS, la única que nos queda es meter las imágenes atrás, con lo que resolvemos lo de la selección, el desplazamiento, el tamaño, y si usamos position: absolute también el bug del arrastre, tal como se explicó más arriba

Código:
<!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></title>

<style type="text/css">
body {background-color: #000080; color: #ffffff; }

#contenedor {width: 22em; height: 6em; overflow: hidden; 
background-color: #ffffff; color: #000080; position: relative; 
font-size: 1.5em; line-height: 0.75em; font-weight: bold; }

#contenido {width: 22em; height: 6em; overflow: auto; 
background-color: transparent; position: absolute; top: 0; left: 0; 
}

#imag0 , #imag1 {position: absolute; top: 0; left: 0; width: 22em; height: 3em; margin-top: 0; }
#imag1 {top: 4em; height: 2em; }
#fin {margin-top: 1000px; }
</style>
</head>
<body>
<h2>Im&aacute;genes en capa contenedora detr&aacute;s del contenido. (IE6; FF3; Op9; Chr2)</h2>
<div id=contenedor>
<img src="http://img72.imageshack.us/img72/5572/degrad018my.png" id=imag0>
<img src="http://img72.imageshack.us/img72/2408/semitrans017oh.png" id=imag1>
<div id=contenido>
<p>Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
<span style="color:#ff0000">Foros del Web. Foros del Web. Foros del Web.</span> <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
</p>
</div>
</div>
<p id=fin>final</p>

</body>
</html>
Un inconveniente que hasta ahora no se mencionó, es que los degradados con transparencia son *.png, y el IE 6 no los reconoce hasta que los usamos como fondo de capas o imágenes, con un filtro. Acá está la versión final, con las imágenes (en div's) por delante y un fondo fijo.

Código:
<!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></title>
<script type="text/javascript">
function ancho(){
var anchoUtil = document.getElementById("contenido").clientWidth;
document.getElementById("imag0").style.width = anchoUtil + "px";
document.getElementById("imag1").style.width = anchoUtil + "px";
}
onload = ancho;
</script>
<style type="text/css">
body {background-color: #000080; color: #ffffff; font-size: 100%; }
#contenedor {width: 500px; height: 150px; overflow: hidden; 
background-color: #ffffff; color: #800000; position: relative; 
background-image: url(http://img43.imageshack.us/img43/9528/marmol2in.gif); }
#contenido {width: 500px; height: 150px; overflow: auto; 
background-color: transparent; position: absolute; top: 0; left: 0; 
font-size: 22px; line-height: 75%; font-weight: bold; margin: 0; }
#imag0 , #imag1 {position: absolute; width: 500px; height: 40px; top: 0; left: 0; }
#imag1 {top: 110px; }
#fin {margin-top: 1000px; }
</style>
</head>
<body>
<h2>Bloque con fondo fijo, im&aacute;genes con posici&oacute;n absoluta 
sobre el texto y escript para ajustar el ancho. (IE6; FF3; Op9; Chr2)</h2>
<div id=contenedor>
<p id=contenido>Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
<span style="color:#ff0000">Foros del Web. Foros del Web. Foros del Web.</span> <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
Foros del Web. Foros del Web. Foros del Web. <br>
</p>

<!--[if IE 6.0000]>
<style>
#imag0 { background-color: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled:"true", src="http://img72.imageshack.us/img72/5572/degrad018my.png", sizingMethod="scale"); }
#imag1 { background-color: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled:"true", src="http://img72.imageshack.us/img72/2408/semitrans017oh.png", sizingMethod="scale"); }
</style>
<div id=imag0></div>
<div id=imag1></div>
<![endif]-->

<!--[if gte IE 7.0000]>
<img src="http://img72.imageshack.us/img72/5572/degrad018my.png" id=imag0>
<img src="http://img72.imageshack.us/img72/2408/semitrans017oh.png" id=imag1>
<![endif]-->

<![if !IE]>
<img src="http://img72.imageshack.us/img72/5572/degrad018my.png" id=imag0>
<img src="http://img72.imageshack.us/img72/2408/semitrans017oh.png" id=imag1>
<![endif]>
</div>
<p id=fin>final</p>

</body>
</html>
Todavía no resolví lo de la selección, ni que no se nos destartale todo con un zoom o resize; mientras tanto dejo algunos enlaces relacionados

Aspecto de la barra de scroll #6 (es un truco viejo, pre-clientWidth)

Colocar imágenes en las esquinas

Barra de desplazamiento personalizada...

como hacer un fondo ajustable?

Función "opacity"#23

Banner en scrollbar.


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 06:27.