Jump to content

Another Table Layout


doddsey_65

Recommended Posts

Can some one please tell me where Im going wrong and why the layout isnt displaying 2 per row. I know its gotta be something with the closing tags, but ive been trying for hours to find it.

 

<td id="col_main" valign="top" style="text-align:center;">
<div class="main_content">
		<font size="2"><a href=""><b><em>NEWEST TUTORIALS</em></b></font><hr>
                        	<div class="tutorials_row" style="margin-bottom:0px;">
						<table width="100%" border="2"><tr><td>



						<?php

						$i = 0;	

						$result = mysql_query("SELECT * FROM tutorials ORDER BY added ASC LIMIT 4") or die(mysql_error());
						while($row = mysql_fetch_object($result)) {

						if($i==0) {		echo '<tr>';	}		

						if($i==2) {		echo '</tr><tr>';		
						$i=0;  
						}

						?>

<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td class="tutorials_left" valign="top">
    <div class="tutorial_icon"><a href="">
	<img src="<?php echo $row->path; ?>" alt="Tutorial Icon" class="tutorial_icon" width="50" height="50"></a>
</div>
</td>
         <td class="tutorials_right" valign="top">
            <div class="tutorial_title"><a href="">Render Layers</a>
		</div>
		<div class="tutorial_uploaded"> Uploaded by <a href=""><?php echo $row->name; ?></a> on <em><?php echo $row->added; ?></em>
            </div>
            <div class="tutorial_cat">Category: <a href=""><?php echo $row->category; ?></a>
            </div>
      	 </td>
</tr>
</table>

<div class="tutorial_bar">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td class="views">Views: <em><?php echo $row->views; ?></em></td>
            <td class="comments"><a href="" title="Tutorial Comments">Comments:</a> <em>3</em></td>
            <td class="rating">Rating: <a href="">4.76</a></td>
          </tr>
        </table>
 </div>
</div>
</td><td>
<?php

$i++;

}
?>
</tr>
</table>
</tr>
</table>
</div>

Link to comment
Share on other sites

You should scrap that entire first half and start over again. Take a look at the html it's producing. I guarantee you have a few extra tr's in there and a few missing td's. Take a look at what that loop is doing. You are not adding td's in that loop and you are putting a tr inside of that initial td tag you placed outside of the loop. Stuff is crazy.

Link to comment
Share on other sites

Also you have two table closing tags on there. No td closing tag at the end to close the mysterious floating td tag you have at the top. I hope this is incomplete code because I am very confused. Run your site. Right click it and view the source then post the source for your site at the specific area your tables are being created. That will make it a lot easier to see what extra stuff is being placed in and what is missing.

Link to comment
Share on other sites

heres the source:

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>The Vault | A Tutorial Repository</title>
<meta name="keywords" content="" />
<meta name="description" content="" />

<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen" />

</head>
<body>
<br>
<div id="logo">
<img src="images/main_logo.png">
</div>

<div id="container">
            <div id="dyn_container">
  
             <div id="main_container">

		 <div id="mainheader">
                	<img src="images/categories.png"><img src="images/middle.png"><img src="images/tutorials.png"></div>
		             	<table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>

