PHP Forum

**BigJohnny** · 06-15-2008, 02:39 PM

I downloaded this hsoutbox from some site, and its working very nicely except that I've had to modify it to make the tables wide instead of tall.

Now i'm having a problem because I cant seem to get all of the tables lined up perfectly.... mostly cause i'm a n00b and don't really know how.

This is as close as i can get them to line up, but it still isnt exactly right.
If it isnt possible to line them up perfectly is there some way I could make this look pleasing on the eye without it looking crooked?

Right now ive got this loaded in an iframe, is it possible to insert this into an html file without using an iframe? Id like to avoid the iframe if possible, since this already uses one.

PHP Code:


			
<?php
//------ Edit Below This Line ------//
define('SHOUTBOX', 'shoutbox');
$host = 'localhost';
$dbuser = 'USERNAME'; // Username to access database.
$dbpass = 'PASSWORD'; // Password to access database.
$dbname = 'DBNAME'; // Database name.
$allowed_tags = '<b><i><u><a>';
//------ Edit Above This Line ------//
mysql_connect($host, $dbuser, $dbpass) or die(mysql_error());
mysql_select_db($dbname) or die(mysql_error());
function clean_string($string, $tags = '')
{
  $string = trim($string);
  $string = str_replace("\'", "''", $string);
  return $string;
}
?>
<style type="text/css">
.shoutbox {
margin: 0px;
padding: 0px;
background-color: FFFFFF}
.shoutbox a, a:visited {
color: 6E7A8A;
font-size: 12px;
font-weight: bold;
text-decoration: none;}
.shoutbox a:hover {
color: 6E7A8A;
text-decoration: underline;
}
.shoutbox input, select, textarea {
border: 1px solid silver;}
.form {
font-size: 12px;}
#name1 {
background-color: E0E0E0;
color: 666666;
font-size: 12px;}
#content1 {
background-color: E0E0E0;
font-size: 12px;}
#name2 {
background-color: F3F3F3;
color: 666666;
font-size: 12px;}
#content2 {
background-color: F3F3F3;
font-size: 12px;}
</style>
<?php
switch($_GET['p'])
{
  case 'box':
    echo "<body class=\"shoutbox\">\n<table cellpadding=\"0\">";
    $result = mysql_query("SELECT * FROM " . SHOUTBOX . " ORDER BY id DESC") or die(mysql_error());
    for ($i = 1; $i <= ($row = mysql_fetch_assoc($result)); $i++)
    {
      $nameid = (!($i % 2)) ? 'name1' : 'name2';
      $contentid = (!($i % 2)) ? 'content1' : 'content2';
      $name = strip_tags(stripslashes($row['name']), $allowed_tags);
      $website = strip_tags(stripslashes($row['website']), $allowed_tags);
      $content = strip_tags(stripslashes($row['content']), $allowed_tags);
      echo '<tr><td id="' . $nameid . '" width="50" align="right">', // This line controls the width of the name column.
      ((!empty($row['website'])) ? "<a href=\"$website\">$name</a>" : $name),
      '</td><td id="' . $contentid . '" width="30">' . $content . "</td></tr>\n"; // This line controls the width of the shout..
    }
    echo "</table>\n</body>";
  break;
  default:
    echo '<div class="shoutbox">';
    if ($_SERVER['REQUEST_METHOD'] == 'POST' && !empty($_POST['name']) && !empty($_POST['content']))
    {
      $name = clean_string($_POST['name']);
      $website = clean_string($_POST['website']);
      $website = (!empty($website) && $website != 'http://') ? (!eregi('^http://', $website) ? 'http://' . $website : $website) : '';
      $content = nl2br(clean_string($_POST['content'], '<a>'));
      mysql_query("INSERT INTO " . SHOUTBOX . " (name, website, content) VALUES ('$name', '$website', '$content')") or die(mysql_error());
    }
    echo '<iframe src="' . basename($_SERVER['PHP_SELF']) . '?p=box" width="348" height="75"></iframe>
    <form method="post"><table class="form">
    <tr><td><input type="text" name="name" size="52" value="Name"></td></tr>
    <tr><td><input type="text" name="website" value="http://" size="52"></td></tr>
    <tr><td><textarea name="content" rows="3" cols="40" value="Message"></textarea></td></tr>
    <tr><td colspan="2" align="center"><input type="submit" value="Submit"></td></tr>
    </table></form>', "\n</div>";
  break;
}
/* Run the below query in phpMyAdmin, under the shoutbox database, to create the tables.
CREATE TABLE shoutbox (
id INT NOT NULL AUTO_INCREMENT,
name VARCHAR(50),
website VARCHAR(150),
content VARCHAR(255),
PRIMARY KEY (id)
);
*/
?>

