All You Can Do with Horizontal Rules

All You Can Do With: Horizontal Rules

Not showing in this AYCD page.

tabindex is available to control the tab order.(tabindex="5" {index order number}).
alt - not relavent
JavaScript
- onclick
- ondblclick
- onmousedown
- onmouseup
- onmouseover
- onmousemove
- onmouseout
- onkeypress
- onkeydown
- onkeyup

Basic Basic Example:

Basic Example:
<HR>
<HR width="50%" align="center">
<HR size="5" width="50%" align="center">
<HR noshade size="5" width="50%" align="center">

tabindex

accesskey

Size

Align

width

noshade

This is the CSS for Checkbox.

Background

Image Image Example:

Basic Example:
<HR style="background: url('images/box_aqua_bg.gif');">
<HR width="50%" align="left" style="background: url('images/box_aqua_bg.gif');">
<HR size="20" width="50%" align="center" style="background: url('images/box_aqua_bg.gif');">
<HR noshade size="5" width="50%" align="right" style="background: url('images/box_aqua_bg.gif');">

Color

background-color background-color Example:

Basic Example:
<HR style="background-color: lightyellow;">
<HR width="50%" align="left" style="background-color: lightyellow;">
<HR size="20" width="50%" align="center" style="background-color: lightyellow;">
<HR noshade size="5" width="50%" align="right" style="background-color: lightyellow;">

Transparent background-color: Transparent Example:

Basic Example:
<HR style="background-color: Transparent;">
<HR width="50%" align="left" style="background-color: Transparent;">
<HR size="20" width="50%" align="center" style="background-color: Transparent;">
<HR noshade size="5" width="50%" align="right" style="background-color: Transparent;">

Did this by adding a background image to the enclosing div tag.

Image Repeat-X

Image Repeat-X Image Repeat-X Example:

Image Repeat-X Example:
<HR style="background: url('images/box_aqua_bg.gif'); background-repeat: repeat-x">
<HR width="50%" align="left" style="background: url('images/box_aqua_bg.gif'); background-repeat: repeat-x">
<HR size="20" width="50%" align="center" style="background: url('images/box_aqua_bg.gif'); background-repeat: repeat-x">
<HR noshade size="5" width="50%" align="right" style="background: url('images/box_aqua_bg.gif'); background-repeat: repeat-x">

Image Repeat-Y Image Repeat-Y Example:

Image Repeat-Y Example:
<HR style="background: url('images/box_aqua_bg.gif'); background-repeat: repeat-y">
<HR width="50%" align="left" style="background: url('images/box_aqua_bg.gif'); background-repeat: repeat-y">
<HR size="20" width="50%" align="center" style="background: url('images/box_aqua_bg.gif'); background-repeat: repeat-y">
<HR noshade size="5" width="50%" align="right" style="background: url('images/box_aqua_bg.gif'); background-repeat: repeat-y">

Image no-repeat Image no-repeat Example:

Image no-repeat Example:
<HR style="background: url('images/box_aqua_bg.gif'); background-repeat: no-repeat">
<HR width="50%" align="left" style="background: url('images/box_aqua_bg.gif'); background-repeat: no-repeat">
<HR size="20" width="50%" align="center" style="background: url('images/box_aqua_bg.gif'); background-repeat: no-repeat">
<HR noshade size="5" width="50%" align="right" style="background: url('images/box_aqua_bg.gif'); background-repeat: no-repeat">

Image Repeat Image Repeat Example:

Image Repeat Example:
<HR style="background: url('images/box_aqua_bg.gif'); background-repeat: repeat">
<HR width="50%" align="left" style="background: url('images/box_aqua_bg.gif'); background-repeat: repeat">
<HR size="20" width="50%" align="center" style="background: url('images/box_aqua_bg.gif'); background-repeat: repeat">
<HR noshade size="5" width="50%" align="right" style="background: url('images/box_aqua_bg.gif'); background-repeat: repeat">

These work too:

background-attachment: scroll
background-attachment: fixed

Border Border Color

Border Color:
<HR style="border-color: lightgreen;">
<HR width="50%" align="left" style="border-color: lightgreen;">
<HR size="20" width="50%" align="center" style="border-color: lightgreen;">
<HR noshade size="5" width="50%" align="right" style="border-color: lightgreen;">

These work too:

border-top-color
border-right-color
border-bottom-color
border-left-color

Border width

Border width:
<HR style="border-width: 4px;">
<HR width="50%" align="left" style="border-width: 4px;">
<HR size="20" width="50%" align="center" style="border-width: 4px;">
<HR noshade size="5" width="50%" align="right" style="border-width: 4px;">

These work too:

border-top-width
border-right-width
border-bottom-width
border-left-width

Border style

