Skip to content

Áreas de texto con barras de desplazamiento (scrollable) en HTML

mayo 19, 2009

Ejemplo:

Táctica y estrategia. De Mario Benedetti (In Memoriam)

Mi táctica es

mirarte

aprender como sos

quererte como sos

mi táctica es

hablarte

y escucharte

construir con palabras

un puente indestructible

mi táctica es

quedarme en tu recuerdo

no sé cómo ni sé

con qué pretexto

pero quedarme en vos

mi táctica es

ser franco

y saber que sos franca

y que no nos vendamos

simulacros

para que entre los dos

no haya telón

ni abismos

mi estrategia es

en cambio

más profunda y más

simple

mi estrategia es

que un día cualquiera

no sé cómo ni sé

con qué pretexto

por fin me necesites.

Instrucciones

El truco consiste en crear un área DIV dentro de la cual insertaremos el texto a mostrar. Sólo observe el siguiente código de ejemplo, prestando mucha atención al texto en color rojo que es realmente el que hace la magia:

<div style="border : solid 2px #ff0000;
            background : #000000;
            color : #ffffff;
            padding : 4px;
            width : 200px;
            height : 50px;
            overflow : auto; ">
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
</div>

O sea:

1
2
3
4
5
6
7
8
9
10

Y listo! Funciona para las últimas versiones de IE, Firefox, Opera y Safari.

Tomado de:

14 comentarios leave one →
  1. zenco permalink
    octubre 8, 2009 11:42 am

    Exactly what i needed thank you very much :)

  2. Jóse permalink
    octubre 28, 2009 6:04 pm

    Lo estaba buscando como loco,
    gracias

  3. proteo2000 permalink*
    octubre 28, 2009 9:28 pm

    De nada. Yo también lo busqué como loco. :)

  4. junio 16, 2010 3:53 am

    Hola! que tal? bien pues es muy buen aporte! y lo mejor de todo es que es personalizable… solo tengo una duda en cuanto a la personalización— será posible cambiar ese tipo de barra de desplazamiento por una más estética??

    si es asi, cómo podría hacerlo??

  5. mayo 30, 2011 6:15 pm

    Realmente te agradezco una enormidad el consejo que me diste ya que no sabia como lograrlo generalmente en la web no entiendo los consejos ya que no soy un experto en diseño ASI QUE ME VINO BARBARO lo que me falta es poder camviar la apariencia del cuadro de texto como el color de fondo o los bordes etc..

  6. bores permalink
    junio 1, 2011 7:44 pm

    muy bueno me ayudaste bastante

  7. proteo2000 permalink*
    junio 3, 2011 6:30 am

    Marcelo y Bores:

    Gracias a ustedes por sus comentarios. Saludos.

  8. Bliss permalink
    junio 13, 2011 7:36 pm

    TE amo!

  9. julio 24, 2014 3:47 pm

    Excelente.

  10. agosto 20, 2014 11:15 am

    hola, disculpa lo necesito hacer mas grande pero al hacerlo no me aparese ya la barra desplazadora q hago ?

  11. septiembre 8, 2014 7:03 pm

    perfecto gracias! :)

  12. octubre 7, 2014 5:09 pm

    muy buena

  13. noviembre 19, 2014 6:32 am

    mi pregunta es como se cambian de color los botones azules , perdon mi ignorancia soy nueva
    Gracias

  14. agosto 6, 2016 1:56 pm

    las comillas no van… en las letras rojas… gracias

Deja un comentario

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: