Jump to content

Virtual keyboard layout with div's.

paddyhaig

By paddyhaig
in CSS Help

 Share

Recommended Posts

paddyhaig Member

paddyhaig

Posted
Posted

I have made something of a virtual QWERTY keyboard using css. I just have a problem with the SPACE bar. Can someone help me place and align the bar in the middle if the keyboard container, or maybe at least give me a pointer on how I may do it? I have tried all kinds of things and believe it can be done. I don't really want to float another div over the top if possible with a different z-index if I can contain the space bar div inside the container div with the rest of the keys that would be great. Here is the code so far:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Virtual Keyboard</title>
<style type="text/css">
<!--
#keyboard
{
position:absolute;
width:686px;
height:310px;
z-index:1;
left:50%;
top:10px;
margin-left:-343px;
border:solid white 1px;
color: #FFF;
/*	background-color:<?php echo $container_background_color ?>; */
background-color:#CCC;
/* for IE */
  filter:alpha(opacity=85);
/* CSS3 standard */
  opacity:0.89;
}
#keyboard a
{
float:left;
display:block;
height:50px;
width:51px;
z-index:2;
margin-left:4px;
margin-top:4px;
text-align:center;
line-height:50px;
border:solid black 1px;
font-weight: bolder;
color: #FFF;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
cursor: auto;
background-color:#999;
/* for IE */
  filter:alpha(opacity=90);
/* CSS3 standard */
  opacity:0.9;
}
#apDiv1 {
position:relative;
    left:5px;
top:5px;
width:568px;
height:50px;
z-index:3;
background-color:#999;
}
-->
</style>
</head>
<body>
<div id="apDiv1">Space</div>
<div id="keyboard">
  <a href="concierge_setup.php">@</a>
  <a href="accommodation.php">1</a><a href="concierge_setup.php">2</a>
  <a href="staff_management.php">3</a><a href="concierge_setup.php">4</a>
  <a href="staff_management.php">5</a><a href="concierge_setup.php">6</a>
  <a href="staff_management.php">7</a>
  <a href="check-in-out_index.php">8</a>
  <a href="accommodation.php">9</a>
    <a href="concierge_setup.php">0</a><a href="check-in-out_index.php">$</a>
  <a href="concierge_setup.php">Tab</a><a href="accommodation.php">Q</a><a href="concierge_setup.php">W</a><a href="check-in-out_index.php">E</a>
  <a href="accommodation.php">R</a>
    <a href="concierge_setup.php">T</a>
  <a href="staff_management.php">Y</a>
  <a href="check-in-out_index.php">U</a>
  <a href="accommodation.php">I</a>
    <a href="concierge_setup.php">O</a>
  <a href="staff_management.php">P</a><a href="accommodation.php">Back</a>
    <a href="concierge_setup.php">Close</a>
  <a href="staff_management.php">A</a>
  <a href="check-in-out_index.php">S</a>
  <a href="accommodation.php">D</a>
    <a href="concierge_setup.php">F</a>
  <a href="staff_management.php">G</a>
  <a href="check-in-out_index.php">H</a>
  <a href="accommodation.php">J         </a>
    <a href="concierge_setup.php">K</a>
  <a href="staff_management.php">L</a>
  <a href="check-in-out_index.php">:</a>
  <a href="accommodation.php">Enter</a>
    <a href="concierge_setup.php">Down</a>
  <a href="staff_management.php">Z</a>
  <a href="check-in-out_index.php">X</a>
  <a href="accommodation.php">C</a>
      <a href="concierge_setup.php">V</a>
  <a href="staff_management.php">B</a>
  <a href="check-in-out_index.php">N</a>
  <a href="accommodation.php">M</a>
      <a href="concierge_setup.php">,</a>
  <a href="staff_management.php">.</a>
  <a href="check-in-out_index.php">?</a>
<a href="accommodation.php">Up</a>
</div>
</body>
</html>

Link to comment
Share on other sites
paddyhaig Member

paddyhaig

Posted
  • Author
Posted

