Computación y electrónica

Cómo crear una línea vertical sólida en CSS

Escrito por brandy alexander | Traducido por contributing writer
Cómo crear una línea vertical sólida en CSS

Cómo crear una línea vertical sólida en CSS.

Comstock Images/Stockbyte/Getty Images

A pesar de que el lenguaje de marcas de hipertexto (HTML, o HyperText Markup Language en inglés) proporciona una etiqueta que crea una división horizontal, no hay un elemento equivalente que genere una línea vertical. La necesidad de la misma se presenta a menudo, así que esto crea un dilema. Afortunadamente tienes la opción de utilizar una solución que incorpora una tabla HTML y aplica formatos de hojas de estilo en cascada (CSS, o Cascading Style Sheets en inglés) al borde. Entiende cómo se crea el código HTML y aplica las reglas CSS que generan con éxito una línea vertical y sólida.

Nivel de dificultad:
Moderadamente difícil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre el Bloc de notas, que viene con tu computadora con Windows, y abre un documento de sitio web.

  2. 2

    Coloca el cursor en el área en donde quieras que aparezca la línea sólida. Introduce el código HTML que genera una tabla simple: <table> <tr> <td></td> </tr> </table>

  3. 3

    Escribe el siguiente código antes del elemento de cierre "</head>" para crear tu regla de estilo CSS para la tabla: <style type="text/css"> <!-- table { } --> </style>

  4. 4

    Escribe "border-left:", o "border-right:;" entre las llaves para indicar si la línea debe aparecer a la izquierda o a la derecha, y escribe "solid" después de los dos puntos para especificar la forma en la que debe aparecer la línea. Escribe un número en píxeles (px) para indicar el ancho de la línea vertical, y escribe un color, como el negro, para especificar el color de la línea. Para ilustrar: table { border-left: 1px solid black; }

  5. 5

    Escribe "height:", y un valor numérico en píxeles (px) o un porcentaje (%) para especificar que tan larga será la línea. Por ejemplo: table { border-left: 1px solid black; height: 300px; }

  6. 6

    Guarda tu archivo. Ábrelo en una ventana del navegador haciendo clic en la opción “Open” (Abrir) o “Open File” (Abrir archivo) del menú “File” (Archivo) del navegador. Si estás conforme con la línea vertical, carga el archivo en tu servidor web para publicarlo. De lo contrario realiza ajustes a los valores de la regla de estilo antes de guardarla y cargarla a tu servidor de hospedaje.

Más galerías de fotos

comentarios

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

Copyright © 1999-2014 Demand Media, Inc. Acerca de

El uso de este sitio constituye la aceptación de los términos y política de privacidad de eHow. Ad Choices es-US

Demand Media