From d75fdae16abc73830ca045a2fc034bf8ce07b5df Mon Sep 17 00:00:00 2001
From: Max Horn <max@quendi.de>
Date: Mon, 13 Oct 2003 17:37:32 +0000
Subject: [PATCH] 'Why CSS?' episode 412: 'Doing more with less'. Less code,
 less HTML output, but more flexibility in the layout. Seperating content from
 design, yay :-)

svn path=/web/trunk/; revision=1482
---
 include/menu.php    | 31 ++++---------------
 include/sidebar.php |  1 -
 styles.css          | 72 +++++++++++++++++++++++++++++++++------------
 3 files changed, 60 insertions(+), 44 deletions(-)

diff --git a/include/menu.php b/include/menu.php
index 369e2d50..c35b75bb 100644
--- a/include/menu.php
+++ b/include/menu.php
@@ -10,44 +10,25 @@ class htmlmenu {
 
     function htmlmenu($name)
     {
-		global $file_root;
-	
-		echo "<table width=120 border=0 cellspacing=0 cellpadding=0>\n";
-		echo "<tr>\n";
-		echo "	<td class=topMenu><span class=menuTitle>&nbsp;$name</span></td>\n";
-		echo "	<td align=right valign=top class=topMenu><img src='".$file_root."/images/main_right_top.gif' alt='---'></td>\n";
-		echo " </tr>\n";
-		echo "</table>\n";
-		echo  "<table width=120 border=0 cellspacing=0 cellpadding=2>\n";
-		echo "<tr>\n";
-		echo "	<td class=sideMenu><img src='".$file_root."/images/blank.gif' height=5 width=1 alt='---'></td>\n";
-		echo "</tr>\n"; 
+		echo "<div class='sideMenu'>";
+		echo "<div class='header'><div class='headerRight'>".$name."</div></div>";
     }
 
     /* add a table row */
     function add($name, $url = null)
     {
-    	echo "<tr><td class=sideMenu><span class=menuItem>&nbsp;";
+		echo '<div class="item">';
 		if($url) {
-			echo "<a href='$url' class=menuItem>$name</a>";
+			echo "<a href='$url'>$name</a>";
 		} else {
 			echo "$name";
 		}
-		echo "</span></td></tr>\n";
+		echo "</div>\n";
     }
 
     function done($extra = "")
     {
-		global $file_root;
-	
-		echo "</table>\n";
-		echo "<table width=120 border=0 cellspacing=0 cellpadding=0>\n";
-		echo "<tr>\n";
-		echo "	<td align=right class=sideMenu><img src='".$file_root."/images/main_right_bottom.gif' alt='---'></td>\n";
-		echo "</tr>\n";
-		echo "</table>";
-		echo $extra;
-		echo "<br>\n";
+    	echo "<div class='footer'><div class='footerRight'>&nbsp;</div></div></div><br>\n";
     }
 }
 ?>
diff --git a/include/sidebar.php b/include/sidebar.php
index 51c97540..fb0867cf 100644
--- a/include/sidebar.php
+++ b/include/sidebar.php
@@ -44,7 +44,6 @@ function sidebar_start ($specs_mode = false)
 
 	$g->done();
 
-
 	$g = new htmlmenu("SourceForge Menu");
 
 	$g->add("Project Home", "http://sourceforge.net/projects/scummvm/");
diff --git a/styles.css b/styles.css
index 842afee6..a95f8688 100644
--- a/styles.css
+++ b/styles.css
@@ -1,27 +1,30 @@
 /* Body Document Defaults */
-BODY 		{ background-color: #6699CC; color: #000000; margin: 0px; }
+body {
+	background-color: #6699CC;
+	margin: 0px;
+}
+
+p, body, td, h2, h3, h4, h5, h6 {
+	color: #000000;
+	font-family: Arial, Helvetica, sans-serif;
+	font-size: 10pt;
+}
+
+/* General stuff */
+H1			{ font-size: 12pt; }
+PRE			{ font-family: Lucida Console, monospace; font-size: 10pt; }
+SMALL		{ font-size: 8pt; }
 
 /* Link Colors */
-A		{ color: #A50D0D; }
-A:hover		{ color: #FF6666; }
-A:active	{ color: #FF0000; }
-
-/* General Colors */
-OL,UL,P,BODY	{ font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
-TD,TR,TH,FORM	{ font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
-H1		{ font-family: Arial, Helvetica, sans-serif; font-size: 12pt; }
-H2		{ font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
-H3,H4,H5,H6	{ font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
-INPUT		{ font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
-T1			{ font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
-PRE			{ font-family: Lucida Console, monospace; font-size: 10pt; }
-SMALL		{ font-family: Arial, Helvetica, sans-serif; font-size: 8pt; }
+a			{ color: #A50D0D; }
+a:hover		{ color: #FF6666; }
+a:active	{ color: #FF0000; }
 
 /* no borders for images */
 img { border: 0px; }
 
 /* draw a line below the h1/h2/h3 elements */
-h1,h2		{
+h1, h2		{
 	background-image: url(images/grey_pixel.gif);
 	background-repeat: repeat-x;
 	background-position: left bottom;
@@ -63,10 +66,43 @@ h1,h2		{
 .menuTitle	{ font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: #ffffff; font-weight: bold; }
 .menuItem 	{ font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: #ffffff; }
 .topMenu	{ background-color: #73106b; background-image: url('images/topmenu_bg.png'); }
-.sideMenu	{ background-color: #52208b; background-image: url('images/sidebar_bg.png'); }
+
+/* Side menus */
+.sideMenu {
+	color: white;
+	background-color: #52208b;
+	background-image: url('images/sidebar_bg.png');
+	width: 120px;
+	text-align: left;
+}
+.sideMenu a { color: white; }
+.sideMenu .header {
+	background-image: url('images/topmenu_bg.png');
+	font-size: 8pt;
+	font-weight: bold;
+	padding-left: 0.5ex;
+	margin-bottom: 8px;
+}
+.sideMenu .headerRight	{
+	background-image: url('images/main_right_top.gif');
+	background-repeat: no-repeat;
+	background-position: right top;
+}
+.sideMenu .item			{
+	font-size: 10pt;
+	padding: 2px 2px 2px 0.5ex;
+}
+.sideMenu .footer		{
+	padding-left: 0.5ex;
+	height: 13px;
+}
+.sideMenu .footerRight	{
+	background-image: url('images/main_right_bottom.gif');
+	background-repeat: no-repeat;
+	background-position: right bottom;
+}
 
 /* Misc */
-.small		{ font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: #ffffff; }
 TD.label	{ font-weight: bold }
 
 /* Copyright */