<td id="left" valign="top">
                        						<div id="left_categories">
                        	
                            
                            <div class="cat_content">
                            	<table width="100%" border="0" cellspacing="0" cellpadding="0">
                               	  <tr>
								<td class="icon"><img src="images/icons/ball.png"></td>
								<td class="title" valign="bottom"><a href="">Animation</a></td>
							   
							  
								<td class="icon"><img src="images/icons/ball.png"></td>
								<td class="title" valign="bottom"><a href="">Basics</a></td>
							  </tr> 
							  <tr>
								<td class="icon"><img src="images/icons/ball.png"></td>
								<td class="title" valign="bottom"><a href="">Cloth</a></td>
							  
								<td class="icon"><img src="images/icons/ball.png"></td>
								<td class="title" valign="bottom"><a href="">Compositing</a></td>
							  </tr> 
							  <tr>
								<td class="icon"><img src="images/icons/ball.png"></td>
								<td class="title" valign="bottom"><a href="">Dynamics</a></td>

								<td class="icon"><img src="images/icons/ball.png"></td>
								<td class="title" valign="bottom"><a href="">Fluid</a></td>
							  </tr> 
							  <tr>
								<td class="icon"><img src="images/icons/ball.png"></td>
								<td class="title" valign="bottom"><a href="">Game Engine</a></td>
							  
								<td class="icon"><img src="images/icons/ball.png"></td>
								<td class="title" valign="bottom"><a href="">General</a></td>
							  </tr> 
							  <tr>
								<td class="icon"><img src="images/icons/ball.png"></td>
								<td class="title" valign="bottom"><a href="">Lighting</a></td>
							  
								<td class="icon"><img src="images/icons/ball.png"></td>
								<td class="title" valign="bottom"><a href="">Modelling</a></td>
							  </tr> 
							  <tr>
								<td class="icon"><img src="images/icons/ball.png"></td>
								<td class="title" valign="bottom"><a href="">Modifiers</a></td>
							  
								<td class="icon"><img src="images/icons/ball.png"></td>
								<td class="title" valign="bottom"><a href="">Particles</a></td>
							  </tr> 
							  <tr>
								<td class="icon"><img src="images/icons/ball.png"></td>
								<td class="title" valign="bottom"><a href="">Rendering</a></td>
							  
								<td class="icon"><img src="images/icons/ball.png"></td>
								<td class="title" valign="bottom"><a href="">Rigging</a></td>
							  </tr> 
							  <tr>
								<td class="icon"><img src="images/icons/ball.png"></td>
								<td class="title" valign="bottom"><a href="">Scripts</a></td>

								<td class="icon"><img src="images/icons/ball.png"></td>
								<td class="title" valign="bottom"><a href="">Sculpting</a></td>
							  </tr> 
							  <tr>
								<td class="icon"><img src="images/icons/ball.png"></td>
								<td class="title" valign="bottom"><a href="">Texturing</a></td>

								<td class="icon"><img src="images/icons/ball.png"></td>
								<td class="title" valign="bottom"><a href="">Tips And Tricks</a></td>
							  </tr> 
							  <tr>
								<td class="icon"><img src="images/icons/ball.png"></td>
								<td class="title" valign="bottom"><a href="">UV Mapping</a></td>
							  </tr> 
							  </table>
                            </div>



						 <div class="left_cat_title" align="center">
                            	<a href="#">Weekly Quiz</a>
                            </div>
                            <div class="cat_content">
                            	<table width="100%" border="0" cellspacing="0" cellpadding="0">
                                								  <tr>
								<form action ="/thevault/index.php" method=POST>
								<td class="title" valign="bottom" align="center">When was Blender 3D first Released?</td></tr>
								<tr><td>


<div align="center">
<input type = radio name=options value=1995>1995
<input type = radio name=options value=1998>1998
<input type = radio name=options value=2000>2000
<input type = radio name=options value=2002>2002
</div></tr></td><tr><td><br>
<div align="center">
<input type=submit value=Submit name=poll_btn></form>
</div></td>
							  </tr> 
							  </table>
                            </div>
						          							


                    <td id="col_main" valign="top" style="text-align:center;">
<div class="main_content">
		<font size="2"><a href=""><b><em>NEWEST TUTORIALS</em></b></font><hr>
                        	<div class="tutorials_row" style="margin-bottom:0px;">
						<table width="100%" border="2"><tr><td>



						<tr>							
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td class="tutorials_left" valign="top">
    <div class="tutorial_icon"><a href="">
	<img src="tutcovers/hamishsky.jpg" alt="Tutorial Icon" class="tutorial_icon" width="50" height="50"></a>
</div>
</td>
         <td class="tutorials_right" valign="top">
            <div class="tutorial_title"><a href="">Render Layers</a>
		</div>
		<div class="tutorial_uploaded"> Uploaded by <a href="">Creating Sky</a> on <em>2010-04-01</em>
            </div>
            <div class="tutorial_cat">Category: <a href="">17</a>
            </div>
      	 </td>
</tr>
</table>


</div>
</td><td>

<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td class="tutorials_left" valign="top">
    <div class="tutorial_icon"><a href="">
	<img src="tutcovers/hamishlava.jpg" alt="Tutorial Icon" class="tutorial_icon" width="50" height="50"></a>
</div>
</td>
         <td class="tutorials_right" valign="top">
            <div class="tutorial_title"><a href="">Render Layers</a>
		</div>
		<div class="tutorial_uploaded"> Uploaded by <a href="">Making Lava</a> on <em>2010-04-01</em>
            </div>
            <div class="tutorial_cat">Category: <a href="">1</a>
            </div>
      	 </td>
</tr>
</table>


</div>
</td><td>
</tr><tr>							
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td class="tutorials_left" valign="top">
    <div class="tutorial_icon"><a href="">
	<img src="tutcovers/hamishtext.jpg" alt="Tutorial Icon" class="tutorial_icon" width="50" height="50"></a>
