body {
    background: #aaa;
}

.ruler {
    position: absolute;
    top:0; left:0;
    width: 100%; height: 25px;
    background: #eee; color: #000;
    font-family: arial;
    font-size: 12px; line-height: 14px;
    border-bottom: 1px solid;
    overflow: hidden;
    z-index: 9;
}
.ruler > div {
    display: inline-block;
    background: #000;
}
.ruler .tickLabel {
    position:relative;
    top: -10px;
    margin-left: 4px;
    width: 1px;
    height: 100%;
    text-indent: 1px;
    line-height: 20px;
}
.ruler .tickLabel:first-of-type {
    margin-left: 0px;
}
.ruler .tickMajor {
    margin-top: 19px;
    margin-left: 4px;
    width: 1px;
    height: 6px;
}
.ruler .tickMinor {
    margin-left: 4px;
    width: 1px;
    height: 4px;
}