Wed, 2009-07-08 15:33
Hello all.
I have been asked to produce a small web application that collects server stats, stores them in a database and has a web front end to interrogate the db and graph the results. Not knowing anything at all about how to do any of this means it has been a struggle ! I have tried to create a web front end that looks like a more like a simple application rather than a fancy web page . I have used a lot of absolute positioning which after reading here isn't so good ? , I only ended up using it because i couldn't get floats/relative positioning to work properly in both ie6 and firefox (couldnt get div boxes to line up in IE ), any constructive criticism/advice on how to do it better would be much appreciated.
Thank you.
PS it's very very rough around the edges!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"> <head> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="server_mon_style.css" /> <script src="JS.js" type="text/javascript"></script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <script src="http://********.com/general/banner/banner.js" type="text/javascript"></script><div id="container"><div id='banner'><h1> Server Monitoring Tool</h1></div><div id='nav'><p>Select Options</p><form method="post" action="/MAIN1.cgi" enctype="multipart/form-data"> <input type="button" tabindex="1" name="1. Select Graph Type" value="1. Select Graph Type" onclick="document.location = "MAIN1.cgi"" /><br /><br /><div></div></form><form method="post" action="/MAIN1.cgi" enctype="multipart/form-data"> <input type="button" tabindex="2" name="2. Select Servers" value="2. Select Servers" onclick="document.location = "MAIN2.cgi"" /><br /><br /><div></div></form><form method="post" action="/MAIN1.cgi" enctype="multipart/form-data"> <input type="button" tabindex="3" name="3. Select Parameters" value="3. Select Parameters" onclick="document.location = "MAIN3.cgi"" /><br /><br /><div></div></form><form method="post" action="/MAIN1.cgi" enctype="multipart/form-data"> <input type="button" tabindex="4" name="4. Select Graph Feature" value="4. Select Graph Feature" onclick="document.location = "MAIN4.cgi"" disabled="disabled" /><br /><br /><div></div></form><form method="post" action="/MAIN1.cgi" enctype="multipart/form-data"> <input type="button" tabindex="5" name="5. Draw Graph" value="5. Draw Graph" onclick="document.location = "MAIN5.cgi"" disabled="disabled" /><br /><br /><div></div></form><form method="post" action="/MAIN1.cgi" enctype="multipart/form-data"> <input type="button" tabindex="6" name="6. Display Data" value="6. Display Data" onclick="document.location = "MAIN6.cgi"" disabled="disabled" /><br /><br /><div></div></form></div><div id='history'><h2>Selected options</h2><span class='historytitle'>Selected Graph Type <span class='historyresult'>single </span>Selected Servers<span class='historyresult'>server1 server2 </span>Selected Parameters<span class='historyresult'> </span>Specific Parameters<span class='historyresult'></span></span></div><div id='content'>This is under the content div<h1>Select the graph type</h1><form method="post" action="MAIN2.cgi" enctype="multipart/form-data" onsubmit="return validate()" name="checkbox_form"> <label><input type="radio" name="oneormany" value="single" checked="checked" tabindex="7" />single</label><label><input type="radio" name="oneormany" value="many" tabindex="8" />many</label><p /><input type="submit" tabindex="9" name=".submit" /><div><input type="hidden" name=".cgifields" value="oneormany" /></div></form></div><div id='footer'>Footer stuff here</div></div> </body> </html> [code stylesheet [code] * {margin:0;padding:0} #body { margin: 0; padding: 0; color: #000; background-color: #8e8f27; } #footer { position:absolute; bottom:0px; background-color: #CCCCCC; /*padding: 5px;*/ text-align: center; width:100%; border-top: 1px solid #333; overflow: auto; } #content { padding-top: 10px; padding-bottom: 5px; padding-left: 30px; border: 1px solid #333; /*margin-left: 30px ;margin-right: 230px;*/ /*margin-left: 271px ;margin-right: 230px; width:auto;*/ position: absolute; left:261px; width:340px; overflow: auto; height:340px; /*background-color: #99CCCC;*/ } #nav { /*float: left;*/ width: 220px; position:absolute; left:30px; padding-top: 20px; padding-bottom: 20px; padding-left: 10px; border: 1px solid #333; height:320px; overflow: auto; } #history { padding-top: 5px; float :right; width:205px; position:absolute; left: 632px; border: 1px solid #333; overflow: auto; height:350px; } .historytitle { text-align:center; display:block; font-size: 17px; color: black; background-color: blue; } .historyresult { display:block; font-size: 14px; text-align:left; background-color: red; } #banner { margin: 0; padding: 5px; } #container { margin-bottom:30px; width:900px; height:400px; position : absolute; left:30px; top: 160px; /*background-color: #669999;*/ overflow: hide; border: 1px solid #333; } [code]