</div>
</td>
         <td class="tutorials_right" valign="top">
            <div class="tutorial_title"><a href="">Render Layers</a>
		</div>
		<div class="tutorial_uploaded"> Uploaded by <a href="">3D Text</a> on <em>2010-04-01</em>
            </div>
            <div class="tutorial_cat">Category: <a href="">10</a>
            </div>
      	 </td>
</tr>
</table>


</div>
</td><td>

<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td class="tutorials_left" valign="top">
    <div class="tutorial_icon"><a href="">
	<img src="tutcovers/hamishlogo.jpg" alt="Tutorial Icon" class="tutorial_icon" width="50" height="50"></a>
</div>
</td>
         <td class="tutorials_right" valign="top">
            <div class="tutorial_title"><a href="">Render Layers</a>
		</div>
		<div class="tutorial_uploaded"> Uploaded by <a href="">3D Logo</a> on <em>2010-04-01</em>
            </div>
            <div class="tutorial_cat">Category: <a href="">10</a>
            </div>
      	 </td>
</tr>
</table>


</div>
</td><td>
</tr>
</table>
</tr>
</table>
</div>

Link to comment
Share on other sites

Do you see a problem in this area of your code?

 

                        



<div class="tutorials_row" style="margin-bottom:0px;">
<table width="100%" border="2"><tr><td>
<tr>

 

You shouldn't put a <tr> tag inside of your <td> tag

 

so change this line

<table width="100%" border="2"><tr><td>

 

to this

<table width="100%" border="2">

Link to comment
Share on other sites

okay ive tidied up the code a bit:

 

<td id="col_main" valign="top" style="text-align:center;">
<div class="main_content">
	<font size="2"><a href=""><b><em>NEWEST TUTORIALS</em></b></font><hr>
            <div class="tutorials_row" style="margin-bottom:0px;">
			<table width="100%" border="5">
				<tr>
					<td>

						<?php

						$i = 0;	

						$result = mysql_query("SELECT * FROM tutorials ORDER BY added ASC LIMIT 4") or die(mysql_error());
						while($row = mysql_fetch_object($result)) {

						if($i==2) {		
						echo '</tr><tr>';		
						$i=0;  
						}

						?>
<table width="50%" border="10" cellspacing="0" cellpadding="0">
<tr>
	<td class="tutorials_left" valign="top">

		<div class="tutorial_icon">
			<img src="<?php echo $row->path; ?>" alt="Tutorial Icon" class="tutorial_icon" width="50" height="50"></a>
			<?php echo $i; ?>
		</div>
	</td>




        <td class="tutorials_right" valign="top">
            <div class="tutorial_title"><a href=""><?php echo $row->name; ?></a>
		</div>
		<div class="tutorial_uploaded"> Uploaded by <a href=""><?php echo $row->fullname; ?></a> on <em><?php echo $row->added; ?></em>
            </div>
            <div class="tutorial_cat">Category: <a href=""><?php echo $row->category; ?></a>
            </div>
        </td>
</tr>
</table>



<div class="tutorial_bar">
        <table width="50%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td class="views">Views: <em><?php echo $row->views; ?></em></td>
            <td class="comments"><a href="" title="Tutorial Comments">Comments:</a> <em>3</em></td>
            <td class="rating">Rating: <a href="">4.76</a></td>
          </tr>
        </table>
</div>

<?php

$i++;

}
?>
				</td>
			</tr>
		</table>
	</div>
</div>
</td>

Link to comment
Share on other sites

Thankyou. Just a little more should fix it up. For this block of code

 

	<table width="100%" border="5">
				<tr>
					<td>

						<?php

						$i = 0;	

						$result = mysql_query("SELECT * FROM tutorials ORDER BY added ASC LIMIT 4") or die(mysql_error());
						while($row = mysql_fetch_object($result)) {

						if($i==2) {		
						echo '</tr><tr>';		
						$i=0;  
						}

						?>

 

change it to this

 

	<table width="100%" border="5"><tr>

						<?php

						$i = 0;	

						$result = mysql_query("SELECT * FROM tutorials ORDER BY added ASC LIMIT 4") or die(mysql_error());
						while($row = mysql_fetch_object($result)) {
						echo '<td>';

						if($i%2 == 0) {		
						echo '</tr><tr>';		
						}

						?>

Link to comment
Share on other sites

sorry but ive fixed it, thanks for your help though. after i tidied it up it was easier. I added a <td> to the end of

 

if ($i == 2) {
echo '</tr><tr>'; // added td here
}

 

Np. I would advise making that switch to using the mod operator though like I recommended. It allows for easier expandability in your system. It will make it so every number that can evenly be divided by 2 will set off the if.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.