ScummVM/scummvm-web
1
0
Fork 0
mirror of https://github.com/scummvm/scummvm-web.git synced 2026-06-20 05:45:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

'Why CSS?' episode 412: 'Doing more with less'. Less code, less HTML output, but more flexibility in the layout. Seperating content from design, yay :-)

Browse Source 
svn path=/web/trunk/; revision=1482
This commit is contained in:
Max Horn
2003-10-13 17:37:32 +00:00
parent cf1b7429cc
commit d75fdae16a
3 changed files with 60 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
include/menu.php
+6 -25
View File
@@ -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";
}
}
?>
include/sidebar.php
-1
View File
@@ -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/");
styles.css
+54 -18
View File
@@ -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 */