dynamic button generation

djwinder

Hi all

I am using the below code to as an include for a page that prints out any announcements written by members of the site. It works well but i can not see how i can get the three buttons at the bottom of the page to display side by side and not one over the other. can anyone help?

Thanks in advance...

$query = "select * from announcetemp";
	 $rs = mysql_query($query) or die ('could not select all') ;	

 $list = "<table width=\"760\" colspan=\"4\" border=\"0\" cellpadding=\"2\" bgcolor=\"#FFFFFF\">";

while ( $row = mysql_fetch_array($rs))   //order by post date?
{

$list .= "<tr>-----------------------------------------------------------------------------------------------------------------------";
$list .= "<br><tr><b>Title </b>".$row["subject"]." <b> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp Posted On </b>".$row["postdate"]."</tr>";
$list .= "<br><tr>".$row["body"]."</tr>";	

if ($row["filepath"] !="")   //there is an associated file so show link
{
$list .= "<tr><a href=".$row["filepath"].">Click here </a> to view associated file</tr>";
}

$list .= "<tr> 
	  <form action=\"approveannounces.php\" method=\"post\">  
              <input type=\"submit\" name=\"delete\" value=\"Delete\"> 
              <input type=\"hidden\" name=\"user\" value=".$row["annoid"]."> </form> 

	  <form action=\"approveannounces.php\" method=\"post\">
              <input type=\"submit\" name=\"approve\" value=\"Approve\"> 
              <input type=\"hidden\" name=\"user\" value=".$row["annoid"]."> </form>                    

              <form action=\"editannounce.php\" method=\"post\">
              <input type=\"submit\" name=\"edit\" value=\"Edit\"> 
              <input type=\"hidden\" name=\"user\" value=".$row["annoid"]."> </form> 

              </tr>";

    $list .= "</tr>";
}

$list .= "</table>";

echo ($list);

ab4net

Hi,
i have faced many times the same problem,
the problem is caused by the FORM object, it takes and reserve in HTML a full line.
so if you want to solve it, instead of using 3 forms, use one form and set three buttons each of them to change the form action when clicked and then submit the form, in other word, create a javascript in the form with a function to handle the direction of the form ...
regards,

Weedpacket

Or just style those forms with "display:inline".

nebcode

Weedpacket wrote:
Or just style those forms with "display:inline".

I agree. Otherwise, if Javascript is not on or not available, it won't work.

djwinder

I have tried applying the "display:inline" idea by altering the code as follows, it functions very much like it should however the buttons are still showing one over another but now with bullet points to their left. Can anyone see how this can be resolved?

$query = "select * from announcetemp";
	 $rs = mysql_query($query) or die ('could not select all') ;	

 $list = "<table width=\"760\" colspan=\"4\" border=\"0\" cellpadding=\"2\" bgcolor=\"#FFFFFF\">";

while ( $row = mysql_fetch_array($rs))   //order by post date?
{

$list .= "<tr>-----------------------------------------------------------------------------------------------------------------------";
$list .= "<br><tr><b>Title </b>".$row["subject"]." <b> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp Posted On </b>".$row["postdate"]."</tr>";
$list .= "<br><tr>".$row["body"]."</tr>";	

if ($row["filepath"] !="")   //there is an associated file so show link
{
$list .= "<tr><a href=".$row["filepath"].">Click here </a> to view associated file</tr>";
}

$list .= "<tr> <div id=\"btncontainer\"> <ul>


	  <li><form action=\"approveannounces.php\" method=\"post\">  
              <input type=\"submit\" name=\"delete\" value=\"Delete\"> 
              <input type=\"hidden\" name=\"user\" value=".$row["annoid"]."> </form> </li>

	  <li><form action=\"approveannounces.php\" method=\"post\">
              <input type=\"submit\" name=\"approve\" value=\"Approve\"> 
              <input type=\"hidden\" name=\"user\" value=".$row["annoid"]."> </form></li>                    

              <li><form action=\"editannounce.php\" method=\"post\">
              <input type=\"submit\" name=\"edit\" value=\"Edit\"> 
              <input type=\"hidden\" name=\"user\" value=".$row["annoid"]."> </form> </li>

              </ul></div></tr>";

    $list .= "</tr>";
}

$list .= "</table>";

echo ($list);

In the root folder i have a CSS file titled "btncontainer.css" with the following code in it:

#btncontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

Weedpacket

Where did the <ul> and <li> all come from? You're not trying to display three <form> elements side by side any more, you're trying to display three <li> elements side by side.

djwinder

I have removed the <ul> tags from the code but still have the same problem

Weedpacket

And did you remove the <li> tags as well?

djwinder

I have and no success with this problem mainly because i am new to css. I found a CSS tutorial online, I have intergrated that into my code and have the following. In my header file i have the following defined in my styles section of code in a header file. The header is required in the main page.

.button {
display:inline;
margin:0;
padding:.5em;
}

also in that main page is the following code but this is stored as a seperate file and called using include. I am not sure if that is causing complications.


$query = "select * from announcetemp";
	 $rs = mysql_query($query) or die ('could not select all') ;	

 $list = "<table width=\"760\" colspan=\"4\" border=\"0\" cellpadding=\"2\" bgcolor=\"#FFFFFF\">";

while ( $row = mysql_fetch_array($rs))   //order by post date?
{

$list .= "<tr>-----------------------------------------------------------------------------------------------------------------------";
$list .= "<br><tr><b>Title </b>".$row["subject"]." <b> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp Posted On </b>".$row["postdate"]."</tr>";
$list .= "<br><tr>".$row["body"]."</tr>";	

if ($row["filepath"] !="")   //there is an associated file so show link
{
$list .= "<tr><a href=".$row["filepath"].">Click here </a> to view associated file</tr>";
}

$list .= "<tr> <ul class=\"button\">  

	  <form action=\"approveannounces.php\" method=\"post\">  
              <input type=\"submit\" name=\"delete\" value=\"Delete\"> 
              <input type=\"hidden\" name=\"user\" value=".$row["annoid"]."> </form> 

	  <from action=\"approveannounces.php\" method=\"post\">
              <input type=\"submit\" name=\"approve\" value=\"Approve\"> 
              <input type=\"hidden\" name=\"user\" value=".$row["annoid"]."> </form>                    

              <form action=\"editannounce.php\" method=\"post\">
              <input type=\"submit\" name=\"edit\" value=\"Edit\"> 
              <input type=\"hidden\" name=\"user\" value=".$row["annoid"]."> </form>
	  </ul>
              </tr>";

    $list .= "</tr>";
}

$list .= "</table>";

echo ($list);

The result is still the three buttons one above the other with no bullet points.

Thanks for your help so far, any more advice to get this resolved would be really helpful.

Weedpacket

You seem new to HTML as well:
You have <tr> elements with no <td> elements inside.
You have a <ul> element with no <li> elements inside.

As for CSS: since you want to use the "button" class to attach the style to the <form> elements so that they display inline, it would make more sense to use that class on the <form> elements instead of the <ul> element you said you had removed.