Vertical Alignment - Cemetech | Forum | Website Markup & Scripting [Topic]

Burklow2016
Newbie (Posts: 39)

Vertical Alignment
27 Apr 2013 08:51:24 pm

My friend and I are building a website for the WYSE team (http://www.gallatinwyseteam.uphero.com/index.php).
I've built the majority of the webpages but he dealt with most of the php since I didn't know how to at the time. Well he also took the liberty of setting up the messaging system between users. Well just to enhance the aesthetics of the site I want the message to be align right and in the middle of the webpage. I've tried all the commands I could find to align it vertically but it just isn't working. I've also tried aligning the table so it will be directly to the left of the main part of the website but that isn't working either. Any help?
And you can use this login:
Username: kb2016
Password: wyse2013
Messaging

Code:

<!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">


   <head>


      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


      <title></title>


   </head>





   <body>


      <?php


         $acti = $_GET['act'];


         $arra = array('view','delete','compose');


         $sql = "SELECT * FROM `messages` WHERE `uid`='".$_SESSION['uid']."' ORDER BY id DESC";


         $res = mysqli_query($con,$sql)or die(mysql_error());


         echo "<table border=\"1\" cellspacing=\"3\" cellpadding=\"3\" width=\"100%\">\n";


         if(!$acti || !in_array($acti,$arra)){


            echo "<form method=\"post\" action=\"./index.php?action=message&act=compose\">\n";


            echo "<tr align=\"center\"><td colspan=\"5\"><input type=\"submit\" name=\"compose\" value=\"COMPOSE\"></form></td></tr>\n";


            echo "<form method=\"post\" action=\"./index.php?action=message&act=delete\">\n";


            echo "<tr align=\"center\"><td>DELETE?</td><td>DATE</td><td>FROM</td><td>READ(?)</td><td>SUBJECT</td></tr>\n";


            if(mysqli_num_rows($res) == 0){


               echo "<tr align=\"center\"><td colspan=\"4\">You have no messages.</td></tr>\n";


            }else {


               while($row = mysqli_fetch_assoc($res)){


                  $sql2 = "SELECT * FROM `users` WHERE `id`='".$row['sid']."'";


                  $res2 = mysqli_query($con,$sql2)or die(mysql_error());


                  $row2 = mysqli_fetch_assoc($res2);


                  if($row['rid'] == 1){


                     $read = "YES";


                  }elseif($row['rid'] == 0){


                     $read = "NO";


                  }


                  echo "<tr align=\"center\"><td><input type=\"checkbox\" name=\"checkbox[]\" value=\"".$row['id']."\"></td><td>".$row['date']."</td><td>".$row2['firstname']." ".$row2['lastname']."</td><td>".$read."</td><td><a href=\"./index.php?action=message&act=view&msgid=".$row['id']."\">".$row['subject']."</a></td></tr>\n";


               }


            }


            echo "<tr align=\"center\"><td><input type=\"submit\" name=\"button\" value=\"DELETE\"></form><td colspan=\"4\"></td><tr>\n";


         }elseif($acti == 'view'){


            $mid = $_GET['msgid'];


            $sql1 = "SELECT * FROM `messages` WHERE `id`='".$mid."' AND `uid`='".$_SESSION['uid']."'";


            $res1 = mysqli_query($con,$sql1)or die(mysql_error());


            $row1 = mysqli_fetch_assoc($res1);


            if($row1['rid'] == 0){


               $update = "UPDATE `messages` SET `rid`='1' WHERE `id`='".$mid."'";


               $resupdate = mysqli_query($con,$update)or die(mysql_error());


            }


            echo "<tr><td><a style=\"text-align:center;\">SUBJECT: ".$row1['subject']."</a> <a href=\"./index.php?action=message\" style=\"text-align:right;\">BACK</a></td></tr>\n";


            echo "<tr align=\"left\"><td>".$row1['message']."</td></tr>\n";


         }elseif($acti == 'delete'){


            echo "You're where you're supposed to be\n";


            $count = mysqli_num_rows($res);


            $checkbox = $_POST['checkbox'];


            for($i=0;$i<$count;$i++){


               $del_id = $checkbox[$i];


               echo $checkbox[$i];


               $del = "DELETE FROM `messages` WHERE `id`='".$del_id."'";


               $result = mysqli_query($con,$del);


               header( 'Location: ./index.php?action=message' ) ;


            }


            


         }elseif($acti == 'compose'){


            include "./message_c.php";


         }


         echo "</table>\n";


      ?>


   </body>


</html>

Homepage

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">


<head>


 


<title>Gallatin County WYSE Team</title>


<meta http-equiv="content-type" content="text/html; charset=utf-8" />


<link rel="stylesheet" href="http://www.gallatinwyseteam.uphero.com/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>


<style type="text/css">


._css3m {


   display:none


}





.WYSETITLE {


   font-family: "Times New Roman", Times, serif;


   color: #000;


   text-decoration: none;


   font-size: 50px;


   text-align: center;


}





.WYSE {


   font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;


   color: #000;


   text-decoration: none;


   text-align: center;


}


.PINFO {


position: fixed;


color: #C0C0C0


font-size: 12px;


text-decoration: none;


text-color: #181818;


}





body,td,th {


   font-size: 12px;


}





</style>


 


 


 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


</head>


 


<body style="margin: 0px; padding: 0px" bgcolor="#e0e0e0">


<a style="text-decoration: none; color: #000;">


<?php


session_start();


include "./functions.php";


$sql = "SELECT * FROM `users` WHERE `id`='".$_SESSION['uid']."'";


$res = mysqli_query($con,$sql)or die(mysql_error());


$row = mysqli_fetch_assoc($res);


$test1 = $row['test1'];


$test2 = $row['test2'];





$test = $_GET['test'];


$section = $_GET['section'];


$act = $_GET['action'];


$actions = array('login','logout','test','message');





$nummsg = "SELECT count(*) AS number FROM `messages` WHERE `uid`='".$_SESSION['uid']."' AND `rid`='0'";


$nummsg1 = mysqli_query($con,$nummsg)or die(mysql_error());


$rw = mysqli_fetch_assoc($nummsg1);


?>


<?php


if($_SESSION['uid']){


?>


<table width="15%" border=".1" class="PINFO" bgcolor="#C0C0C0" align="right">





<?php





echo "<tr><td>Name:</td><td>".$row['firstname']." ".$row['lastname']."</td></tr>\n";


echo "<tr><td>Test 1:</td><td>".$row['test1name']."</td></tr>\n";


echo "<tr><td>Test 2:</td><td>".$row['test2name']."</td></tr>\n";


echo "<tr align=\"center\"><td colspan=\"2\"><a href=\"./index.php?action=message\" style=\"text-color: #181818;text-decoration: none;\">Messages (".$rw['number'].")</td></tr>\n";





?>





</table>


<?php


}


?>


<table width="850ex" style="height: 100%;" cellpadding="10" cellspacing="0" border="0px" align="center" bgcolor="#FFFFFF">


<tr>


 


<!-- ============ HEADER SECTION ============== -->


<td colspan="15" style="height: 80px" class="WYSETITLE">Gallatin County WYSE Team</td></tr>


 


 


<!-- ============ NAVIGATION BAR SECTION ============== -->


<tr class="WYSE"><td align="center" width="8%" height="30" colspan="1" valign="middle">


<ul id="css3menu1" class="topmenu">


   <li class="topfirst"><a href="./index.php" style="height:15px;line-height:15px;">Home</a></li>


   <?php


if(!$_SESSION['uid']){





?>


<li class="topmenu"><a href="#" style="height:15px;line-height:15px;">You must be logged in to access the site.</a></li>


<?php


}


   if($test1 == 1 || $test1 == 8){


   ?>


   <li class="topmenu"><a href="#" style="height:15px;line-height:15px;"><span>Biology</span></a>


   <ul>


      <li class="subfirst"><a href="./index.php?action=test&test=1&section=1">Regional</a></li>


      <li><a href="./index.php?action=test&test=1&section=2">Sectional</a></li>


      <li><a href="./index.php?action=test&test=1&section=3">State</a></li>


   </ul></li>


   <?php


   }


   if($test1 == 2 || $test2 == 2 || $test1 == 8){


   


   echo "<li class=\"topmenu\"><a href=\"#\" style=\"height:15px;line-height:15px;\"><span>Chemistry</span></a>\n";


   echo "<ul>\n";


   echo "<li class=\"subfirst\"><a href=\"./index.php?action=test&test=2&section=1\">Regional</a></li>\n";


   echo "<li><a href=\"./index.php?action=test&test=2&section=2\">Sectional</a></li>\n";


   echo "<li><a href=\"./index.php?action=test&test=2&section=3\">State</a></li>\n";


   echo "</ul></li>\n";


   


   }


   if($test1 == 3 || $test2 == 3 || $test1 == 8){


   ?>


   <li class="topmenu"><a href="#" style="height:15px;line-height:15px;"><span>Computer Science</span></a>


   <ul>


      <li class="subfirst"><a href="./index.php?action=test&test=3&section=1">Regional</a></li>


      <li><a href="./index.php?action=test&test=3&section=2">Sectional</a></li>


      <li><a href="./index.php?action=test&test=3&section=3">State</a></li>


   </ul></li>


   <?php


   }


   if($test1 == 4 || $test2 == 4 || $test1 == 8){


   ?>


   <li class="topmenu"><a href="#" style="height:15px;line-height:15px;"><span>Engineering Graphics</span></a>


   <ul>


      <li class="subfirst"><a href="./index.php?action=test&test=4&section=1">Regional</a></li>


      <li><a href="./index.php?action=test&test=4&section=2">Sectional</a></li>


      <li><a href="./index.php?action=test&test=4&section=3">State</a></li>


   </ul></li>


   <?php


   }


   if($test1 == 5 || $test2 == 5 || $test1 == 8){


   ?>


   <li class="topmenu"><a href="#" style="height:15px;line-height:15px;"><span>English</span></a>


   <ul>


      <li class="subfirst"><a href="./index.php?action=test&test=5&section=1">Regional</a></li>


      <li><a href="./index.php?action=test&test=5&section=2">Sectional</a></li>


      <li><a href="./index.php?action=test&test=5&section=3">State</a></li>


   </ul></li>


   <?php


   }


   if($test1 == 6 || $test2 == 6 || $test1 == 8){


   ?>


   <li class="topmenu"><a href="#" style="height:15px;line-height:15px;"><span>Mathematics</span></a>


   <ul>


      <li class="subfirst"><a href="./index.php?action=test&test=6&section=1">Regional</a></li>


      <li><a href="./index.php?action=test&test=6&section=2">Sectional</a></li>


      <li><a href="./index.php?action=test&test=6&section=3">State</a></li>


   </ul></li>


   <?php


   }


   if($test2 == 7 || $test1 == 8){


   ?>


   <li class="topmenu"><a href="#" style="height:15px;line-height:15px;"><span>Physics</span></a>


   <ul>


      <li class="subfirst"><a href="./index.php?action=test&test=7&section=1">Regional</a></li>


      <li><a href="./index.php?action=test&test=7&section=2">Sectional</a></li>


      <li><a href="./index.php?action=test&test=7&section=3">State</a></li>


   </ul></li>


   <?php


   }


if($_SESSION['uid']){


   ?>


<li class="toplast"><a href="./index.php?action=logout" style="height:15px;line-height:15px;">Logout</a></li>


</ul><p class="_css3m"><a href="http://css3menu.com/">Flash Menu In HTML  Css3Menu.com</a></p>


<?php


}


?>


</tr>


 


<!-- ============ RIGHT COLUMN (CONTENT) ============== -->


<tr>


<center>


<td align="center">


<table align="center"><td align="center" width="768">


<?php


if(!$_SESSION['uid']){


include "./login.php";


?>


<h1 style="text-align:center; margin-left:auto; margin-right:auto">


<img align="center" src="http://i1301.photobucket.com/albums/ag102/Burklow2016/901385_10151449428403087_1688470681_o_zps73064d9e.jpg" height="576" width="768"></h1></td></table>


<tr><td height="20" colspan="15" align="center"><font color="#000" face="Comic Sans MS, cursive"><h5>Created By: Kaleb Burklow and Dustin Oldham</h5></font></td></tr>


<?php


}else{





if(!$act || !in_array($act,$actions)){


?>





<img align="center" src="http://i1301.photobucket.com/albums/ag102/Burklow2016/901385_10151449428403087_1688470681_o_zps73064d9e.jpg" height="576" width="768">





</td>


<?php


}


if($act == 'test'){


include "./".$test."/".$section.".php";


}


if($act == 'message'){


include "./message.php";


}


if($act == 'logout'){


include "./logout.php";


}


?>


</tr>


 


<!-- ============ FOOTER SECTION ============== -->


<tr><td height="20" colspan="15" align="center"><font color="#000" face="Comic Sans MS, cursive"><h5>Created By: Kaleb Burklow and Dustin Oldham</h5></font></td></tr>


</table>


<?php








}


?>


</a>


</body>


 


</html>

Any and all help will be appreciated Smile

flyingfisch
Minor Calculator Deity (Posts: 1088)

27 Apr 2013 10:13:10 pm

try:

Code:




.WYSETITLE { 


margin: 0 auto;


}

EDIT:
forget that, just saw it wont work. iwill try to figure it out tomorrow morning

Burklow2016
Newbie (Posts: 39)

27 Apr 2013 10:24:55 pm

This is what I want

flyingfisch
Minor Calculator Deity (Posts: 1088)

28 Apr 2013 06:50:12 am

how about this?

Code:




.PINFO {


top: 48%;


}

Burklow2016
Newbie (Posts: 39)

28 Apr 2013 08:14:27 am

So aligned at the bottom now but I still need it aligned right and thank you flyingfisch! Smile

flyingfisch
Minor Calculator Deity (Posts: 1088)

28 Apr 2013 11:55:43 am

well there are a few things you can do now.

Since its position is fixed, you need to be able to figure out where the edge of the main page is. This is easy if you just make the width of the page a percent value, for instance 60%, and then make the fixed element's right value 80%. I can elaborate if that doesn't make sense.

This won't be perfect, but it's about as close as you are going to get without some complicated work.

Also, it may be too late to change now, but using tables for layout is not recommended. The div tag can be used for layout instead. Here's a good article on that: http://alistapart.com/article/practicalcss/

Hope that helps! Wink

Burklow2016
Newbie (Posts: 39)

28 Apr 2013 12:03:25 pm

Okay lets say that I did re write the whole thing using divs would that make it easier to position the message table? And when I first started building it I tried the percentage tag but when logged in as coach the navigation bar takes up too much room and has to loop around. That's why I ended up setting it as the specified width.

flyingfisch
Minor Calculator Deity (Posts: 1088)

28 Apr 2013 12:19:49 pm

Hmm... well, the easiest way would be to have the whole site liquid, at least horizontally. What makes the coach's nav bar so large?

Burklow2016
Newbie (Posts: 39)

28 Apr 2013 12:29:41 pm

All the tests categories are displayed (around 7 and home page)

flyingfisch
Minor Calculator Deity (Posts: 1088)

28 Apr 2013 12:36:11 pm

Well, then maybe you should integrate the messenger into the actual site instead of having it stay with you as you scroll.

Burklow2016
Newbie (Posts: 39)

28 Apr 2013 12:41:47 pm

Where would you propose I place it?

flyingfisch
Minor Calculator Deity (Posts: 1088)

28 Apr 2013 12:50:07 pm

maybe as a strip under the nav bar?

Burklow2016
Newbie (Posts: 39)

28 Apr 2013 12:55:30 pm

I can use that as a temporary fix and just because you've gotten me interested I've already started attempting to rewrite the site using the div command instead of the table but I'm defiantly not posting it until I at least have the homepage up and working.

flyingfisch
Minor Calculator Deity (Posts: 1088)

28 Apr 2013 01:03:27 pm
Last edited by flyingfisch on 28 Apr 2013 01:06:35 pm; edited 1 time in total

Ah ok, that's good. Smile

Also, if you want, here's a great guide on choosing appealing colors for a website: www.colorsontheweb.com

I have learned never to use flat grays, especially if they are on the lighter side. You should either "cool it down" or "warm it up" by using a tad more blue or red, respectively.

So when I want the color #ccc, I actually use #dcc or #ccd, depending on my color scheme. It helps keep a site from looking "flat" or "dull". Wink

</spiel>

Burklow2016
Newbie (Posts: 39)

28 Apr 2013 01:05:51 pm

I'll keep that in mind Smile

Thanks for all the help I might need some more considering I've never used divs for a whole website before Smiling Cat

edit: How I now feel about using divs on my website....