Blog de Diseño web

Como estilizo reglas horizontales sin imágenes?

Css | Escrito por Ezequiel M. | Febrero - 25 - 2009

Eliminar subrayado de links

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:



Te gustó este post? Compartelo en tus redes sociales
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • FriendFeed
  • Meneame
  • Reddit
  • RSS
  • Technorati
  • Twitthis

Articulos relacionados:

    • None Found

Comentarios:

Deja tu opinion