Now That I have my Results - How do I make it pretty?

[SalientAnimal]

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>

[Barand]

This is a CSS problem

 

Setting width value and left/right margins to "auto" will centre the form in the page

[SalientAnimal]

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.

[Barand]

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>";
?>

[SalientAnimal]

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;
} 

[Barand]

precede class names with "." eg

.low
{
font-family:  Segoe UI, Tahoma;
font-size: 100px;
color: red; 
font-weight: bold;
width: auto;
} 

[SalientAnimal]

Haha, thanks...

 

I hate the little errors we miss sometimes.

 

Really appreciate the help.