Center stage [ GUI Lab ] - MXL Magazine Online

Home > Issue 008 > GUI Lab > Center stage

Center stage

New layers enable us to move away from tables and present our information in even more GUI focused ways. This quick tutorial shows how simple it is to create a layer which is dead centred and takes up half the width and height of the page no matter what size screen or browser the user has. And the code is small too.

First of all we are going to start a normal page and add some style declarations into the head using CSS:

<html>
<head>
<title>Centre Stage</title>
<style type="text/css">
BODY{
margin:0;
padding:0;
height:100%;
]
DIV{
top: 25%;
left:25%;
width:50%;
height:50%;
position:absolute;
]
TABLE{
width: 100%;
height: 100%;
border: #FFCC00 2px solid;
}
</style>
</head>

That will automatically format the tags for us so we don't have to worry about formatting them on the page.

<body>
<div>
<table>
<tr>
<td>
This takes up half the browsers width and height!
</td>
</tr>
</table>
</div>
</body>
</html>