HTML Magic Edges - The Basics
(Page 2 of 4 )
I use XHTML norms for the design. The basic XHTML page in our project is:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body">
</body>
</html>
The above code has the following elements: XML, DOCTYPE, HTML, HEAD and BODY.
Before we start designing according to the user’s requirements, we should learn some basics. Specifically, we shall learn how to make a DIV element move inside another DIV element. Our inner DIV element has components of a calculator. We use the calculator as an example. This is the CSS and HTML layout of the calculator:
<style type="text/css">
body {background-color:#ff9933}
div#Cont {width:209px; height:200px; overflow:hidden; background-color:transparent; border:2px solid blue; padding:0px; margin:0px}
div#Calc {position:relative; width:205px; height:196px; background-color:brown; border:2px solid brown; padding:0px; margin:0px}
input#CI1 {margin:3px; width:195px; text-align:right}
button.CalcBut {width:40px; height:40px; padding:0px; margin:0px}
</style>
<div id="Cont">
<div id="Calc" style="left:-205px;">
<input type="text" id="CI1" readonly><br />
<button type="button" class="CalcBut" id="B7">7</button><button type="button" class="CalcBut" id="B8">8</button><button type="button" class="CalcBut" id="B9">9</button><button type="button" class="CalcBut" id="BD"">/</button><button type="button" class="CalcBut" id="BMM">C</button><br />
<button type="button" class="CalcBut" id="B4">4</button><button type="button" class="CalcBut" id="B5">5</button><button type="button" class="CalcBut" id="B6">6</button><button type="button" class="CalcBut" id="BX">X</button><button type="button" class="CalcBut" id="BRM">RM</button><br />
<button type="button" class="CalcBut" id="B1">1</button><button type="button" class="CalcBut" id="B2">2</button><button type="button" class="CalcBut" id="B3">3</button><button type="button" class="CalcBut" id="BMI">-</button><button type="button" class="CalcBut" id="BMP">M+</button><br />
<button type="button" class="CalcBut" id="B0">0</button><button type="button" class="CalcBut" id="BPM">+/-</button><button type="button" class="CalcBut" id="BPOINT">.</button><button type="button" class="CalcBut" id="BP">+</button><button type="button" class="CalcBut" id="BEQ">=</button>
</div>
</div>
There are two DIV elements. The outer one has the ID "Cont," meaning container. The inner one has the ID "Calc," meaning calculator. You can see the components of the inner one. The components are made up of an Input Text Control and buttons. There are line break elements that keep the components in rows. These two DIV elements have to be in the BODY element of your web page. The style sheet is normally in the HEAD element of your page.
Next: Operation >>
More HTML Articles
More By Chrysanthus Forcha