Border style:
<HR style="border-style: dotted;">
<HR width="50%" align="left" style="border-style: dotted;">
<HR size="20" width="50%" align="center" style="border-style: dotted;">
<HR noshade size="5" width="50%" align="right" style="border-style: dotted;">

Here are the options:

none
solid
hidden
dotted
dashed
double
groove
ridge
inset
outset

These work too:

border-top-style
border-right-style
border-bottom-style
border-left-style

Color Color

Color:
<HR style="color: red;">
<HR width="50%" align="left" style="color: red;">
<HR size="20" width="50%" align="center" style="color: red;">
<HR noshade size="5" width="50%" align="right" style="color: red;">

Cursor Cursor

Color:
<HR style="Cursor: crosshair;">
<HR width="50%" align="left" style="Cursor: crosshair;">
<HR size="20" width="50%" align="center" style="Cursor: crosshair;">
<HR noshade size="5" width="50%" align="right" style="Cursor: crosshair;">

Here are the options:

auto
crosshair
default
hand
pointer
move
n
ne
e
se
sw
w
nw-resize
text
wait
help
url(url)

Direction Direction

Direction Example:
<HR style="direction: rtl;">
<HR width="50%" align="left" style="direction: rtl;">
<HR size="20" width="50%" align="center" style="direction: rtl;">
<HR noshade size="5" width="50%" align="right" style="direction: rtl;">

Here are the options:

Right To Left=rtl
Left To Right=ltr

Display Display
CSS Display is being evealuated for implementation on this page.

Float Float- right

Float-right Example:
<HR style="float: right;">
<HR width="50%" align="left" style="float: right;">
<HR size="20" width="50%" align="center" style="float: right;">
<HR noshade size="5" width="50%" align="right" style="float: right;">

Float- left

Float-left Example:
<HR style="float: left;">
<HR width="50%" align="left" style="float: left;">
<HR size="20" width="50%" align="center" style="float: left;">
<HR noshade size="5" width="50%" align="right" style="float: left;">

Float- none

Float-none Example:
<HR style="float: none;">
<HR width="50%" align="left" style="float: none;">
<HR size="20" width="50%" align="center" style="float: none;">
<HR noshade size="5" width="50%" align="right" style="float: none;">

Font Just can't see doing all these tags for this object.

Margin Margin

Margin Example:
<HR style="margin-top: 20px;">
<HR width="50%" align="left" style="margin-top: 20px;">
<HR size="20" width="50%" align="center" style="margin-top: 20px;">
<HR noshade size="5" width="50%" align="right" style="margin-top: 20px;">

Here are the options:

margin-top: auto/Xpx;
margin-right auto/Xpx;
margin-bottom auto/Xpx;
margin-left auto/Xpx;

Padding padding

padding Example:
<HR style="padding: 12px;">
<HR width="50%" align="left" style="padding: 12px;">
<HR size="20" width="50%" align="center" style="padding: 12px;">
<HR noshade size="5" width="50%" align="right" style="padding: 12px;">

Here are the options:

padding-top
padding-right
padding-bottom
padding-left

Position position

position Example:
<HR style="position: relative; top:-50; left:5">
<HR width="50%" align="left" style="position: relative; top:-50; left:5">
<HR size="20" width="50%" align="center" style="position: relative; top:-50; left:5">
<HR noshade size="5" width="50%" align="right" style="position: relative; top:-50; left:5">

Here are the options:

position:absolute
position:relative
position:fixed
top
left
z-index

Text Align text align

text-align Example:
<HR style="text-align: right">
<HR width="50%" align="left" style="text-align: right">
<HR size="20" width="50%" align="center" style="text-align: right">
<HR noshade size="5" width="50%" align="right" style="text-align: right">

center

text-align center Example:
<HR style="text-align: center">
<HR width="50%" align="left" style="text-align: center">
<HR size="20" width="50%" align="center" style="text-align: center">
<HR noshade size="5" width="50%" align="right" style="text-align: center">

justify:

text-align justify Example:
<HR style="text-align: justify">
<HR width="50%" align="left" style="text-align: justify">
<HR size="20" width="50%" align="center" style="text-align: justify">
<HR noshade size="5" width="50%" align="right" style="text-align: justify">

Here are the options:

text-align: left
text-align: center
text-align: right
text-align: justify

Text Decoration text decoration

text-decoration: line-through Example:
<HR style="text-decoration: line-through">
<HR width="50%" align="left" style="text-decoration: line-through">
<HR size="20" width="50%" align="center" style="text-decoration: line-through">
<HR noshade size="5" width="50%" align="right" style="text-decoration: line-through">

blink

text-decoration: blink Example:
<HR style="text-decoration: blink">
<HR width="50%" align="left" style="text-decoration: blink">
<HR size="20" width="50%" align="center" style="text-decoration: blink">
<HR noshade size="5" width="50%" align="right" style="text-decoration: blink">

