This example is a more complex example, featuring nested boxes and advanced box properties (margin and padding).
Click on the screenshot below to test this example in your web browser.
<?php
/**************************************************************************
* Copyright (C) 2006 by Pierre Hebert *
* http://things.1000wallpapers.com/diable/ *
***************************************************************************/
require "diable.php";
// the banner has a fixed height but can grow horizontally
$banner=new DivLayout("banner", SZ_MIN_EXPANDING, SZ_MIN);
// the menu is defined as a vertical group of two boxes with a constant width, and expanding height
$menu=new VerticalLayout(SZ_MIN, SZ_MIN_EXPANDING);
$menu->add(new DivLayout("menu", 150, SZ_MIN_EXPANDING));
$menu->add(new DivLayout("menu_tools", 150, 50));
// this is the middle part of our page, also the biggest since it is expanding horizontally and vertically
$menu_and_content=new HorizontalLayout(SZ_MIN_EXPANDING, SZ_MIN_EXPANDING);
$menu_and_content->add($menu);
$menu_and_content->add(new DivLayout("content", SZ_MIN_EXPANDING, SZ_MIN_EXPANDING));
// the copyright is defined as the banner
$copyright=new DivLayout("copyright", SZ_MIN_EXPANDING, SZ_MIN);
// finally group the banner, the main content and the copyright together
$all=new VerticalLayout(SZ_MIN_EXPANDING, SZ_MIN_EXPANDING);
$all->add($banner);
$all->add($menu_and_content);
$all->add($copyright);
$page=new PageLayout("my_page", $all);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Pierrox.net - Diable - example 06, a concrete example</title>
<style type="text/css">
body {
background-color: #c5c5eb;
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
div#my_page {
position:absolute;
top: 0px;
left: 0px;
width: 100%;
height:100%;
}
div#banner {
background-color: #7D7DFF;
text-align:center;
font-size: 24px;
}
div#menu {
background-color: #ffffff;
}
div#menu_tools {
background-color: #ffffff;
text-align: center;
}
div#content {
background-color: #ffffff;
}
div#copyright {
background-color: #7D7DFF;
text-align: center;
}
</style>
</head>
<body onLoad="my_page_layout();" onResize="my_page_layout()">
<!-- the definition of our working area : in this example the full window -->
<div id="my_page"></div>
<div id="banner" style="padding-top:15px; padding-bottom: 15px; border: solid 1px black;">
This is the title
</div>
<div id="menu" style="border: solid 1px blue; margin-top: 5px; margin-left: 5px;">
Menu
</div>
<div id="menu_tools" style="border: solid 1px blue; margin-top: 5px; margin-bottom: 5px; margin-left: 5px; padding: 2px;">
Put some menu tools here
</div>
<div id="content" style="border: solid 1px blue; margin: 5px; padding: 20px;">
Put some content here...
<div>
blablabla.
</div>
</div>
<div id="copyright" style="border: solid 1px black;">copyright 2006 Pierre Hebert</div>
<script type="text/javascript">
<?php
// output the layout script, and in particular a function called "my_page_layout"
$page->printLayout();
?>
</script>
</body>
</html>
The PHP script part is responsible for building the page layout. There is nothing really new about this, except that this time we use several
levels of grouping. The menu and menu_tools are first grouped together in a vertical layout, then this bigger box
is grouped horizontally with the content box, and finally the banner and copyright elements.
In this layout we used advanced box properties. For example the title is pushed away from its box borders with the use of padding and the menu
and content boxes are separated by a thin margin. Diable takes care of these parameters when it computes sizes and
positions, but remember that it is only possible when the CSS box properties are defined inline. This why we use a style block above for colors
and fonts, but use inline style for the margin and padding.