Need help with my website design (HTML/CSS)

My site has been designed using HTML and tables, mainly because I'm too new to CSS to make it entirely CSS based.

My page looked good, until I plugged in my PHP code, so I decided to try to style it further using css.

Unfortunately, there are some things I just can't get right and now I'm looking for some help.

See my page​

My problems:

• The top part is a little more to the left than the rest of the page and I can't seem to align it so the images fit.
  
• The list of keywords should be displayed (and fit) in the square.
  
• The generated status (click a keyword to see it), should be displayed inside the speech bubble.

All help will be highly appreciated!

 

Someone can Help if you provide the CODE which you have used for that page..

What I suggest you is:
1) Save the webpage which is loaded to the browser from internet.
2) Open it with your Editor and format it to your needs
3) Compare it with your PHP version and you will come to know where to problem might have occured..
4) You may fix it for yourself if you are able to recognize where the mistake has happened..

You may need to implement CSS properly to the places where the PHP Data gets displayed on the page..
Or
You may have used some formatting in the source of that PHP data which is getting displayed on this page and you may need to edit the source..

 

For some reason, I can't get the tags to show in a proper square, instead of one below the other.

In my index.php file:

<?
//MAIN FUNCTION
include('showtag.php');
?>

PHP:

showtag.php:

<?
 $query = "SELECT * FROM tblquotes ORDER BY RAND()";
 $result = mysql_query($query) or die(mysql_error()); 
 if ($result && MySQL_num_rows($result)>0)
 {
  $alltags[]="";
  $count=0;
  $maxcount = readvar('number');
  $fsize1 = readvar('fsize1');
  $fsize2 = readvar('fsize2');
  while($row = MySQL_fetch_array($result))
  {
   $tags = $row["tags"];
   $tagsx = explode(",",$tags);
   {if ($maxcount>0 && $count>=$maxcount) {break;}
    foreach ($tagsx as $key => $value)
    {
     $value = strtolower(trim($value));
     if ($value)
     {
      if (!array_search($value,$alltags))
      {
       $alltags[]=$value;
       $count++;
       if ($maxcount>0 && $count>=$maxcount) {break;}
      }
     }
    }
   }
  }
 }

 foreach($alltags as $key => $value)
 {
  while ($fontsize==$fontsizex) {$fontsize=rand($fsize1,$fsize2);}
  echo "[B]<div id=\"showtags\">[/B]<a class=\"cloudhyperlink\" href=\"?tag=".urlencode($value)."\"><font class=\"cloudfont\" size=\"$fontsize\">$value</font></a>&nbsp;&nbsp;&nbsp;</div>";
  $fontsizex = $fontsize;
 }
?>

PHP:

My CSS:

 

I am a very beginner web designer.. I dont know to code PHP but I can understand the code a bit..

You are using DIV code for displaying the TAGS..

1)

<b><div id=\"showtags\" ></b>

Code (markup):

- Why Ending the BOLD Tag just after begining the DIV Tag? Proper Nesting of the Tags is needed..

2) I think its taking DIV for each and every TAG.. So they are getting displayed on separate lines..
Use SPAN Tag instead of DIV..

<span id=\"showtags\"><b><a class=\"cloudhyperlink\" href=\"?tag=".urlencode($value)."\"><font class=\"cloudfont\" size=\"$fontsize\">$value</font></a></b>&nbsp;&nbsp;&nbsp;</span>

Code (markup):

Nest the HTML Tags in a Proper manner..

Try it and see..

 

Just a suggestion, more easy is to make a .php page with vars functions etc and use them just when you need not to put all html content into php.
To undrerstand what I mean I'll show you a little code.
Why to use :

<?php echo "[b]<div id=\"showtags\">[/b]<a class=\"cloudhyperlink\" href=\"?tag=".urlencode($value)."\"><font class=\"cloudfont\" size=\"$fontsize\">$value</font></a>&nbsp;&nbsp;&nbsp;</div>"; ?>

Code (markup):

When you can use :

<div id="showtags">
<a class="cloudhyperlink" href="<?php echo urlencode($value); ?>">
<font class="cloudfont" size="<?php echo $fontsize; ?> ">
<?php echo $value; ?>
</font>
</a>
</div>

PHP:

 

Good Suggestion ExtremeData..

In first code, You are using DIV tag within echo to display $value and its resulting showing all the Tags in new line I think..

In second code, you have place echo within DIV tag.. So this will result in placement of tags in a single line or multiple lines depending of the width of the DIV..

I think this will solve the problem.. Lets see what will lokielookies say ?