-
Cómo hacer un div desplazable
-
Los desarrolladores web pueden utilizar código HTML y CSS (Cascading Style Sheets) para determinar el contenido y la 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 hacer que un elemento div desplazable dentro de una página se puede utilizar la propiedad de desbordamiento de CSS. Fabricación de elementos de desplazamiento no suele ser difícil, que requiere sólo unas pocas líneas de código simple. Puede hacer que un elemento HTML de desplazamiento tanto horizontal como verticalmente.Instrucciones
1 Crear la página HTML. Usando el siguiente código de ejemplo de marcado, definir el contorno de una página Web:
<Html>
<Head>
</ Head>
<Body>
</ Body>
</ Html>
Abra un nuevo archivo en un editor de texto y copiar este código en él, guardarlo con la extensión .html. Si ya tiene una página Web con un div en ella, puede utilizar esto en vez de crear uno nuevo.
2 Crear una sección dentro de la página de código CSS. Se puede utilizar un enlace al código CSS de un archivo CSS independiente dentro de la sección <head> de su página, o puede incluir el código dentro de la sección <head> directamente. Para ello, agregue el siguiente tramo comprendido entre la apertura y el cierre de <head> en la página HTML:
<Style type = "text / css">
/
Código CSS /
</ Style>
Coloca el código CSS entre estas etiquetas de estilo.
3 Añadir un elemento div a su página. Inserte el siguiente código de ejemplo de marcado entre la apertura y cierre de etiquetas <body>:
<Div id = "contenido"> <p> Aquí es algún contenido dentro de un párrafo, que está dentro de un elemento. </ P> </ div>Este simple elemento tiene un atributo id lo que el código CSS puede identificarlo dentro de la página en su conjunto. Puede incluir cualquier contenido que desee dentro de su elemento div, incluyendo texto, imágenes y otros medios de comunicación.
4 Añadir reglas CSS para su elemento. Dentro de la sección de estilo de su página, insertar el siguiente código que identifica el elemento div y la aplicación de ciertas reglas de estilo a la misma:
contenido{
altura: 100px;Anchura: 100px;
overflow: desplazarse;
}
Este código establece una anchura fija y la altura para el elemento, así como instrucciones al navegador para desplazarse cualquier contenido que desborda esta área. Para que pueda utilizar la propiedad de desplazamiento, los elementos deben tener unas dimensiones específicas, como la propiedad de desplazamiento indica al navegador qué hacer con el contenido si no encaja en el espacio asignado a un elemento.
5 Guarde el archivo HTML y abrirlo en un navegador Web. Debería ver una o dos barras de desplazamiento de todo el elemento div. Experimentar con el código cambiando las dimensiones, mientras que salir de la propiedad de desbordamiento fijado para desplazarse. Las barras de desplazamiento se comportarán de forma diferente dependiendo de las dimensiones del elemento y la cantidad de contenido que está dentro de él.
Consejos y advertencias
- Trate de usar otros valores para la propiedad de desplazamiento, como oculto, para ver las distintas posibilidades.
- Algunos navegadores no pueden implementar la propiedad scroll correctamente, sobre todo navegadores que se ejecuten en los dispositivos móviles.