**nyef** · 06-15-2008, 05:05 PM

The easiest way to line up multiple tables is to set the width of each column of each table by using style="width:100px;" for each TD of the first TR of each table.

Other than setting the width explicitly, you can rewrite it so instead of multiple tables it is one giant table with multiple rows, then they line up automatically.

You can use a php-include to include one file in another server-side. Iframes are generally only used when you are loading a page from another website entirely.

**BigJohnny** · 05:23 PM

ok, so ive done this.... but it didnt seem to do anything....

PHP Code:


			
    echo '<iframe src="' . basename($_SERVER['PHP_SELF']) . '?p=box" width="348" height="75"></iframe>
    <form method="post"><table class="form">
    <tr><td style="width:100px;"><input type="text" name="name" size="52" value="Name"></td></tr>
    <tr><td style="width:100px;"><input type="text" name="website" value="http://" size="52"></td></tr>
    <tr><td style="width:100px;"><textarea name="content" rows="3" cols="40" value="Message"></textarea></td></tr>
    <tr><td colspan="2" align="center" style="width:100px;"><input type="submit" value="Submit"></td></tr>
    </table></form>', "\n</div>";

I cant rewrite it,.... i dont know php. and im not entirely sure what you mean. You can see how it looks if you go to www.teamspeakdisplay.com (username: user password: tdisplay)

Now how would i use the php include in an html file? Or can i make the html, php by adding <?php ?> to the begining and end of the file?

**nyef** · 06-15-2008, 05:24 PM

You have to set the width of each table you want to line up. That last bit you quoted is just one table. Exactly which tables are you trying to line up that aren't lining up?

**BigJohnny** · 06-15-2008, 05:29 PM

ok... now ive just saved index.html as index.php, and used a php include to inslude this Shout.php file.

It works fairly well, but has the same problem with width of the inputs... and a new one, now in the spot where its supposed to load the shouts, it loads my site again, and then in the site in the shoutbox, it will show the actual shouts... hard to explain, visit the page and you will see what i mean.

**BigJohnny** · 06-15-2008, 05:43 PM

Quote:

Originally Posted by nyef

You have to set the width of each table you want to line up. That last bit you quoted is just one table. Exactly which tables are you trying to line up that aren't lining up?

must have missed this... anyway the tables i posted are the ones im trying to get to line up... the NAME, WEBSITE and CONTENT should all be the same width as the 348px IFRAME thats loaded in that chunk.

also, using my index.html as index.php seems to not correctly load the css file. The links in my menu arent showing properly. if you go to index2.html you can see how the menu looks different.

**nyef** · 06-15-2008, 08:50 PM

Delete the size=52 on the two inputs and the cols=40 on the textarea.
Then put style="width:348px;" on the two inputs and the textarea.

**BigJohnny** · 06-15-2008, 09:05 PM

wow thats awesome.

Only problem im having now is, i dropped the iframe loading the shoutbox, and renamed my index.html to index.php as mentioned above. I used the php include to add the shoutbox, and its working ok, except the shoutbox's iframe thats supposed to load the shouts, is loading my page over again, and in THAT page its loading the shouts.

Obviously it has to do with this line
<iframe src="' . basename($_SERVER['PHP_SELF']) . '?p=box" width="348" height="75"></iframe>

But im not sure how to change it to make it work.

Is there a way to call the box function without using an iframe?

**nyef** · 06-15-2008, 09:54 PM

Yeah, look for the place in the code that references the QueryString looking for the variable "p". If it's set to "box", it executes a section of code. { }

Take that code and make it its own function, give it a name.

Then where the iframe is written out, replace it with a call to that function.