Certainly. As you can see the space bar is totally in the wrong place. I would also like it to say 'SPACE' on the middle of the bar in the same font and color as the buttons. Any ideas and feedback greatly appreciated. I have yet to make the key's active, I guess that might be a java script thing.

 

keyboard.jpg

Link to comment
Share on other sites
paddyhaig Member

paddyhaig

Posted
  • Author
Posted

Mmmmm, didn't seem to work out so well. It seems like the spacebar has inherited the settings from the above buttons and wont resize.

 

My present html and css:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Virtual Keyboard</title>
<style type="text/css">
<!--
#space_bar {
position:relative;
    left:2px;
top:2px;
width:566px;
left:50%;
margin-left:-283px;
height:50px;
z-index:2;
text-align:center;
line-height:50px;
border:solid black 1px;
font-weight: bolder;
color: #FFF;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
background-color:#999;
/* for IE */
    filter:alpha(opacity=90);
/* CSS3 standard */
    opacity:0.9;
}
#keyboard
{
position:absolute;
width:686px;
height:290px;
z-index:1;
left:50%;
top:10px;
margin-left:-343px;
border:solid white 1px;
color: #FFF;
background-color:#CCC;
/* for IE */
    filter:alpha(opacity=85);
/* CSS3 standard */
    opacity:0.89;
}
#keyboard a
{
float:left;
display:block;
height:50px;
width:51px;
z-index:2;
margin-left:4px;
margin-top:4px;
text-align:center;
line-height:50px;
border:solid black 1px;
font-weight: bolder;
color: #FFF;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
background-color:#999;
/* for IE */
    filter:alpha(opacity=90);
/* CSS3 standard */
    opacity:0.9;
}
-->
</style>
</head>

<body>
<div id="keyboard">
  <a href="@">@</a>
  <a href="1">1</a>
  <a href="2">2</a>
  <a href="3">3</a>
  <a href="4">4</a>
  <a href="5">5</a>
  <a href="6">6</a>
  <a href="7">7</a>
  <a href="8">8</a>
  <a href="9">9</a>
  <a href="0">0</a>
  <a href="$">$</a>
  <a href="Tab">Tab</a>
  <a href="Q">Q</a>
  <a href="W">W</a>
  <a href="E">E</a>
  <a href="R">R</a>
  <a href="T">T</a>
  <a href="Y">Y</a>
  <a href="U">U</a>
  <a href="I">I</a>
  <a href="O">O</a>
  <a href="P">P</a>
  <a href="Back">Back</a>
  <a href="Close">Close</a>
  <a href="A">A</a>
  <a href="S">S</a>
  <a href="D">D</a>
  <a href="F">F</a>
  <a href="G">G</a>
  <a href="H">H</a>
  <a href="J">J</a>
  <a href="K">K</a>
  <a href="L">L</a>
  <a href=":">:</a>
  <a href="Enter">Enter</a>
  <a href="Down">Down</a>
  <a href="Z">Z</a>
  <a href="X">X</a>
  <a href="C">C</a>
  <a href="V">V</a>
  <a href="B">B</a>
  <a href="N">N</a>
  <a href="M">M</a>
  <a href=",">,</a>
  <a href=".">.</a>
  <a href="?">?</a>
  <a href="Up">Up</a>
<a href="#" id="space_bar">Spacebar</a>
</div>

</body>
</html>

 

A graphic of how it looks presently:

keyboard1.jpg

Link to comment
Share on other sites
Zane Prolific Member

Zane

Posted
Posted

you shouldn't have to make an entirely new list of attributes for the spacebar like you're doing.  The only difference between the spacebar and the rest of the anchor links is its width.  I assume you want the spacebar to be 100% of the keyboard...  with the padding and such too?

 

something like this should work just fine

