PAB ( Programming a Baby ).
CSS.
Object Position.
the Z factor.
Hi again (i think)
Are you prepared for a new Css Lesson? (yeahhhh ;) )
Remember one of my last Articles ? Programming.a.baby - (Css) My first Css Doc ,
in that article i already explained you how to build a Css Class and Css IDs
With those Classes and IDs you were able to give some colors to each element it self and it's border and also background, formatting text...etc
In this Article i will explain you how to give positions to all objects, images, divs, tables...etc inside the Html Body Tag
Before you start learnig how to give positions to a html element, there is something that you need to learn.
The X, the Y and the Z factor (Whats this?!)
Well, if you already study some math you will know at least the X and the Y, they give position to an object relating it with the Top and Left margins of a square or other container.
In Css the terms are:
All positions start at ZERO (0)
Take a look on the image 1:
You know how I'm, no bla bla blas, get hands at work now
OK, first we create some simple Html page with, for example a Table and with it an ID name "table1"
Do not forget to go to the Head of the document and LINK to the CSS doc that if you do not have already, you will create one in a few moments,
or the Web Browser won't know were to get the style properties for your web page
Take a look on the Sample 1 - Html Code:
<html>
<head>
<title>My Title</title>
<link href="design.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table id="table1">
<tr>
<td>Table Text1</td>
<td>Table Text2</td>
</tr>
</table>
</body>
</html>
Take a notepad text document and rename it to "design.css" and put it in the same folder or place as your Html document
See the Sample 2.1 - Css code
And see also Image 2 for the Result in a web page
#table1 {
position:absolute;
left:200px;
top:100px;
z-index:10;
}
Now supose you want to give some extra style, for example to the tables border style
You can do this in two ways:
#table1 {
position:absolute;
left:200px;
top:100px;
z-index:10;
border:1px red solid;
}
.mc {
border:1px red solid;
}
#table1 {
position:absolute;
left:200px;
top:100px;
z-index:10;
}
Take a look on the image 3 to see you border
Note that you are only seing the Table border, not the cells border "td", if you want to see the cells border you can do this in two distint ways
.mc {
}
#table1 {
position:absolute;
left:200px;
top:100px;
z-index:10;
font-size:30px;
border:1px red solid;
}
#table1 td {
border:1px red solid;
}
You can take a look on the image 4 where you see the table's cells border in red
Finally, since we gave the "TABLE1" ID element the "absolute" position property, you can now create other TABLES with the same properties and
play around with the [z-index] of each, also the potitions [top] and [left] to see which of these elements will become closer to your eyes.
This is the factor Z.