No replies
nickjamesd
Offline
newbie
Last seen: 10 years 32 weeks ago
Timezone: GMT+1
Joined: 2009-07-07
Posts: 2
Points: 0

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 = &quot;MAIN1.cgi&quot;"  /><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 = &quot;MAIN2.cgi&quot;"  /><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 = &quot;MAIN3.cgi&quot;"  /><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 = &quot;MAIN4.cgi&quot;" 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 = &quot;MAIN5.cgi&quot;" 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 = &quot;MAIN6.cgi&quot;" 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]