En HTML para crear una linea horizontal utilizamos

<hr />

Si queremos dar color a la línea horizontal lo hacemos así:

<hr style="color: #0056b2;" />

Si queremos variar el grosor de la línea, pondremos: “size=x”, siendo “x” el número de grosor, por ejemplo:

<hr size="10" />

Si queremos variar lo que ocupa de ancho la línea horizontal usaremos: “width=x %”, siendo “x” el tanto por cien que ocupa la línea:

<hr width="75%" />

Si queremos quitar la sombra a la línea horizonal

<hr noshade="noshade" />

Para alinear la linea a la izquierda, derecha o centro utilizamos “align”. “align = center” para el centro, “align = right” para la derecha y “align = left” para la izquierda. Por ejemplo:

<hr align="left" noshade="noshade" size="2" width="80%" />

victor

Hola!. Me llamo Víctor Reyes y soy Ingeniero Agrónomo de formación y programador web de profesión (desde el año 2006). Por otra parte me gusta, entre otras aficiones, el senderismo, jugar al futbol y al FIFA en la PS3. Te animo a participar en mi web www.biolucas.com

This Post Has 24 Comments

  1. lara

    Buenos días,

    Estoy intentando hacer la linea en rojo y vertical y el color no me cambia ( siguiendo las instrucciones de arriba) y no consigo que sea vertical. Sería para una linea al lado del menú horizontal.

    Muchisimas gracias

    Enhorabuena por el blog

    1. victor
      victor

      Hola Lara, muchas gracias por participar. Si es una línea vertical tiene pinta del borde de un div o algo así. Puedes poner la web y lo vemos. Saludos!

  2. Pedro

    Hola victor aqui to denuevo, bueno como te hice en la pregunta anterior creo que aqui se ve mejor http://axwdeportes2.ucoz.net/MenuCanales.html quiero que me enseñes a hacer eso porfa te lo agradeceria si te fijas cuando abre una repeticion se abre en el cuadro negro y un streaming donde dice canal 1 2 etc se abre en el otro cuadro

    1. victor
      victor

      Hola Pedro, he estado trasteando y he encontrado varias respuestas apropiadas buscando “Menú con pestañas con JQuery”. La explicación es que tu tienes todos los div con su streaming pero oculto, según das a una pestaña o a otra se muestra el div.

      Espero que te sirva, saludos!

  3. Pedro

    Hola que tal un salu2, tu post me ha servido michisisimo muchas gracias pero te queria decirsi me puedes explicar como hacer este tipo de cuadro http://adictoxwwe.net/# si entras a esa web veras un cuadro donde pone streamings al lado hay cuadritos pequeños que son repeticiones y si le das click a uno se abre en el cuadro negro igual que los canales de arriba me podrias decir como se hace ese tipo de cuadro gracias

    1. victor
      victor

      Hola Pedro, gracias por contactar con nosotros. Con la web tenemos un problema ya que no carga bien, no se si tienes otra ruta.

      Saludos!

  4. fernanda

    hola buenas noches me ayudarian a poner un video en html y audio mp3
    gracias

    1. victor
      victor

      Hola Fernanda, gracias por participar en el blog. Lo publicamos por si alguien te puede ayudar. Saludos!

  5. Orlando

    Buenas tardes, estoy luchando con una html al cual le intento sacar unas lineas blancas verticales.
    http://contebienesraices.com.ar/sanct.html
    Es una imagen que genere con photoshop donde setie ciertas áreas para asignarle unos links y lo guarde como html, lo estoy subiendo con dreamweaver. Se que es algo de principiante y seguramente es fácil de solucionar, peor llevo horas sin poder solucionarlo.
    Lo raro es que en ie se ve bien y en la previsualizacion del dreamweaver tb se ve bien. Pero en lo otros navegadores se ven estas malditas lineas blancas.
    Espero que me puedas ayudar.

    Desde ya muchas gracias.

    1. victor
      victor

      Hola Orlando, gracias por participar en el blog. La verdad yo no veo los hipervínculos que estarían sobre la imagen y las líneas blancas. Lo he revisado con Chrome, IE y Firefox. Quizás deberías utilizar CSS para ocultarlas de la vista, como con visibility: hidden;

      Coméntame si te ha servido o necesitas ayuda.

      Un saludo, Víctor

  6. christian

    como puedo hacer las lineas que se encuentran a la derecha de tu pagina , ósea las lineas delgadas debajo de las lineas mas gruesas rojas , gracias

    1. victor
      victor

      Buenas Christian, muchas gracias por contactar. Creo que te refieres a las líneas finas debajo de Comentarios recientes. Si activas en Chrome “inspeccionar elemento” y te sitúas encima veras que se está utilizando border-top: 1px solid #cdcdcd; de tal forma que si lo desactivas verás que desaparecen, ya que en cada li crea un borde superior sólido de 1px y con el color #cdcdcd. Confírmame si era está tu duda. Saludos!

  7. Matias

    Que tal?. Tengo un problema, utilizando Mozzilla no aparecen los separadores, sin embargo, si visualizo la pagina en Chrome si. Que puede ser?

    1. Matias

      Estoy actualizando Mozzilla, de todas formas, ahora me percate que habia colocado la instrucción de esta manera sin la “/”

      1. victor
        victor

        Hola Matias, gracias por participar. Mira a ver si es eso. De todas formas a veces dan problemas los navegadores, aunque hr es bastante común y no debería dar problemas de compatibilidad. Un saludo, Víctor

  8. Belén

    Buenos días. Estoy intentando crear una línea continua que contenga texto intercalado ——–hola——–
    Algo así pero con las líneas continuas y no discontinuas. ¿Sabéis cómo lo puedo hacer? Muchas gracias. Belén

    1. victor
      victor

      Hola Belén, muchas gracias por participar. Algo así te debería servir. Coméntame si te funcionó. Saludos!:

      <div style="height: 1px; background-color: black; text-align: center">
        <span style="background-color: white; position: relative; top: -0.5em;">
          hola
        </span>
      </div>
      
  9. LINA Q.

    HOLA BUENAS NOCHES, ESTOY HACIENDO UN TRIQUI, Y NECESITO TRAZAR LA LINEA HORIZONTAL QUE FORMA EL TRIQUI OSEA QUE GANÉ PERO NO HE PODIDO… ME DIJERON QUE ES CON PERO NO SE COMO HACERLO

    1. victor
      victor

      Hola Lina, muchas gracias por participar, ¿qué es un triqui?. Si me pones la dirección con una imagen de un triqui te podremos ayudar entre todos.

      Un saludo, Víctor

  10. Hec

    Hola Victor,

    Me gustaria saber como hacer para alinear el texto con los separadores horizontales; me explico: quiero dejar el separador centrado, y con un width de 50%, hasta ahi puedo solo (gracias a tu explicacion). El problema es que quiero dejar el texto alineado a la izquierda de donde comienza el separador (algo asi como has hecho en los ejemplos) , y no se como hacerlo. Si pudieras darme una mano, te lo agradeceria hasta el infinito y mas alla

    1. victor
      victor

      Hola Hec, perdona el tiempo de demora en responderte. Antes de nada muchas gracias por colaborar en el blog.
      Para resolverlo he colocado primero el hr alineado a la derecha al 50% por ejemplo y más abajo un div con margin-left del 50% y un width del 50% también. Quedaría algo así:

      <hr align="right" noshade="noshade" size="1" width="50%" />
      <div style="margin-left:50%;width:50%";>
      Línea 1<br />
      Línea 2<br />
      Línea 3
      </div>
      

      Un saludo, Víctor

  11. Isabel

    Hola Victor,

    Yo tambien de formación ingería agrícola y acabo de empezar con el html. Tu explicación de línea horizontal me ha venido genial.

    1. victor
      victor

      Hola Isabel, muchas gracias por participar en el blog y me alegra mucho que te haya servido ;D. Veo que estás haciendo la misma transición que yo, de ingeniería agrícola a páginas web, ya verás que es una profesión que te puede dar muchas alegrías y algún que otro quebradero de cabeza. Si tienes cualquier cuestión no dudes en preguntarla.

      Saludos, Víctor

      1. LINA Q.

        HOLA BUENAS NOCHES, ESTOY HACIENDO UN TRIQUI Y NECESITO TRAZAR LA LINEA HORIZONTAL, PARA FORMAR ESE TRIQUI PODRIA DECIRME CUAL ES EL CODIGO?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


*

CommentLuv badge