This example introduces the vertical layout. The corresponding VerticalLayout PHP class allows grouping several boxes in a larger box, where all "sub boxes" are disposed on a single vertical line, from top to bottom.
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";
// create a new box linked to the div element called "first_box", that can expand horizontally and vertically
$first_box=new DivLayout("first_box", SZ_MIN_EXPANDING, SZ_MIN_EXPANDING);
// create a new box linked to the div element called "second_box", that can expand horizontally and vertically
$second_box=new DivLayout("second_box", SZ_MIN_EXPANDING, SZ_MIN_EXPANDING);
// create a new box linked to the div element called "third_box", that can expand horizontally and vertically
$third_box=new DivLayout("third_box", SZ_MIN_EXPANDING, SZ_MIN_EXPANDING);
// create an horizontal box grouping vertically the boxes first, third and second, in that order
$vertical_box=new VerticalLayout(SZ_MIN_EXPANDING, SZ_MIN_EXPANDING);
$vertical_box->add($first_box);
$vertical_box->add($third_box);
$vertical_box->add($second_box);
// define the page as contained in the div element "content", and composed of the box created just above
$page=new PageLayout("content", $vertical_box);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Pierrox.net - Diable - example 03, three vertical boxes</title>
</head>
<body onLoad="content_layout();" onResize="content_layout()" style="height: 100%; width: 100%; padding:0px; margin:0px;">
<!-- the definition of our working area : in this example the full window -->
<div id="content" style="position:absolute; top: 0px; left: 0px; width: 100%; height:100%;"></div>
<!-- our first box -->
<div id="first_box" style="border: solid 5px blue;">first box</div>
<!-- our second box -->
<div id="second_box" style="border: solid 5px red;">second box</div>
<!-- our third box -->
<div id="third_box" style="border: solid 5px green;">third box</div>
<script type="text/javascript">
<?php
// output the layout script, and in particular a function called "content_layout"
$page->printLayout();
?>
</script>
</body>
</html>
This example is very similar to the previous example (02 - two horizontal boxes). It also clearly shows an interesting thing : the boxes are displayed according to our rules, and not in the order in which the div element are declared in the HTML page. The div element "third_box" is displayed between the "first_box" and "second_box" div, whereas it is the last div declared.