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
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.