Como estilizo reglas horizontales sin imágenes?
Css | Escrito por Ezequiel M. | Febrero - 25 - 2009
Muchos olvidaron que en Xhtml hay un elemento que se llama HR exclusivo para la creación de reglas horizontales. A través de CSS podemos darle el aspecto deseado y dejar de usar imágenes para simular divisiones.
Atacamos directamente a la etiqueta HR desde la hoja de estilo asignando los atributos necesarios. Podemos definir el grosor y largo de la regla con width y height, usar bordes, colores y mas. Hay que tener en cuenta que los navegadores Opera y Firefox renderizan diferente a IE7, esto se puede comprobar al usar el atributo color, ya que Firefox y Opera lo toman como color de borde e IE7 como color de relleno.
Otra cosa a tener en cuenta es si vamos a usar bordes definir su tamaño porque este varia según el modelo de caja de cada navegador.
Código Xhtml
Código CSS
hr{
width:100px;
height:2px;
border:1px solid #FFCC00;
color:#FFCC00;
background-color:#FFCC00;
}
Las propiedades “Color” y “Background-color” tienen que tener el mismo valor para mantener una correcta visualizacion del color en todos los navegadores.
Resultado:
