CHouseLive

The Power Of Unordered Lists

A fun demonstration to display what can be accomplished with a simple unordered list and CSS.

keyboard

The concept is simple, using css and a set of unordered lists we are going create a qwerty keyboard.


Getting to grips with the keyboard layout

Before we can begin with the HTML and CSS we need to do a little forward planning and that means analysing the keyboard.

We will start with a picture of a basic QWERTY keyboard.

keyboard-580.png

A careful look at the above keyboard reveals that it is made of several section as the images below display.

All the sections of the keyboard is placed on a single background. We will make this background a dark grey, as this will make a strong contrast between the background and the white keys.

function.jpg

The function keys lie in a horizontal line at the top of the top of the key board. Each key is of an equal width and height. The keys are grouped into sections, each section divided by an equal gap.

lights.jpg

At the top of the right hand corner there are three labelled lights. This section is on the same horizontal line as the function keys.

letters.jpg

The main section of the keyboard, comprising of letters, numbers and various editing keys is on the left hand side of the the keyboard. It forms a large block made up of keys of varying sizes, although the bulk of these keys are the same size as the function keys.

navigation-keys.jpg

In the centre of the keyboard we have the navigation keys which are made up of two sections the top which will be referred to as the navigate section and the bottom which we will call the arrows section.

numeric-keys.jpg

The final section of the keyboard is the numeric keypad which is found in the bottom right hand corner. While most of the keys are the small standard size found on the rest of the key board there are two keys which are longer (enter and add) and the zero key which is wider.

HTML

Now that we have an idea of what we need to build, we can consider the HTML. As has already been mentioned, we are going to use unordered lists for the structure of this keyboard.

Each section of the keyboard will be made using an unordered list which will be given a unique class name. This will allow us to style the sections according to the needs of a keyboard layout.

Sections where all the keys are of equal height and width need only a single class to be assigned to the main <ul>. However, sections where the keys are of differing height or widths, classes will be assigned to each list item.

<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>

As you can see all the sections are enclosed in a div with the class "keyboard".

CSS

Now that we have built the structure, all that remains is to style the keyboard using CSS.

A light grey border is used around each unordered list to create the boundaries between each section. All the unordered lists have been floated to force the lists to stack horizontally, while margins are used to create spaces between each section.

Within each section, individual list items have also been floated and margins again have been used to create spacing between each key. A white background has been assigned to each key with the only variations being added is the height and width of keys.

CSS3 enhancements for supporting browsers, like rounded corners and box shadows have been applied to add a finishing touch.

.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 end result is pleasing. Using HTML and CSS, we have turned an unordered list into a QWERTY keyboard!

0 comments:

Post a Comment

Copyright CHouseLive - 2010 - All Rights Reserved