Tecnología

Inicio

Cómo poner cuadros de desplazamiento en una página

August 4

Necesitamos desplazarse cajas porque los monitores tienen limitaciones. Si hay 20 pulgadas de contenido disponible, pero el monitor es de sólo 12 pulgadas de alto, vas a tener que desplazarse para ver todo el contenido. Se visualiza un cuadro de desplazamiento cada vez que abra un navegador para visitar un sitio en línea o modificar un documento en la mayoría del software. También hay situaciones en las que tendrá que poner un cuadro de desplazamiento más pequeño lleno de información en una página web y que pueden hacerlo con un simple código HTML.

Instrucciones

1 Abra el archivo HTML de la página que va a agregar la barra de desplazamiento hacia y vaya a la sección "cuerpo" (entre las etiquetas <body>). Elija el área donde desea agregar el cuadro de desplazamiento a su página.

2 Escriba en una etiqueta <div>. Esto le permitirá crear una zona especial en su página web para el cuadro de desplazamiento. Escriba el siguiente código: <div style = "overflow: auto; anchura: 452 px; altura: 476px">.

3 Cambiar el "ancho" y el número "altura" a su tamaño deseado para el cuadro de desplazamiento.

4 Tipo de "scroll" en lugar de "auto" si desea una barra de desplazamiento para mostrar en el lado del cuadro de desplazamiento no importa qué. Al escribir "auto", la barra de desplazamiento sólo aparecerá si es necesario con el fin de ver todo el contenido de la caja.

5 Añadir "align" como un atributo de etiqueta <div> si desea cambiar cómo se alinea la información dentro del cuadro de desplazamiento. El tipo de "align = right" o "align = center" (sin las comillas). Para una alineación a la derecha, la etiqueta final será como <div style = "overflow: auto; anchura: 452 px; altura: 476px" align = right>. La alineación por defecto es a la izquierda, por lo que si usted está muy bien con el texto y las imágenes se alinea a la izquierda de la caja, deje este paso para salir.

6 Añadir "position: absolute; left: 108px" a la etiqueta <div style> a partir del segundo paso si desea colocar todo el cuadro de desplazamiento más largo de la página. Si elige esta opción, la etiqueta final será como <div style = "overflow: auto; anchura: 452 px; altura: 476px; position: absolute; left: 108px">. Vuelva a colocar el "108" después de que el atributo de "izquierda" que sin embargo muchos píxeles a través de la página que desea mover la caja; cuanto mayor sea este número, más lejos a través de la página de la caja se moverá.

7 Escriba su texto en forma normal o añadir imágenes a la caja de desplazamiento (por ejemplo, <img src = yourpicturehere.jpg>) al igual que tendría que escribir código HTML en el cuerpo estándar de su archivo.

8 Cierre la etiqueta <div> con "</ div>" (sin comillas).

9 Pruebe su página Web actualizada en su navegador para ver si el cuadro de desplazamiento se coloca a su gusto.