SalientAnimal Posted June 25, 2012 Share Posted June 25, 2012 Hi Guys/Gals I have the following PH page and it prints my results. I now have it returning the correct results and now I need to present it on a PHP page in a "PRETTY" way. Basically I want the result to display: 1. In the center of the page in a square 2. In a rather large font, so as to almost fill the screen 3. And being really fancy now - have the number being printed change colour at certain values from red to orange to green These colour intervals will be 50, 150, 300. Here is my existing code which returns the results: <?php session_start(); $conn = @mysql_connect("localhost","root","MYPASSWORD") or exit("Could not establish a connection to MySQL Server. mysql_error()"); $select = @mysql_select_db("MYDATABASE",$conn) or exit("Could not select the appropriate database for this operation. mysql_error()"); if(isset($_COOKIE['ID_my_site'])) { $username = $_COOKIE['ID_my_site']; $name = $_COOKIE['ID_my_name']; $pass = $_COOKIE['Key_my_site']; $check = @mysql_query("SELECT * FROM userinfo WHERE username='$username'") or die("Failed to execute SQL Statement."); while($info = mysql_fetch_array($check)) { if($pass != $info['password']) { header("Location: login.php"); } else{ } } } else{ header("Location:login.php"); } include "navigation/backoffice.html"; ?> <title> ? 2012 SALES COUNT </title> <meta http-equiv="refresh" content="10"> <script type="text/javascript"> var count = 0; var delay = 250; var text = "? SALES COUNT "; function scroll () { document.title = text.substring(count, text.length) + text.substring (0, count) if (count < text.length) { count ++; } else { count = 1; } setTimeout ("scroll()", delay); } scroll(); </script> <LINK REL="SHORTCUT ICON" HREF="favicon.ico"> <script language="javascript" src="js/admin.js"></script> <style type="text/css"> <!-- #form1 table tr td { color: #FFF; } #form1 table tr td { font-family: "Segoe Print", Tahoma, "Segoe UI"; font-size: 13px; } #form1 p { color: #FFF; font-size: 36px; font-weight: bold; text-align: center; font-family: "Segoe Print", Tahoma, "Segoe UI"; } --> </style> </head> <link rel="stylesheet" type="text/css" href="/css/layout_churn.css"/> <?php // Show simple format of the records so person can choose the reference name/number // this is then passed to the next page, for all details $con = mysql_connect("localhost" ,"root" ,"MYPASSWORD"); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("MYDATABASE", $con); $result = mysql_query("SELECT * FROM cs_2012 WHERE DATE(sys_date) = CURDATE() "); $num_rows = mysql_num_rows($result); echo "$num_rows Sales Today \n"; echo date('l \t\h\e jS'); ?></html> Quote Link to comment Share on other sites More sharing options...
Barand Posted June 25, 2012 Share Posted June 25, 2012 This is a CSS problem Setting width value and left/right margins to "auto" will centre the form in the page Quote Link to comment Share on other sites More sharing options...
SalientAnimal Posted June 25, 2012 Author Share Posted June 25, 2012 Ok cool, so here is what I have managed to do: <link rel="stylesheet" type="text/css" href="/css/layout_sales.css"/> </head> <p align='center'> <br> <br> <br> <table align='center'> <tr> <?php // Show simple format of the records so person can choose the reference name/number // this is then passed to the next page, for all details $con = mysql_connect("localhost" ,"root" ,"MYPASSWORD"); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("MYDATABASE", $con); $result = mysql_query("SELECT * FROM cs_2012 WHERE DATE(sys_date) = CURDATE() "); $num_rows = mysql_num_rows($result); echo "<table border='4' width='250' align='middle'>"; echo "<tr>"; echo "<td> $num_rows Sales \n </td>"; I have also changed me CSS file so the results are displayed in the center. I had to however use line breaks to move the table down, is there a way to center it without the use of the line breaks? Then the other thing that I haven't figured out yet is how to get the font to change color when the results get to certain values (50, 150, 300) - Any help on this? My results are also displaying all on one line eg. 100 Sales, I would prefer it to display as: 100 Sales And to be centered in the table. Quote Link to comment Share on other sites More sharing options...
Barand Posted June 25, 2012 Share Posted June 25, 2012 I have also changed me CSS file so the results are displayed in the center. I had to however use line breaks to move the table down, is there a way to center it without the use of the line breaks? margin-top: 100px Then the other thing that I haven't figured out yet is how to get the font to change color when the results get to certain values (50, 150, 300) - Any help on this? check the value and apply different td classes specifying colour. <?php if ($value >= 50) $class = 'low'; if ($value >= 150) $class = 'mid'; if ($value >= 300) $class = 'high'; echo "<td class='$class'>$value</td>"; ?> Quote Link to comment Share on other sites More sharing options...
SalientAnimal Posted June 25, 2012 Author Share Posted June 25, 2012 I'm having some problems applying the td class css. Can you perhaps help me with placing it correctly in my code? $result = mysql_query("SELECT * FROM cs_2012 WHERE DATE(sys_date) = CURDATE() "); $num_rows = mysql_num_rows($result); if ($value >= 50) $class = 'low'; if ($value >= 150) $class = 'mid'; if ($value >= 300) $class = 'high'; echo "<table border='4' width='250' align='middle'>"; echo "<td class='$class'>$value Sales</td>"; This is my CSS code: body { background: url(../img/vmsa.jpg) fixed; background-color: white; font-family: Segoe UI, Tahoma; font-weight: normal; } p { font-family: Segoe UI, Tahoma; font-size:50px; color: white; text-indent:8px; font-weight: normal; } table { border-collapse:collapse; } table,th, td { font-family: Segoe UI, Tahoma; font-size: 100px; color: white; font-weight: bold; width: auto; } low { font-family: Segoe UI, Tahoma; font-size: 100px; color: red; font-weight: bold; width: auto; } mid { font-family: Segoe UI, Tahoma; font-size: 100px; color: orange; font-weight: bold; width: auto; } high { font-family: Segoe UI, Tahoma; font-size: 100px; color: green; font-weight: bold; width: auto; } Quote Link to comment Share on other sites More sharing options...
Barand Posted June 25, 2012 Share Posted June 25, 2012 precede class names with "." eg .low { font-family: Segoe UI, Tahoma; font-size: 100px; color: red; font-weight: bold; width: auto; } Quote Link to comment Share on other sites More sharing options...
SalientAnimal Posted June 25, 2012 Author Share Posted June 25, 2012 Haha, thanks... I hate the little errors we miss sometimes. Really appreciate the help. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.