Here are the options:

text-decoration: none
text-decoration: overline
text-decoration: line-through
text-decoration: underline
text-decoration: blink

Text Indent text indent
text-indent: 100px;

text-indent: 100px; Example:
<HR style="text-indent: 100px;">
<HR width="50%" align="left" style="text-indent: 100px;">
<HR size="20" width="50%" align="center" style="text-indent: 100px;">
<HR noshade size="5" width="50%" align="right" style="text-indent: 100px;">

Here are the options:

text-indent: #px

Text Justify text justify
text-justify: newspaper;

text-justify: newspaper; Example:
<HR style="text-justify: newspaper;">
<HR width="50%" align="left" style="text-justify: newspaper;">
<HR size="20" width="50%" align="center" style="text-justify: newspaper;">
<HR noshade size="5" width="50%" align="right" style="text-justify: newspaper;">

Here are the options:

text-justify: auto;
text-justify: distribute;
text-justify: distribute-all-lines;
text-justify: inter-cluster;
text-justify: inter-ideograph;
text-justify: inter-word;
text-justify: kashda;
text-justify: newspaper;

Text Shadow text shadow
text-shadow: blue;

text-shadow: blue; Example:
<HR style="text-shadow: blue;">
<HR width="50%" align="left" style="text-shadow: blue;">
<HR size="20" width="50%" align="center" style="text-shadow: blue;">
<HR noshade size="5" width="50%" align="right" style="text-shadow: blue;">

Here are the options:

text-shadow:

Text Transform text transform

<FORm>
<LABel For="CB1">Checkbox 1 Default Checked (Baseball)</label><INPUT Type="Checkbox" Name="Baseball" ID="CB1" Value="Checkbox 1" style="text-transform: uppercase;" CHECKED><BR>
<LABel For="CB2">Checkbox 2 (Basketball)</label><INPUT Type="Checkbox" Name="Basketball" ID="CB2" Value="Checkbox 2" style="text-transform: uppercase;"><BR>
<LABel For="CB3">Checkbox 3 (Football)</label><INPUT Type="Checkbox" Name="Football" ID="CB3" Value="Checkbox 3" style="text-transform: uppercase;">
</form>

Here are the options:

text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;

Text Underline Position text underline position

<FORm>
<LABel For="CB1">Checkbox 1 Default Checked (Baseball)</label><INPUT Type="Checkbox" Name="Baseball" ID="CB1" Value="Checkbox 1" style="text-underline-position: above;" CHECKED><BR>
<LABel For="CB2">Checkbox 2 (Basketball)</label><INPUT Type="Checkbox" Name="Basketball" ID="CB2" Value="Checkbox 2" style="text-underline-position: above;"><BR>
<LABel For="CB3">Checkbox 3 (Football)</label><INPUT Type="Checkbox" Name="Football" ID="CB3" Value="Checkbox 3" style="text-underline-position: above;">
</form>

Here are the options:

text-underline-position: above;
text-underline-position: below;

Vertical Align vertical align

<FORm>
<LABel For="CB1">Checkbox 1 Default Checked (Baseball)</label><INPUT Type="Checkbox" Name="Baseball" ID="CB1" Value="Checkbox 1" style="vertical-align: top;" CHECKED><BR>
<LABel For="CB2">Checkbox 2 (Basketball)</label><INPUT Type="Checkbox" Name="Basketball" ID="CB2" Value="Checkbox 2" style="vertical-align: top;"><BR>
<LABel For="CB3">Checkbox 3 (Football)</label><INPUT Type="Checkbox" Name="Football" ID="CB3" Value="Checkbox 3" style="vertical-align: top;">
</form>

<FORm>
<LABel For="CB1">Checkbox 1 Default Checked (Baseball)</label><INPUT Type="Checkbox" Name="Baseball" ID="CB1" Value="Checkbox 1" style="vertical-align: middle;" CHECKED><BR>
<LABel For="CB2">Checkbox 2 (Basketball)</label><INPUT Type="Checkbox" Name="Basketball" ID="CB2" Value="Checkbox 2" style="vertical-align: middle;"><BR>
<LABel For="CB3">Checkbox 3 (Football)</label><INPUT Type="Checkbox" Name="Football" ID="CB3" Value="Checkbox 3" style="vertical-align: middle;">
</form>

<FORm>
<LABel For="CB1">Checkbox 1 Default Checked (Baseball)</label><INPUT Type="Checkbox" Name="Baseball" ID="CB1" Value="Checkbox 1" style="vertical-align: bottom;" CHECKED><BR>
<LABel For="CB2">Checkbox 2 (Basketball)</label><INPUT Type="Checkbox" Name="Basketball" ID="CB2" Value="Checkbox 2" style="vertical-align: bottom;"><BR>
<LABel For="CB3">Checkbox 3 (Football)</label><INPUT Type="Checkbox" Name="Football" ID="CB3" Value="Checkbox 3" style="vertical-align: bottom;">
</form>

