|
|
|
This thread is locked; no one can reply to it.
|
| Strict XHTML/CSS Semantic Keypad Layout -- CSS Gurus, I Request Your Expertise |
|
bamccaig
Member #7,536
July 2006
 |
I'm attempting to design a keypad Web UI for a tablet PC using semantic XHTML and CSS. In other words, without "solecistic" tables. Something like this: {"name":"f960dde676570ed63ba34d0b23416466.png","src":"http:\/\/static.allegro.cc\/image\/cache\/f\/9\/f960dde676570ed63ba34d0b23416466.png","w":319,"h":258,"tn":"http:\/\/static.allegro.cc\/image\/cache\/f\/9\/f960dde676570ed63ba34d0b23416466"} So far, the XHTML I have looks like this (though I'm not convinced I'm doing it right for the two buttons on the right). The use of "inner" rows and the column class is particularly a hack that I just kind of tried to see if it would magically work. Pay little attention to it. 1<?xml version="1.0" encoding="utf-8"?>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4<html xmlns="http://www.w3.org/1999/xhtml">
5 <head>
6 <title>Kiosk</title>
7 <link rel="stylesheet" type="text/css"
8 href="theme/ui.all.css" />
9 <link rel="stylesheet" type="text/css"
10 href="style/kiosk.css" />
11 </head>
12 <body class="kiosk">
13 <div>
14 <div id="card_entry">
15 <div id="keypad">
16 <div class="keypad-row">
17 <span>1</span>
18 <span>2</span>
19 <span>3</span>
20 <span>Clear</span>
21 </div>
22 <div class="keypad-row">
23 <div class="keypad-column">
24 <div class="keypad-row">
25 <span>4</span>
26 <span>5</span>
27 <span>6</span>
28 </div>
29 <div class="keypad-row">
30 <span>7</span>
31 <span>8</span>
32 <span>9</span>
33 </div>
34 </div>
35 <div class="keypad-column">
36 <span>Enter</span>
37 </div>
38 </div>
39 <div class="keypad-row">
40 <span>0</span>
41 </div>
42 </div>
43 </div>
44 </div>
45 <script type="text/javascript"
46 src="script/jquery-1.4.1.min.js"></script>
47 <script type="text/javascript"
48 src="script/jquery-ui-1.7.custom.min.js"></script>
49 <script type="text/javascript"
50 src="script/kiosk.js"></script>
51 </body>
52</html>
The CSS I have is currently a mess, but looks like this: 1body.kiosk
2{
3 font-family: Verdana;
4 font-size: 2em;
5}
6
7body.kiosk > div
8{
9 margin-left: auto;
10 margin-right: auto;
11 text-align: center;
12}
13
14#card_entry
15{
16}
17
18#keypad
19{
20 color: #e0e0ff;
21 margin-bottom: auto;
22 margin-left: auto;
23 margin-right: auto;
24 margin-top: auto;
25 width: 70%;
26 vertical-align: middle;
27}
28
29.keypad-row
30{
31 height: 60px;
32 margin-bottom: 0.1em;
33 margin-left: 0.1em;
34 margin-right: 0.1em;
35 margin-top: 0.1em;
36}
37
38.keypad-row span
39{
40 background-color: #4040ff;
41 border: 3px solid black;
42 cursor: pointer;
43 height: 60px;
44 margin-bottom: 0.1em;
45 margin-left: 0.1em;
46 margin-right: 0.1em;
47 margin-top: 0.1em;
48 text-align: center;
49 width: 60px;
50}
51
52.keypad-column
53{
54 display: inline-block;
55}
I'm basically looking for CSS help for aligning elements in weird ways, like, for example, the way the "Enter" button "needs" to be larger and beside both the 456 and 789 rows. I remember seeing a Web page that had drawn a diagram similar to this, presumably explaining how to accomplish it with CSS, but I can't seem to find the right search terms to find it. Anybody know of such reading material or perhaps know of the best way to accomplish this with CSS? Also, I've tried various things to get the buttons' sizes right (though the sizing is based on the numeric keys, so it doesn't apply to the "Clear" or "Enter" keys yet), but nothing seems to work. They just size the default way browsers would size them... Can anybody spot what I'm doing wrong there? The actual layout is already done with messy tables, but since I'm now rewriting much of the code for this page (to make it more user-friendly and ensure it works correctly) I figured it would be a LOT easier to maintain if I could simplify the markup and styles. It would also be more correct, which I tend to strive for.[1] As an extra note, I want the actual layout to work without any JavaScript. JavaScript will be used to make the application function, but the appearance should be all markup and styling. This makes a page so much easier to maintain later (making the JavaScript cleaner, shorter, and easier to follow). References-- acc.js | al4anim - Allegro 4 Animation library | Allegro.cc Mockup | Allegro.cc <code> Tag | Allegro 4 Timer Example (w/ Semaphores) | Bambot | Blog | C++ STL Container Flowchart | Castopulence Software | Check Return Values | Is This A Discussion? Flow Chart | Filesystem Hierarchy Standard | Clean Code Talks - Global State and Singletons | How To Use Header Files | GNU/Linux (Debian, Fedora, Gentoo) | rot (rot13, rot47, rotN) |
|
Tobias Dammers
Member #2,604
August 2002
 |
I dunno, this looks very much like a grid layout, so personally, I'd ditch the usual "don't use tables for layout" adagium on this one. After all, you'll end up with one table, containing four rows and four columns, instead of the horribly convoluted 7-levels-of-meaningless-generic-containers mess you have now. Call your keys tabular data if you like. The alternative, as I see it, would be absolute positioning and sizing, which is fine by itself, but you'd lose auto-sizing cells (whether that's a good thing or not is up to you). --- |
|
|
