Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /customers/9/b/5/fun-tech.se/httpd.www/php_tutorial/class.page.php on line 130 OOP php5 HOWTO - CSS navigation box

The php5 object oriented web design howto - CSS navigation box

A navigation box

In order for CSS to understand the page, we must tell him a little about the data. We need to tell what is body and what is navigation, and to do this we can use the div tag.

So let's add a div tag that will surround the body data, and one for the navigation.

Filename: class.page.php

<?php
class page
{
    function __construct($title)
    {
        print "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">\n";
        print "<html>\n";
        print "<head>\n";
        print "  <title>".$title."</title>\n";
        print "  <link rel=\"stylesheet\" title=\"std\" ".  
              "        media=\"screen\" href=\"screen.css\" type=\"text/css\">\n";
        print "  <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n";
        print "</head>\n";
        print "<body>\n";

        print "<div id=\"body_data\">\n";
        print "<!-- --------------------------- -->\n";
    }

    function __destruct()
    {
        print "<!-- --------------------------- -->\n";
        //end body_data
        print "</div>\n";

        print "<div id=\"navigation_data\">\n";
        print "  <a href=\"first.php\">The first page</a><br>\n";
        print "  <a href=\"second.php\">The second page</a><br>\n";
        print "</div>\n";

        print "</body>\n";
        print "</html>\n";
    }
}
?>

Then we tell css where to place the stuff, and here we can use absolute placement.

Filename: screen.css

body {
    background: #000000;
    color:      #FFBF00;
}

#body_data {
    position: absolute;
    top:    50px;
    left:   20px;
}

#navigation_data {
    position: absolute;
    top:    10px;
    left:   20px;
}

Notice that the navigation now is above the page data, and that we still have not changed anything else.

Filename: first.php

<?php
require_once("class.page.php");
$page = new page("My first page...");
?>

<h1>Hello</h1>
<p>What a nice little page</p>


Filename: second.php

<?php
require_once("class.page.php");
$page = new page("And the second page...");
?>

<h1>Hello again.</h1>
<p>Just another page.</p>


Of course this is only a very basic css example, and there is a lot of css tutorials out there so at this point it is time to start experiment and actually use some other colors...

There is a nice project called "Any Browser Campaign", they have done a nice basic design guide if you wish to have high accessibility on your page.

Good luck.