**BigJohnny** · 06-15-2008, 10:06 PM

i got this to work,
I echoed the basename function by itself, and seen that it was trying to load index.php
so i changed it to this
<iframe src="'Shout.php?p=box" width="348" height="75"></iframe>

And it works fine now... loads the shoutbox perfectly.

Only two other things i need to figure out now, is it possible to take the style info out of the php file, put it into my main Style.css file, and call the style.css file from the Shout.php file?

lastly, since my index.html file is now renamed index.php I need to pull the style info, cause it isnt loading properly.... not sure how though?

Is there a way to proprly convert the html to php?

**Arenlor** · 06-15-2008, 11:11 PM

HTML to PHP should be faultless. The .php is just an extension, you don't need any PHP in it at all. Validate your HTML and CSS http://jigsaw.w3.org/css-validator http://validator.w3.org

**BigJohnny** · 11:38 PM

well the css gets two errors - if these ask for a username and password its: user/tdisplay

http://jigsaw.w3.org/css-validator/v...ning=1&lang=en

and my actual site has 34
http://validator.w3.org/check?uri=ww...Inline&group=0

to be honest i have not a single clue as to what this means, and how to fix it.

im so confused and so frustrated... ive spent literally ALL DAY working out the stupidest, tinyest bugs, just to end up with more stupid bugs and everything going out of whack.

Now my css file doesnt seem to load properly, and god only knows why..... this makes me want to give up, I just do not understand this stuff....

**Arenlor** · 06-16-2008, 02:16 AM

