Publicentral.com - Promocion en cientos de buscadoresPromocion en cientos de buscadores
Mostrando Codigo - Css
Code

Css - Estilo de Linea horizontal - Hr

Códigos Css

Hay veces que al introducir una linea horizontal ( hr ) en nuestras paginas resultan un poco aburridas, con este ejemplo de damos una apariencia mas divertida.
Visitas: 91,802 - 02/07/2005 1:09:55
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
CODIGO
Este codigo aun no ha sido probado por Tutores.org en ChromeEste codigo aun no ha sido probado por Tutores.org en FirefoxCodigo probado en Internet Explorer 7+Este codigo aun no ha sido probado por Tutores.org en OperaEste codigo aun no ha sido probado por Tutores.org en Safari


/* Codigo ofrecido por Tutores.org */

  1. <head>
  2. <style type="text/css">
  3. hr.linea {  
  4.   height: 1px;
  5.   border: 0;
  6.   color: #cc0000;
  7.   background-color: #333333;
  8.   width: 75%;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <hr class="linea">
  14. </body>



ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Estilo de Linea horizontal - Hr" href="http://www.tutores.org/codigo/1496/" target="_blank">Estilo de Linea horizontal - Hr</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
01/05/2004 16.50.01
4 5
Este código me pareció excelente, pero habrá forma de aplicarle algun estilo para que la linea no fuera continua, sino punteada.

Saludos.
Comentario usuario
19/04/2003
5 5
Hola
Prueba
hr.linea {
height: 1px;
border: 1px dotted #ccc;
color: #cc0000;
background-color: #333333;
width: 75%;
}

espero que te sirva
Comentario usuario
30-12-2007 20:54:16
1 5
¿Por qué no funciona igual en Firefox que en Explorer?
En Explorer la línea es roja y en Firefox gris.
Comentario usuario
el lu
2 5
a mi me colorea la linea solo con los atributos del borde, asi:

hr {
width: 90%;
height: 1px;
color: red; /*es indiferente*/
background-color: green; /*tambien indiferente*/
border: 0;
border-bottom: 1px solid blue; /*este es el que importa*/
}

saludos, el lu.

http://cuantomal.blogspot.com

p.d. En el titulito donde debiera decir "comentarios" dice "cometarios" ;)
Comentario usuario
24-09-2007 10:13:52
1 5
Hola yo buscaba algo similar y eto me ha funcionado con IE7 Opera y FFox

hr{
width:55%;
height:0px;/*solo queremos borde*/
text-align:left;
border-top:0px;/*quita el grosor extra de Opera y FFox*/
border-bottom:#CC0000 dashed 1px;
}
Comentario usuario
Erothes
2 5
El codigo es excelente pero cuando coloco la linea HR en una fila de la tabla, esta hace que la altura de la fila aumente... como puedo corregir eso¿?
Comentario usuario
jose lizana
1 5
gracias Jormaz por tu aporte, era justo lo que necesitaba, pero le cambié el estilo del borde por dotted.
INSERTAR COMENTARIO

Usuario:
Email:
Comentario:
Codigo Seguridad

Antes de enviar un comentario...
Todos los comentarios son revisados personalmente
Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado
Usuarios registrados tienen preferencia en recibir respuestas de ayuda!!
Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor.
Por favor, insertar los comentarios descriptivos.