#keyboard a
{
   float:left;
   display:block;
   height:50px;
   width:51px;
   z-index:2;
   margin-left:4px;
   margin-top:4px;
   text-align:center;
   line-height:50px;
   border:solid black 1px;
   font-weight: bolder;
   color: #FFF;
   text-decoration: none;
   font-family: Arial, Helvetica, sans-serif;
   font-size: large;
   background-color:#999;
   /* for IE */
    filter:alpha(opacity=90);
   /* CSS3 standard */
    opacity:0.9;
}
#keyboard a#spacebar {
     width: 100%;
}

 

and if 100% width doesn't work, do the math and figure out the exact pixels.

Link to comment
Share on other sites
paddyhaig Member

paddyhaig

Posted
  • Author
Posted

Brilliant, I was thinkin, I could take it a whole lot further with rounded edges, drop shadows, and different color borders when the keys are pressed. But for now I need to find the Java script that will make it work on a web form. Thanks for the help everyone involved. If you have any idea's please let me know.

Link to comment
Share on other sites
paddyhaig Member

paddyhaig

Posted
  • Author
Posted

Ok, I just thought I would post the finished product, in case anyone needs at itt is at present a visual only, virtual keyboard using css div's for key's.

Again if someone wants to round the corners off on the buttons and the backdrop and create drop shadows for the keys and highlight the keys in red when pressed, that would be totally cool. I am now looking for a way that the keyboard can be used via Java script to print to form fields as in a kiosk type environment. The whole thing sitting in a single web page. That is, the form and the virtual keyboard. ANy and all ideas greatly appreciated. Please see below.

 

Here's what it looks like:

keyboard2.jpg

 

Here's the code so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Virtual Keyboard</title>
<style type="text/css">
<!--
#keyboard
{
position:absolute;
width:688px;
height:284px;
z-index:1;
left:50%;
top:10px;
margin-left:-343px;
border:solid black 1px;
color: #FFF;
background-color:#CCC;
/* for IE */
    filter:alpha(opacity=85);
/* CSS3 standard */
    opacity:0.89;
}
#keyboard a
{
   float:left;
   display:block;
   height:50px;
   width:51px;
   z-index:2;
   margin-left:4px;
   margin-top:4px;
   text-align:center;
   line-height:50px;
   border:solid black 1px;
   font-weight: bolder;
   color: #FFF;
   text-decoration: none;
   font-family: Arial, Helvetica, sans-serif;
   font-size: large;
   background-color:#999;
   /* for IE */
    filter:alpha(opacity=90);
   /* CSS3 standard */
    opacity:0.9;
}
#keyboard a#spacebar {
     width: 678px;
}
-->
</style>
</head>
<body>
<div id="keyboard">
  <a href="@">@</a>
  <a href="1">1</a>
  <a href="2">2</a>
  <a href="3">3</a>
  <a href="4">4</a>
  <a href="5">5</a>
  <a href="6">6</a>
  <a href="7">7</a>
  <a href="8">8</a>
  <a href="9">9</a>
  <a href="0">0</a>
  <a href="$">$</a>
  <a href="Tab">Tab</a>
  <a href="Q">Q</a>
  <a href="W">W</a>
  <a href="E">E</a>
  <a href="R">R</a>
  <a href="T">T</a>
  <a href="Y">Y</a>
  <a href="U">U</a>
  <a href="I">I</a>
  <a href="O">O</a>
  <a href="P">P</a>
  <a href="Back">Back</a>
  <a href="Close">Close</a>
  <a href="A">A</a>
  <a href="S">S</a>
  <a href="D">D</a>
  <a href="F">F</a>
  <a href="G">G</a>
  <a href="H">H</a>
  <a href="J">J</a>
  <a href="K">K</a>
  <a href="L">L</a>
  <a href=":">:</a>
  <a href="Enter">Enter</a>
  <a href="Down">Down</a>
  <a href="Z">Z</a>
  <a href="X">X</a>
  <a href="C">C</a>
  <a href="V">V</a>
  <a href="B">B</a>
  <a href="N">N</a>
  <a href="M">M</a>
  <a href=",">,</a>
  <a href=".">.</a>
  <a href="?">?</a>
  <a href="Up">Up</a>
<a href="space" id="spacebar">Space</a>
</div>
</body>
</html>

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.