How can I create DIV boxes with a while loop in PHP?

Question

I am trying to create a DIV box by reading its X,Y coordinates from MySQL. I am using PHP and HTML on the same file. I have included my CSS as well (I will make a separate CSS file afterwards).

Right now I am getting results but only boxes one under the other. I am doing a cartesian map and have to place each BOX on their appropriate position. I want to avoid using Javascript and Canvas, just pure css,html and php I am using DIVs for a specific reason to put information in them after. Below is my code, thanks in advance for the help!

Top of the file I have:

<!DOCTYPE html>
<?php
include 'db_conn.php';

//query to get X,Y coordinates from DB
$coord_sql = "SELECT x_coord, y_coord FROM coordinates";
$coord_result = mysqli_query($conn,$coord_sql);

//see if query is good
if($coord_result === false) {
    die(mysqli_error()); 
}
?>

My CSS in the head:

<style type="text/css">
    #desk_box{ width: 20px; height: 30px; border:10px solid black; margin: 10px;}   
</style>

I am trying to loop through here, for each row that exists create a div at its appropriate location:

<div class="section_a" >
  <p>Section A</p>
  <?php

//get number of rows for X,Y coords in the table
while($row = mysqli_fetch_assoc($coord_result)){    
  //naming X,Y values
    $x_pos = $row['x_coord'];
          $y_pos = $row['y_coord'];     

    //draw a box with a DIV at its X,Y coord    
    echo "<div id='desk_box'>box here</div>";                                           
    } //end while coord_result loop
?>

</div> <!-- end div section_a -->

Looks like you'll want to output a style attribute for each div to define its positioning with CSS. — showdev
– showdev, Commented Oct 1, 2014 at 17:13

Mark · Accepted Answer · 2014-10-01 17:38:48Z

2

No where are you actually assigning the coordinates to the DIV.

Like so:

//get number of rows for X,Y coords in the table
while($row = mysqli_fetch_assoc($coord_result)){    
    //naming X,Y values
    $x_pos = $row['x_coord'];
    $y_pos = $row['y_coord'];     

    //draw a box with a DIV at its X,Y coord    
    echo "<div id='desk_box' style='position: absolute;
                                        left: " . $x_pos . "px;
                                         top: " . $y_pos . "px;'>
           box here</div>";                                           
} //end while coord_result loop

This code is taking each X/Y coordinate and absolutely positioning the DIV from the left/top corner of the parent DIV, with the coordinates you generate in each loop.

edited Oct 1, 2014 at 17:38

answered Oct 1, 2014 at 17:14

Mark

8619 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

mario Over a year ago

I did that and they go to the upper left, I want them on their X,Y axis

Mark Over a year ago

Then I am really not sure what you are asking for. This code will generate one div for every set of X/Y coordinates in your database, and it will position them according to the X/Y coordinates in your database from the left/top corner of the page. If the issue is that you need them from a different corner you just need to update the CSS so that they are offset from the right or bottom or wherever you need. Otherwise, you should check your data by dumping your SQL results to ensure your database matches what you are expecting on the page.

DragonYen Over a year ago

The issue may be that of "section_a" (assuming it has some style in the css) funny things can happen to divs that are absolute positioned inside of another div, depending on the settings of the parent div. Even more so if you are using some sort of framework that is applying additional styles to your elements.

Mark Over a year ago

Good point, I updated my answer to indicate the relationship with the parent.

mario Over a year ago

I got rid of "section_a" DIV and still the problem occurs.. just to let you know I have 6 rows in my table the first row is at (20,20) and the last one at (150,150) still their not on screen at their appropriecate position

|

Collectives™ on Stack Overflow

How can I create DIV boxes with a while loop in PHP?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related