1

I am trying to create a loop in php to display a list of categories the loop is working fine and sql queries pulls all the correct information however I'm trying to echo out a <p> tag for every 4 times the loop increments, this creates a new line on my site design. How ever the issue being when I echo a p tag using echo '<p>'; it creates a closing tag straight after.

Here is my code:

        echo '<!-- Create first 4 --><P>';
                    while($row1 = mysql_fetch_array($result1))
                        {  
                        
                        echo '<div class="cat">';     
                        echo '<img src="'.$row1['IMAGE'].'" alt="'.$row1['NAME'].'">';
                        echo '<h2>'.$row1['NAME'].'</h2>';
                        echo '</div>';
                        $i++;
                        
                        //force a new line of catagories
                        if (( $i == 4 )||( $i == 8 )||( $i == 12 ))
                            {
                                echo '<!-- if more than 4 Close first 4 --></p>';
                                echo '<!-- Create second 4 --><p>'; 
                            }       
                        } 
                        echo '<!-- close first 4 --></p>';

When this is run in firefox and i check the source code i get this:

    <div class="content">
      <!-- Create first 4 -->
    <p></p><div class="cat"> … </div><div class="cat"> … </div><div class="cat"> … </div><div class="cat"> … </div>
      <!-- if more than 4 Close first 4 -->
    <p></p>
      <!-- Create second 4 -->
    <p></p><div class="cat"> … </div><div class="cat"> … </div><div class="cat"> … </div><div class="cat"> … </div>
      <!-- if more than 4 Close first 4 -->
    <p></p>
      <!-- Create second 4 -->
    <p> … </p></div>

I need it to print exactly what is inside the echo statements.

Rickmakeitquick
  • 102
  • 1
  • 9
andrew hutchings
  • 343
  • 1
  • 5
  • 18
  • 2
    Are you looking at _the page source_ or the _inspector_? The inspector tool will show you the closing tag it has to implicitly add to validate the HTML. The page source should show you exactly what you sent down. In Firefox, Ctl-U will show the source or `view-source://your-url-path...` – Michael Berkowski Jun 04 '13 at 10:53
  • @MichaelBerkowski is probably correct. +1. – Spudley Jun 04 '13 at 10:57

3 Answers3

3

You do print exactly what is inside the echo statements. However, if that happens to be invalid HTML then the browser may decide to "fix it" in order to have something usable to work with.

The correct approach to solve your problem would be to substitute <div> tags for <p> -- this would be valid HTML so the browser won't interfere, and you can use CSS to style them appropriately and achieve the same visual result you get with paragraphs.

Community
  • 1
  • 1
Jon
  • 428,835
  • 81
  • 738
  • 806
  • I 'm not sure why this was downvoted given that it explains what's going on and suggests a correct solution, but maybe it's just me. – Jon Jun 04 '13 at 10:58
0

Check out the "modulus operator" examples are here: http://php.net/manual/en/language.operators.arithmetic.php You only need to check if your loop is a factor of 4 and then execute your code. I also suggest you read your code out loud semantically and you'll find your error easily.

Chrisdigital
  • 384
  • 3
  • 8
0

I deleted unneeded lines from your code and got the following:

<?php

echo "<!-- Create first 4 --><p>\n";

$i = 0;
while ($i < 14)
{  
    echo '    <div class="cat"></div>' . "\n";     
    $i++;

    //force a new line of catagories
    if (( $i == 4 )||( $i == 8 )||( $i == 12 ))
    {
        echo '<!-- if more than 4 Close first 4 --></p>' . "\n";
        echo '<!-- Create second 4 --><p>' . "\n"; 
    }       
} 

echo '<!-- close first 4 --></p>' . "\n";
?>

And the result is:

<!-- Create first 4 --><p>
    <div class="cat"></div>
    <div class="cat"></div>
    <div class="cat"></div>
    <div class="cat"></div>
<!-- if more than 4 Close first 4 --></p>
<!-- Create second 4 --><p>
    <div class="cat"></div>
    <div class="cat"></div>
    <div class="cat"></div>
    <div class="cat"></div>
<!-- if more than 4 Close first 4 --></p>
<!-- Create second 4 --><p>
    <div class="cat"></div>
    <div class="cat"></div>
    <div class="cat"></div>
    <div class="cat"></div>
<!-- if more than 4 Close first 4 --></p>
<!-- Create second 4 --><p>
    <div class="cat"></div>
    <div class="cat"></div>
<!-- close first 4 --></p>

It seems alright. You have the problem somewhere else in your code.

BTW. I recommend using if ($i % 4 == 0) instead of if (( $i == 4 )||( $i == 8 )||( $i == 12 ))

Tsar Ioann
  • 444
  • 4
  • 9