La forma más sencilla para crear un cuadro de desplazamiento horizontal es el uso de un elemento DIV - un bloque totalmente personalizable de contenido en su página. Con el elemento DIV, se puede establecer la anchura y la altura de la caja, colocarla en su página y establecer el desbordamiento de modo que en lugar de su caja estática de desplazamiento vertical, se desplaza a un lado a otro. Sin embargo, tendrá que estructurar su contenido específicamente por lo que se presta para desplazarse horizontalmente.
Creación de su caja
Determinar qué tan grande que necesita su caja, tanto en anchura y altura para adaptarse a sus contenidos; incluir en su estimación de la altura de la barra de desplazamiento inferior, ya que llenar una pequeña porción de la parte inferior de la caja. Para establecerlo como el desplazamiento horizontal, deberá definir la propiedad overflow-x para desplazarse, mientras que apagar el desbordamiento-y - básicamente diciendo al elemento DIV que vamos a ignorar cualquier contenido que excede la altura de la caja, pero seguir cualquier contenido que excede la anchura. El código para un cuadro básico, 250 píxeles de alto por 600 píxeles de largo, set de desplazamiento lateral se verá así:
<Div style = "width: 600; altura: 250; overflow-y: hidden; overflow-x: desplazarse;"> Contenido </ div>.
Si usted tiene una hoja de estilo para su página web, se puede asignar su DIV un ID y establecer estas propiedades en la hoja de estilo, en lugar de en la etiqueta DIV.
La estructuración de su contenido
De desplazamiento lateral con el contenido de sólo texto es torpe e ilegible; es poco probable que mantener a muchos lectores cuando descubren que necesitan para desplazarse 250 píxeles a leer la primera línea. Sin embargo, se puede utilizar una tabla para crear células, el diseño de un tipo de diseño de desplazamiento lateral modular. Por ejemplo, si usted quiere cuatro células dentro de su cuadro de desplazamiento lateral, cada uno de 200 píxeles de alto por 250 píxeles de ancho, el código HTML se vería así:
<Div style = "width: 600; altura: 250; overflow-y: hidden; overflow-x: desplazarse;">
<Table width = "1000" height = "200" border = "1" cellpadding = "0" cellspacing = "0">
<Tr>
<Td altura = "200" width = "250"> Celda 1 </ td>
<Td altura = "200" width = "250"> teléfono 2 </ td>
<Td altura = "200" width = "250"> Cell 3 </ td>
<Td altura = "200" width = "250"> teléfono 4 </ td>
</ Tr>
</ Table>
</ Div>
El estilo de su caja
Puede estilo de su caja de desplazamiento horizontal en la CSS, de la misma manera que ha modificado los atributos de desplazamiento y el tamaño indicado. En el CSS, puede elegir los colores, las fuentes y las alineaciones, y agregar bordes y fondos de imágenes - casi cualquier cosa. En el siguiente ejemplo HTML, va a crear una caja horizontal con un fondo rojo, borde negro grueso y células sin bordes blancos con cinco píxeles de espacio entre ellos:
<Div style = "width: 600; altura: 250; overflow-y: hidden; overflow-x: desplazamiento; background: # CC0000; border: 3px sólida # 000000;">
<Table width = "1000" height = "200" border = "0" cellpadding = "0" cellspacing = "5">
<Tr>
<Td height = "200" width = "250" bgcolor = "# FFFFFF"> Celda 1 </ td>
<Td height = "200" width = "250" bgcolor = "# FFFFFF"> teléfono 2 </ td>
<Td height = "200" width = "250" bgcolor = "# FFFFFF"> Cell 3 </ td>
<Td height = "200" width = "250" bgcolor = "# FFFFFF"> teléfono 4 </ td>
</ Tr>
</ Table>
</ Div>
Usos de desplazamiento horizontal
El desplazamiento horizontal es una opción de diseño que es más estético, pero menos utilitaria - como tal, la extraña presentación y naturaleza un tanto limitada de la misma no se presta a texto o diseños basados en documentos. El arte y las imágenes, sin embargo, de vez en cuando son más fáciles de presentar en un formato de desplazamiento lateral, sobre todo cuando se trata de crear algo sorprendente e inusual.