4 Replies - 1269 Views - Last Post: 23 August 2012 - 10:50 PM

#1 clarissa_milner  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 23-August 12

hr tags = lines

Posted 23 August 2012 - 08:17 PM

Can I use <hr> </hr> in css, or do I still use it like an HTML tag?
Is This A Good Question/Topic? 0
  • +

Replies To: hr tags = lines

#2 miguel879  Icon User is offline

  • New D.I.C Head

Reputation: 10
  • View blog
  • Posts: 40
  • Joined: 20-July 12

Re: hr tags = lines

Posted 23 August 2012 - 08:38 PM

The HR (Horizontal Ruler) tag is a very helpful html element for dividing up sections of text in a page, without having to resort to one pixel high graphic. The problem is that left unstyled, your leaving it up to the browser to determine how it looks. Which can be indifferent at the best of times.

One way to control this is by using the available HTML attributes:

align: [ left, center and right ]
noshade: (solid line)
size: [ pixel value ] line height of the element
width: [ pixel or percentage value ] width of the element

example.

<hr noshade size="1" width="90%" align="center">

Sadly not all browsers will interpret these attributes the same way, so the best way to get a consistent look is to use CSS. hope i help

miguel
Was This Post Helpful? 1
  • +
  • -

#3 clarissa_milner  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 22
  • Joined: 23-August 12

Re: hr tags = lines

Posted 23 August 2012 - 08:40 PM

Hey Miguel,
That was very helpful, but I also need to know how to use it in CSS coding, do you know this too?

Crissy
Was This Post Helpful? 0
  • +
  • -

#4 miguel879  Icon User is offline

  • New D.I.C Head

Reputation: 10
  • View blog
  • Posts: 40
  • Joined: 20-July 12

Re: hr tags = lines

Posted 23 August 2012 - 08:46 PM

Even though it's sometimes recommended to replace the <hr> element with cascading stylesheets only using horizontal borders of other elements, I prefer <hr> as a section divider. This makes a web page more readable even in older browsers that receive only pure HTML with no style sheet.

On the other hand, simple, unstyled <hr> does not look good in richly styled documents. That's why I tried to find a couple of cross-browser compatible ways to make it prettier. I used to hide style sheets from the version 4 browsers and older, so my targeted browsers are IE5+, Opera 5+ and Mozilla/NN6.

Various CSS properties can be applied on <hr>:

All three browsers allow setting width and height of the <hr> element.
The border property can be used in IE and Mozilla. It does not work well in Opera (see examples below).
IE uses the color property for the <hr> element.
Opera and Mozilla use background-color for the <hr> element.
All three browser allow setting a background-image of the <hr> element, however this is not very useful in IE and Opera.

Heres an example..

hr {
  border: 0;
  width: 80%;
color: #f00;
background-color: #f00;
height: 5px;
}



Was This Post Helpful? 2
  • +
  • -

#5 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3481
  • View blog
  • Posts: 10,033
  • Joined: 08-June 10

Re: hr tags = lines

Posted 23 August 2012 - 10:50 PM

@Crissy: <hr> is an HTML tag and will always be. as such, it has noting to do with CSS (nor does the <hr> tag belong into CSS). what you can do in CSS is applying style rules to the hr element, though you have to stick to the CSS notation thereof.

another note, <hr> elements are standalone (empty) elements and do not have a closing tag.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1