The css, the first is because filter:glow (actually any filter

does not exist in the css 2.1 specification. I also checked the css 3 and it doesn't exist there neither. As for the error about: .bar01 that's actually quite simple, you used the letter o instead of the number 0, just a simple typo.

As for your html. First add a doctype (http://www.w3.org/QA/2002/04/valid-dtd-list.html) I'd suggest using HTML 4.01 Strict myself so that when 5 comes out in a few years your coding skills will be up to the transition. Next, remove all your code from ON your body tag.

Code:

bgcolor="#1b1c1d" leftmargin="0" rightmargin="0" marginwidth="0" topmargin="0" marginheight="0" text="#1F86DE"

All that needs to go. You can do all that with CSS.

Code:

body {background-color:#1B1C1D;margin:0;color:#1F86DE;}

<STYLE TEXT="text/css">
<!--This should actually be-->
<style type="text/css">
<!--type not text-->

Also: <script language="JavaScript1.2"> should be type too. I think you also want to stick that entire script section into your head. I don't know JS though.
Line #, Column #: required attribute "ALT" not specified. All img tags require an alt (alternate text) which is displayed if the image can't be found, or in screen readers (and in some other cases when it shouldn't be). So at least add an alt="" to your images.
Line #, Column #: element "U" undefined. U doesn't exist anymore (deprecated) so don't use it, instead use CSS (same with B and I).

Code:

.italic {font-style:italic;}
.bold {font-weight:bold;}
.underline {text-decoration:underline;}
.overline {text-decoration:overline;}

Same thing with font, use CSS instead. A good guide can be found at http://w3schools.com/css/ it's not hard to learn.

Line #, Column #: there is no attribute "HEIGHT". CSS, again. Also, don't use tables, instead use divs. If you really must, use the CSS display:table, table-row, or table-cell http://www.w3schools.com/css/pr_class_display.asp
Line #, Column #: there is no attribute "ALIGN". Also BGCOLOR, use CSS instead.
Line #, Column #: there is no attribute "BACKGROUND|SIZE|COLOR|BORDER|WIDTH". I'm feeling nice right now, so take a guess as to what to use.
If you need any help we can help you in the CSS forum, and if you're trying to go from using tables to divs like I hope you will there is a nice ladynred who probably will point you to tutorials and the like. After adding a doctype and removing the junk from your body tag AND moving the JS to the head let us know the results.

**BigJohnny** · 06-16-2008, 09:00 AM

the glow filter, works, and doesnt work.... it seems iffy. Ive had it working in the style sheet.... and then it would stop working for no real reason.... then i move the style info into the html file, and it would work...

Basically your telling me its old and outdated and newer css no longer supports glowing text?

now the doctype.... I dont know what kind of doctype the author of this template im using was going for, but it was never inserted.... if thats the case, why does he have all this leftmargin, rightmargin stuff if it isnt used?

as for the bar01 i checked through my html file, and i cant find bar01 or barO1 anywhere..... but it doesnt appear to be an O ... its a zero.

Divs confuse the hell out of me... i dont understand why or how to use divs instead of tables.... but as i said, this webpage is a template i downloaded.... it was basically built like this, and im not going to rewrite the entire thing using divs... it will take literally weeks for me to do that, and in the process i will probably screw up the entire page altogether.

I dont understand this stuff, and its just gotten way way more confusing since the last time i tried my hand at making a website.

I have not a single clue as to how i would convert my tables to divs and have them all line up properly. The whole reason im using this template is because the last one i tried used divs, and i couldnt get anything to line up, or to fit where i wanted it..... so i dumped it and grabbed this template instead.

honestly, this is bull****, All i wanted to do was get a simple website up quickly and leave it at that.
I don't understand any of this stuff, and the more i read the more confused and frustrated i am.

Im not kidding when i say its the same as giving a 2 year old a stephen king book and telling them to not only read it, but write a 10 page report about it.

I dont learn well from reading.... I always end up confused and left with more questions than I started.

Ive got alot of work to do when i get home I can see.... so when i get home, ill see how badly all these changes will screw up my "quick and simple" site.

**Arenlor** · 06-16-2008, 08:54 PM

Only IE has ever supported filter:, no other browser has. I don't know what doctype they were going for neither. As for the CSS, it's in there, it's:

Code:

.bar01 {
	color: #OOOOOO;
	margin-top: 1px;
	padding-bottom: 1px;
	margin-bottom: 0px;
	margin-left: 5px;
	margin-right: 20px;
	font-size: 18px;
	font-family: Arial,Tahoma,Verdana;
	font-weight: bold;
}

A quick website isn't likely to happen if you want it to look nice and work in all sites.

**BigJohnny** · 10:06 PM

so Ive cleaned a good portion of this up. Im a little stuck with the font though.
How do i do stuff like underline some text.
Can i use a <div style for that???

I dont wanna have to start adding a bunch of stuff to the css file if i dont have to.
I was looking at the w3c tuts for this, and it only shows how to add it by making variables or something.... I dont totally understand how it works.

edit

you pulled that out of what I posted?? Im looking at it now and they look like zeros... O_0 ....anyway, i replaced them just to be safe... although i still dont know where the .bar01 (variable?property? ) is being used.

My site is just for a teamspeak display module i made for vbadvanced CMPS, its a vbulletin hack that someone has managed to "steal" from me. So i wanted to put up something simple to make sure people know that they are getting my offical version, and not this other dudes ripoff.

I can look at expanding it later on... for now im just gonna finish up the index, and basically copy it for the other pages

**Arenlor** · 06-16-2008, 10:24 PM

The CSS is in your css file. http://www.teamspeakdisplay.com/style.css
.bar01 is a class that can be used on anything.
As for how to underline, you can use spans for inline stuff.

HTML Code:

<span style="font-size:20px;font-style:italic;font-weight:lighter;decoration:underline;">Some text</span>

That would make the text 20px, italic, the opposite of bold (however that's done, there is also bolder), and underlined. http://www.w3schools.com/Css/css_reference.asp#font

**BigJohnny** · 06-16-2008, 10:35 PM

oh span.... ok, I'd totally forgotten about that one.

I know where the css was, i was just left wondering why bar01 is in there if it isnt used.
As i mentioned Im using a template that I found on a free site..... seems there was alot wrong with it, but im working out the bugs

**BigJohnny** · 06-16-2008, 11:43 PM

what do i do about my tables? (and dont say replace them with divs... im not ready for that yet)

Code:

<table border="0" cellpadding="0" cellspacing="0" width="763" background="html/graphics/bg.jpg">

Im not quite sure how to replace this one?! ... im down to 12 erros now

**Arenlor** · 06-17-2008, 01:52 AM

HTML Code:

<table style="border:0px;border-spacing:0px;padding:0px;width:763px;background-image:url(html/graphics/bg.jpg);">