Website Development Resources
CHouseLive

<div class="keyboard">
  <ul class="function">
    <li>Esc</li>
  </ul>

  <ul class="function">
    <li>F1</li>
    <li>F2</li>
    <li>F3</li>
    <li>F4</li>
  </ul>

  <ul class="function">
    <li>F5</li>
    <li>F6</li>
    <li>F7</li>
    <li>F8</li>
  </ul>

  <ul class="function">
    <li>F9</li>
    <li>F10</li>
    <li>F11</li>
    <li>F12</li>
  </ul>

  <ul class="function small-font">
    <li>Print<br />Screen</li>
    <li>Scroll<br />Lock</li>
    <li>Pause<br />Break</li>
  </ul>

  <ul class="lights">
    <li><p>Num<br />Lock</p></li>
    <li><p>Caps<br />Lock</p></li>
    <li><p>Scroll<br />Lock</p></li>
  </ul>

  <ul class="letters">
    <li class="small">~<br />`</li>
    <li class="small">!<br />1</li>
    <li class="small">@<br />2</li>
    <li class="small">#<br />3</li>
    <li class="small">$<br />4</li>
    <li class="small">%<br />5</li>
    <li class="small">^<br />6</li>
    <li class="small">&amp;<br />7</li>
    <li class="small">*<br />8</li>
    <li class="small">(<br />9</li>
    <li class="small">)<br />0</li>
    <li class="small">_<br />-</li>
    <li class="small"> <br />=</li>
    <li class="backspace">Back<br />space</li>

    <li class="medium">Tab</li>
    <li class="small">Q</li>
    <li class="small">W</li>
    <li class="small">E</li>
    <li class="small">R</li>
    <li class="small">T</li>
    <li class="small">Y</li>
    <li class="small">U</li>
    <li class="small">I</li>
    <li class="small">O</li>
    <li class="small">P</li>
    <li class="small">{<br />[</li>
    <li class="small">}<br />]</li>
    <li class="medium">|<br />\</li>

    <li class="caps">CapsLK</li>
    <li class="small">A</li>
    <li class="small">S</li>
    <li class="small">D</li>
    <li class="small">F</li>
    <li class="small">G</li>
    <li class="small">H</li>
    <li class="small">J</li>
    <li class="small">K</li>
    <li class="small">L</li>
    <li class="small">:<br />;</li>
    <li class="small">"<br />'</li>
    <li class="enter">Enter</li>

    <li class="shift">Shift</li>
    <li class="small">Z</li>
    <li class="small">X</li>
    <li class="small">C</li>
    <li class="small">V</li>
    <li class="small">B</li>
    <li class="small">N</li>
    <li class="small">M</li>
    <li class="small">&lt;<br />,</li>
    <li class="small">&gt;<br />.</li>
    <li class="small">?<br />/</li>
    <li class="shift">Shift</li>

    <li class="medium">Ctrl</li>
    <li class="medium"><img src="../images/logo-windows.gif" width="25" height="25" alt="windows" /></li>
    <li class="medium">Alt</li>
    <li class="spacebar">SpaceBar</li>
    <li class="medium">Alt</li>
    <li class="medium"><img src="../images/logo-windows.gif" width="25" height="25" alt="windows" /></li>
    <li class="medium">Menu</li>
    <li class="medium">Ctrl</li>
  </ul>

  <div class="navigation">
    <ul class="navigate  small-font">
      <li>Insert</li>
      <li>Home</li>
      <li>Page<br />Up</li>
      <li>Del</li>
      <li>End</li>
      <li>Page<br />Down</li>
    </ul>

    <ul class="arrows">
      <li class="arrow-up">&uarr;</li>
      <li class="arrow-normal">&larr;</li>
      <li class="arrow-normal">&darr;</li>
      <li class="arrow-normal">&rarr;</li>
    </ul>
  </div>

  <ul class="numeric">
    <li class="small height-single">-</li>
    <li class="small height-single">*</li>
    <li class="small height-single">/</li>
    <li class="small height-single small-font">Num Lock</li>
    <li class="small height-double">+</li>
    <li class="small height-single">9<br /><span class="small-font">PgUp</span></li>
    <li class="small height-single">8<br />&uarr;</li>
    <li class="small height-single">7<br /><span class="small-font">Home</span></li>
    <li class="small height-single">6<br />&rarr;</li>
    <li class="small height-single">5</li>
    <li class="small height-single">4<br />&larr;</li>
    <li class="small small-font height-double">Enter</li>
    <li class="small height-single">3<br /><span class="small-font">PgDn</span></li>
    <li class="small height-single">2<br />&darr;</li>
    <li class="small height-single">1<br /><span class="small-font">End</span></li>
    <li class="small height-single">.<br /><span class="small-font">Del</span></li>
    <li class="height-single backspace">0<br /><span class="small-font">Ins</span></li>
  </ul>
</div>

.keyboard{
  font-family: Tahoma, Arial, sans-serif;
  background: #666666;
  height: 276px;
  width: 895px;
  margin: 0 auto;
  padding: 10px;
  font-size: 14px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.function,
.lights,
.letters,
.navigate,
.arrows,
.navigation,
.numeric{
  float: left;
  display: inline;
  padding: 0;
  list-style: none;
}

.function,
.lights{
  margin: 0 0 30px 0;
}

.navigate{
  margin: 0 0 38px 0;
}

.letters,
.arrows,
.navigation,
.numeric{
  margin: 0;
}

.function,
.lights,
.letters,
.navigate,
.arrows,
.numeric{
  border: #EFEFEF 1px solid;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.function,
.letters,
.navigation{
  margin-right:23px;
}

.letters{
  width: 568px;
}

.navigation{
  width: 117px;
}

.numeric{
  width: 152px;
}

.function li,
.lights li,
.small,
.backspace,
.medium,
.caps,
.enter,
.shift,
.spacebar,
.navigate li,
.arrows li,
.numeric li{
  overflow: hidden;
  padding-left: 2px;
  display: inline;
  line-height: 1.1em;
}

.function li,
.small,
.backspace,
.medium,
.caps,
.enter,
.shift,
.spacebar,
.navigate li,
.arrows li,
.numeric li{
  background: #fff;
  color: #000;
}

.function li,
.lights li,
.small,
.backspace,
.medium,
.caps,
.enter,
.shift,
.spacebar,
.navigate li,
.arrows li{
  float: left;
}

.numeric li{
  float: right;
}

.function li,
.lights li,
.small,
.backspace,
.medium,
.caps,
.enter,
.shift,
.spacebar,
.navigate li,
.arrows li,
.height-single{
  height: 32px;
}

.height-double{
  height: 72px;
}

.function li,
.small,
.backspace,
.medium,
.caps,
.enter,
.shift,
.spacebar,
.navigate li,
.numeric li,
.arrow-normal{
  margin: 3px 2px;
}

.lights li{
  margin: 3px 9px;
}

.lights p{
  border-top: #00FF00 5px solid;
  margin: 0;
  padding: 3px 0 0 0;
  font-size: 9px;
  line-height: 1.1em;
  color: #fff;
  text-align: center;
}

.arrow-up{
  margin: 3px 40px;
}

.function li,
.small,
.backspace,
.medium,
.caps,
.enter,
.shift,
.spacebar,
.navigate li,
.arrows li,
.numeric li{
  border: 1px solid #333;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 1px 1px 2px #333;
  -webkit-box-shadow: 1px 1px 2px #333;
  box-shadow: 1px 1px 2px #333;
}

.small,
.function li,
.lights li,
.navigate li,
.arrows li{
  width: 30px;
}

.backspace{
  width: 66px;
}

.medium{
  width: 48px;
}

.caps{
  width: 60px;
}

.enter{
  width: 74px;
}

.shift{
  width: 86px;
}

.spacebar{
  width: 168px;
}

.small-font{
  font-size: 9px;
}

.keyboard img{
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  padding: 0;
  margin: 0;
}

The Power of Unordered Lists and CSS Keyboard files

If you have encountered a problem with this demonstration, or would like an amendment made to the referencing and attributions of the scripts and code used on this page, please send the CHouseLive team an email: cara_remove_@chouselive_remove_.org