Cómo hacer un div desplazable

Escrito por sue smith Google | Traducido por daniel gómez villegas
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer un div desplazable
El código CSS puede imponer un estilo a los elementos HTML. (Hemera Technologies/Photos.com/Getty Images)

Los desarrolladores web pueden usan código HTML y CSS (Cascading Style Sheets) para determinar el contenido y apariencia de las páginas web. Ambos tipos de código también pueden dictar los aspectos de la interacción del usuario con una página. Para que un elemento div se desplace dentro de una página, se puede utilizar la propiedad de desbordamiento de CSS. Lograr que los elementos sean desplazables no suele ser difícil, requiere sólo unas pocas líneas simples de código. Puedes hacer un elemento desplazable HTML tanto horizontal como verticalmente.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Crea tu página HTML. Utilizando el siguiente código de ejemplo, define bosquejo de una página web.

    <html> <head> </head> <body> </body> </html>

    Abre un nuevo archivo en un editor de texto y copia este código en el, guárdalo con la extensión de archivo .html. Si ya tienes una página web con un div en ella, puedes usarla en vez de crear una nueva.

  2. 2

    Crea una sección dentro de la página de código CSS. Puedes utilizar un enlace al código CSS desde un archivo CSS dentro de la sección head de tu página, o puedes incluir el código en la sección head directamente. Para ello, agrega la siguiente sección entre las etiquetas de apertura y cierre <head> de tu página HTML:

    <style type="text/css"> /CSS code/ </style>

    Coloca tu código CSS entre estas etiquetas de estilo.

  3. 3

    Añade un elemento div a tu página. Inserta el siguiente ejemplo de código entre las etiquetas <body> de apertura y cierre:

    <div id="content"><p>Este es un contenido de ejemplo en un párrafo, que se encuentra dentro de un elemento.</p></div>

    Este simple elemento tiene un atributo id para que el código CSS pueda identificarse dentro de la página como un todo. Puedes incluir cualquier contenido que quieras dentro del elemento div, incluyento texto, imágenes y cualquier otro archivo multimedia.

  4. 4

    Agrega reglas CSS para el elemento. Dentro de la sección de estilo de la página, inserta el siguiente código que identifica el elemento div y aplica determinadas normas de estilo en ella:

    content{

    height:100px; width:100px; overflow:scroll; }

    Este código establece un ancho fijo y altura para el elemento, así como instrucciones al navegador para desplazar cualquier contenido desbordando esta área. Para poder utilizar la propiedad scroll, los elementos deben tener unas dimensiones concretas, ya que la propiedad de desplazamiento le dice al navegador qué hacer con el contenido si no cabe en el espacio asignado a un elemento.

  5. 5

    Guarda el archivo HTML y ábrelo en un navegador Web. Debes ver una o dos barras de desplazamiento alrededor del elemento div. Experimenta con tu código cambiando las dimensiones, mientras dejas la propiedad de desborde puesta para el desplazamiento. Las barras de desplazamiento se comportan de manera diferente en función de las dimensiones del elemento y de cuánto contenido hay dentro de él.

Consejos y advertencias

  • Trata de usar otros valores para la propiedad de desplazamiento, como hidden, para ver las distintas posibilidades.
  • Algunos navegadores no pueden implementar la propiedad scroll correctamente, sobre todo navegadores que se ejecutan en dispositivos móviles.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles