Dynamically Created Divs - Positioning Problem

[kate_rose]

Hi,

 

I am trying to create a bunch of pics html linked to more info on a page in a grid format. The pic names and link urls come from a mysql db and I use a php code & embedded css (see code below) to dynamically create divs for each pic and display them on the page linked to more info.

<div id="systems_visual_library">
<?php //this php code displays all the pics of systems and species and links them to the appropriate content from urls provided in the mysql table titled "systems_list"????
mysql_connect("55555555555","5555555","555555") or die(mysql_error()); // mysql connection to server
mysql_select_db("NRM_faculty_profiles") or die(mysql_error()); //use the NRM_faculty_profiles DB
//SYSTEM & SPECIES LINK BOXES
$data = mysql_query("SELECT * FROM systems_we_study") or die(mysql_error()); //get all the data from systems_list
$div_name = "#system_pic_linkbox"; // sets $div_name variable = to "#system_pic_linkbox"
while($info = mysql_fetch_array( $data )) //loops through each instance in the array executing commands inside { } for each instance
{
$count = $info['count']; // loads the # of the picture/link in the table into the variable $count
$div = $div_name . $count; // concatenates $div_name & $count so you get "system_pic_linkbox1","system_pic_linkbox2" etc.
echo "<style type=\"text/css\">
$div {
width: 162px;
height: 121px;
display: inline;
margin-top: 10px;
margin-left: 10px;
}
</style>"; // creates a div names $div
$url = $info['url_link'];//loads the url in the url column into $url
$jpeg = $info['jpeg_source'];//loads the jpeg source in the jpeg column into $jpeg
echo "<div id=\"$div\">"; //display div named $div
echo "<a href=\"$url\"><img src=\"$jpeg\" /></a>"; //displays the jpeg image linked to the url inside the div
echo "</div>";
}
?>
</div>

So the mechanics work fine but instead of displaying in a grid the divs are just stacked on top of one another with no margin between at all see what I mean -->(http://cherokee.tosm...ied/systems.php). I sized the container div so they would display 4 across. I also tried "float: left;" but it doesn't change anything.

 

Thanks,

 

Kate

Edited October 18, 2012 by Zane

[Zane]

Using a left float works fine for me. Not sure why it doesnt work in the ID style.

 

Then again, you are going about this all wrong. You are created the exact same styles for different IDs. IDs are meant to be unique, distinct, different. You need to be using classes for your pictures. Add a classname to your dynamic divs and create ONE style tag for that.

 

echo "<style type=\"text/css\">
$div {
width: 162px;
height: 121px;
display: inline;
margin-top: 10px;
margin-left: 10px;
}
</style>"; // creates a div names $div

 

The above should be regular raw HTML, not echoed with PHP.

 

Also, it should look something like this

<style type="text/css">
div.imageClass {
width: 162px;
height: 121px;
display: inline;
margin-top: 10px;
margin-left: 10px;
float:left;
}
</style>;

 

Then, in your loop, all you need to do is this

echo "<div class='imageClass'>"; //display div named $div

Edited October 18, 2012 by Zane

[kate_rose]

Thanks Zane,

 

As you can probably tell I am sort of new at CSS. I will go & try to implement your suggestions & see if I can get it to work.

 

kate

[kate_rose]

Zane,

 

I think that did it.

I guess I need to read about classes because I thought you hade to have a div id= statement to get the div to display. I had no idea you could use this sort of syntax

echo "<div class='imageClass'>"; //display div named $div

to get a div to display . . . It doesn't make much sense to me because I don't see where my named div "$div" is used in this statement

 

I will go read & try to figure it out.

 

Thanks again,

 

Kate

[Christian F.]

Change the username and password on the MySQL server ASAP!

mysql_connect("...","...","...")

Never post the connection details to your server on a public forum, preferably even if it's just for a localhost-only test server.

 

You should also move your comments to be above the line/block your commenting, not on the side of it. Moving it on top will make the code a whole lot easier to read, and thus easier to maintain.

Edited October 20, 2012 by salathe
Never quote connection details to a server.