Cómo hacer una barra vertical CSS

Escrito por tivi jones | Traducido por luis alberto fuentes schwab
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer una barra vertical CSS
Usa CSS para crear líneas verticales y separar las áreas de contenido en un sitio web. (Comstock/Comstock/Getty Images)

CSS o Cascading Style Sheets, se utiliza para indicar a los navegadores cómo mostrar los elementos HTML. El archivo CSS puede ser almacenado externamente del proyecto HTML y utiliza los nombres de sección para determinar qué estilos coinciden con cada sección. Esto ahorra tiempo ya que los desarrolladores web pueden cambiar el aspecto de un sitio completamente cambiando solamente este fichero. Puedes incorporar una barra vertical CSS en tu sitio de dos maneras.

Nivel de dificultad:
Fácil

Otras personas están leyendo

Necesitarás

  • Editor de texto plano

Lista completaMinimizar

Instrucciones

    Usando una sección DIV

  1. 1

    Abre la página web en la que deseas agregar la barra vertical.

  2. 2

    Agrega una sección div llamada "VBar" en la ubicación adecuada utilizando la siguiente etiqueta:

    <div id="vbar" </div>

  3. 3

    Guarda el archivo.

  4. 4

    Abre el archivo CSS. Agrega una sección al archivo CSS con los atributos de la sección de la barra vertical, de la siguiente manera:

    vbar {

    width:?px; height:?px; background-color:#??????; }

    Sustituye los signos de interrogación con los valores apropiados. Por ejemplo, la altura y la anchura se deben enumerar en pixeles con un formato como 10px. El color de fondo debe aparecer con un formato de seis dígitos de valor web hexadecimal, como por ejemplo el negro tendrá el valor # 000000 o el blanco # FFFFFF. Visita el enlace Colores CSS en la sección "Recursos" para ver más colores hexadecimales.

  5. 5

    Guarda el archivo.

    Usando una sección con atributo de borde

  1. 1

    Abre el archivo CSS.

  2. 2

    Agrega un atributo de borde a la sección de la página que se encuentre junto a la ubicación en la que desees tu barra vertical. Por ejemplo, si tienes una sección "container" que se encuentra a la izquierda del lugar donde deseas agregar la barra vertical, agrega un atributo border-right a ésta sección con el fin de crear un borde derecho, por ejemplo:

    container {

    border-right:X; }

    Revisa la sección "Consejos" para obtener diferentes opciones de atributo borde.

  3. 3

    Guarda el archivo.

Consejos y advertencias

  • El atributo "border" se puede utilizar para determinar el ancho del borde (#px, donde # se sustituye por un número), estilo (solid, dotted, dashed, double, ridge, groove, inset, outset) o color (#??????, donde los signos de interrogación son reemplazados con números para indicar colores compatibles con la web).
  • Por ejemplo:
  • #container {
  • border-right: #333333 3px solid;
  • }

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