Here are the options:

vertical-align: top;
vertical-align: middle;
vertical-align: baseline;
vertical-align: bottom;
vertical-align: sub;
vertical-align: super;
vertical-align: text-bottom;
vertical-align: text-top;

Visibility visibility

<FORm>
<LABel For="CB1">Checkbox 1 Default Checked (Baseball)</label><INPUT Type="Checkbox" Name="Baseball" ID="CB1" Value="Checkbox 1" style="visibility: hidden;" CHECKED><BR>
<LABel For="CB2">Checkbox 2 (Basketball)</label><INPUT Type="Checkbox" Name="Basketball" ID="CB2" Value="Checkbox 2" style="visibility: hidden;"><BR>
<LABel For="CB3">Checkbox 3 (Football)</label><INPUT Type="Checkbox" Name="Football" ID="CB3" Value="Checkbox 3" style="visibility: hidden;">
</form>

Here are the options:

visibility: hidden;
visibility: visible;
visibility: collapse;

White Space white space

<FORm>
<LABel For="CB1">Checkbox 1 Default Checked (Baseball)</label><INPUT Type="Checkbox" Name="Baseball" ID="CB1" Value="Checkbox 1" style="white-space: nowrap;" CHECKED><BR>
<LABel For="CB2">Checkbox 2 (Basketball)</label><INPUT Type="Checkbox" Name="Basketball" ID="CB2" Value="Checkbox 2" style="white-space: nowrap;"><BR>
<LABel For="CB3">Checkbox 3 (Football)</label><INPUT Type="Checkbox" Name="Football" ID="CB3" Value="Checkbox 3" style="white-space: nowrap;">
</form>

Here are the options:

white-space: normal;
white-space: nowrap;
white-space: pre;

Word Spacing word spacing

<FORm>
<LABel For="CB1">Checkbox 1 Default Checked (Baseball)</label><INPUT Type="Checkbox" Name="Baseball" ID="CB1" Value="Checkbox 1" style="word-spacing: -5px;" CHECKED><BR>
<LABel For="CB2">Checkbox 2 (Basketball)</label><INPUT Type="Checkbox" Name="Basketball" ID="CB2" Value="Checkbox 2" style="word-spacing: -5px;"><BR>
<LABel For="CB3">Checkbox 3 (Football)</label><INPUT Type="Checkbox" Name="Football" ID="CB3" Value="Checkbox 3" style="word-spacing: -5px;">
</form>

Here are the options:

word-spacing: normal;
word-spacing: #px;
word-spacing: -#px;

Word Wrap word wrap

<FORm>
<LABel For="CB1">Checkbox 1 Default Checked (Baseball)</label><INPUT Type="Checkbox" Name="Baseball" ID="CB1" Value="Checkbox 1" style="word-wrap: break-word;" CHECKED><BR>
<LABel For="CB2">Checkbox 2 (Basketball)</label><INPUT Type="Checkbox" Name="Basketball" ID="CB2" Value="Checkbox 2" style="word-wrap: break-word;"><BR>
<LABel For="CB3">Checkbox 3 (Football)</label><INPUT Type="Checkbox" Name="Football" ID="CB3" Value="Checkbox 3" style="word-wrap: break-word;">
</form>

<FORm>
<LABel For="CB1">Checkbox 1 Default Checked (Baseball)</label><INPUT Type="Checkbox" Name="Baseball" ID="CB1" Value="Checkbox 1" style="word-wrap: normal;" CHECKED><BR>
<LABel For="CB2">Checkbox 2 (Basketball)</label><INPUT Type="Checkbox" Name="Basketball" ID="CB2" Value="Checkbox 2" style="word-wrap: normal;"><BR>
<LABel For="CB3">Checkbox 3 (Football)</label><INPUT Type="Checkbox" Name="Football" ID="CB3" Value="Checkbox 3" style="word-wrap: normal;">
</form>

Here are the options:

word-wrap: break-word;
word-wrap: normal;

Zoom zoom

<FORm>
<LABel For="CB1">Checkbox 1 Default Checked (Baseball)</label><INPUT Type="Checkbox" Name="Baseball" ID="CB1" Value="Checkbox 1" style="zoom: 50%;" CHECKED><BR>
<LABel For="CB2">Checkbox 2 (Basketball)</label><INPUT Type="Checkbox" Name="Basketball" ID="CB2" Value="Checkbox 2" style="zoom: 50%;"><BR>
<LABel For="CB3">Checkbox 3 (Football)</label><INPUT Type="Checkbox" Name="Football" ID="CB3" Value="Checkbox 3" style="zoom: 50%;">
</form>

Here are the options:

zoom: 50%;